[Solved]-Dynamically update values of a chartjs chart-Chart.js

update: looks like chartjs has been updated (see comment below). there are some examples up that look very nice:

1. here's an example of updating a line chart using new data: http://jsbin.com/yitep/5/edit
2. here's how we can update existing data on a line chart: http://jsbin.com/yitep/4/edit

original post

as of nov 2013, there seem to be very few options for updating charts.

there is a good example here (duplicated below) of adding new points to a line chart. still kind of jumpy but not too bad. however, i think the effect probably depends on the chart you are using.

it does look like this is somewhere in the development pipeline. i don't see any indication of a release date yet though: https://github.com/nnnick/chart.js/issues/13 [closed as of jul 26, 2014]

js

$(document).ready(function(){
  var count = 10;
  var data = {
      labels : ["1","2","3","4","5", "6", "7", "8", "9", "10"],
        datasets : [
          {
                fillcolor : "rgba(220,220,220,0.5)",
                strokecolor : "rgba(220,220,220,1)",
                pointcolor : "rgba(220,220,220,1)",
                pointstrokecolor : "#fff",
                data : [65,59,90,81,56,45,30,20,3,37]
            },
            {
                fillcolor : "rgba(151,187,205,0.5)",
                strokecolor : "rgba(151,187,205,1)",
                pointcolor : "rgba(151,187,205,1)",
                pointstrokecolor : "#fff",
                data : [28,48,40,19,96,87,66,97,92,85]
            }
        ]
  }
  // this is ugly, don't judge me
  var updatedata = function(olddata){
    var labels = olddata["labels"];
    var dataseta = olddata["datasets"][0]["data"];
    var datasetb = olddata["datasets"][1]["data"];

    labels.shift();
    count++;
    labels.push(count.tostring());
    var newdataa = dataseta[9] + (20 - math.floor(math.random() * (41)));
    var newdatab = datasetb[9] + (20 - math.floor(math.random() * (41)));
    dataseta.push(newdataa);
    datasetb.push(newdatab);
    dataseta.shift();
    datasetb.shift();    };

  var optionsanimation = {
    //boolean - if we want to override with a hard coded scale
    scaleoverride : true,
    //** required if scaleoverride is true **
    //number - the number of steps in a hard coded scale
    scalesteps : 10,
    //number - the value jump in the hard coded scale
    scalestepwidth : 10,
    //number - the scale starting value
    scalestartvalue : 0
  }

  // not sure why the scaleoverride isn't working...
  var optionsnoanimation = {
    animation : false,
    //boolean - if we want to override with a hard coded scale
    scaleoverride : true,
    //** required if scaleoverride is true **
    //number - the number of steps in a hard coded scale
    scalesteps : 20,
    //number - the value jump in the hard coded scale
    scalestepwidth : 10,
    //number - the scale starting value
    scalestartvalue : 0
  }

  //get the context of the canvas element we want to select
  var ctx = document.getelementbyid("mychart").getcontext("2d");
  var optionsnoanimation = {animation : false}
  var mynewchart = new chart(ctx);
  mynewchart.line(data, optionsanimation);  

  setinterval(function(){
    updatedata(data);
    mynewchart.line(data, optionsnoanimation)
    ;}, 2000
  );
});


// chartjs
var chart=function(s){function v(a,c,b){a=a((a-c.graphmin)/(c.steps*c.stepvalue),1,0);return b*c.steps*a}function x(a,c,b,e){function h(){g+=f;var k=a.animation?a(d(g),null,0):1;e.clearrect(0,0,q,u);a.scaleoverlay?(b(k),c()):(c(),b(k));if(1>=g)d(h);else if("function"==typeof a.onanimationcomplete)a.onanimationcomplete()}var f=a.animation?1/a(a.animationsteps,number.max_value,1):1,d=b[a.animationeasing],g=a.animation?0:1;"function"!==typeof c&&(c=function(){});d(h)}function c(a,c,b,e,h,f){var d;a=
math.floor(math.log(e-h)/math.ln10);h=math.floor(h/(1*math.pow(10,a)))*math.pow(10,a);e=math.ceil(e/(1*math.pow(10,a)))*math.pow(10,a)-h;a=math.pow(10,a);for(d=math.round(e/a);d<b||d>c;)a=d<b?a/2:2*a,d=math.round(e/a);c=[];z(f,c,d,h,a);return{steps:d,stepvalue:a,graphmin:h,labels:c}}function z(a,c,b,e,h){if(a)for(var f=1;f<b+1;f++)c.push(e(a,{value:(e+h*f).tofixed(0!=h%1?h.tostring().split(".")[1].length:0)}))}function a(a,c,b){return!isnan(parsefloat(c))&&isfinite(c)&&a>c?c:!isnan(parsefloat(b))&&
isfinite(b)&&a<b?b:a}function y(a,c){var b={},e;for(e in a)b[e]=a[e];for(e in c)b[e]=c[e];return b}function e(a,c){var b=!/\w/.test(a)?f[a]=f[a]||e(document.getelementbyid(a).innerhtml):new function("obj","var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push('"+a.replace(/[\r\t\n]/g," ").split("<%").join("\t").replace(/((^|%>)[^\t]*)'/g,"$1\r").replace(/\t=(.*?)%>/g,"',$1,'").split("\t").join("');").split("%>").join("p.push('").split("\r").join("\\'")+"');}return p.join('');");return c?
b(c):b}var r=this,b={linear:function(a){return a},easeinquad:function(a){return a*a},easeoutquad:function(a){return-1*a*(a-2)},easeinoutquad:function(a){return 1>(a/=0.5)?0.5*a*a:-0.5*(--a*(a-2)-1)},easeincubic:function(a){return a*a*a},easeoutcubic:function(a){return 1*((a=a/1-1)*a*a+1)},easeinoutcubic:function(a){return 1>(a/=0.5)?0.5*a*a*a:0.5*((a-=2)*a*a+2)},easeinquart:function(a){return a*a*a*a},easeoutquart:function(a){return-1*((a=a/1-1)*a*a*a-1)},easeinoutquart:function(a){return 1>(a/=0.5)?
0.5*a*a*a*a:-0.5*((a-=2)*a*a*a-2)},easeinquint:function(a){return 1*(a/=1)*a*a*a*a},easeoutquint:function(a){return 1*((a=a/1-1)*a*a*a*a+1)},easeinoutquint:function(a){return 1>(a/=0.5)?0.5*a*a*a*a*a:0.5*((a-=2)*a*a*a*a+2)},easeinsine:function(a){return-1*math.cos(a/1*(math.pi/2))+1},easeoutsine:function(a){return 1*math.sin(a/1*(math.pi/2))},easeinoutsine:function(a){return-0.5*(math.cos(math.pi*a/1)-1)},easeinexpo:function(a){return 0==a?1:1*math.pow(2,10*(a/1-1))},easeoutexpo:function(a){return 1==
a?1:1*(-math.pow(2,-10*a/1)+1)},easeinoutexpo:function(a){return 0==a?0:1==a?1:1>(a/=0.5)?0.5*math.pow(2,10*(a-1)):0.5*(-math.pow(2,-10*--a)+2)},easeincirc:function(a){return 1<=a?a:-1*(math.sqrt(1-(a/=1)*a)-1)},easeoutcirc:function(a){return 1*math.sqrt(1-(a=a/1-1)*a)},easeinoutcirc:function(a){return 1>(a/=0.5)?-0.5*(math.sqrt(1-a*a)-1):0.5*(math.sqrt(1-(a-=2)*a)+1)},easeinelastic:function(a){var c=1.70158,b=0,e=1;if(0==a)return 0;if(1==(a/=1))return 1;b||(b=0.3);e<math.abs(1)?(e=1,c=b/4):c=b/(2*
math.pi)*math.asin(1/e);return-(e*math.pow(2,10*(a-=1))*math.sin((1*a-c)*2*math.pi/b))},easeoutelastic:function(a){var c=1.70158,b=0,e=1;if(0==a)return 0;if(1==(a/=1))return 1;b||(b=0.3);e<math.abs(1)?(e=1,c=b/4):c=b/(2*math.pi)*math.asin(1/e);return e*math.pow(2,-10*a)*math.sin((1*a-c)*2*math.pi/b)+1},easeinoutelastic:function(a){var c=1.70158,b=0,e=1;if(0==a)return 0;if(2==(a/=0.5))return 1;b||(b=1*0.3*1.5);e<math.abs(1)?(e=1,c=b/4):c=b/(2*math.pi)*math.asin(1/e);return 1>a?-0.5*e*math.pow(2,10*
(a-=1))*math.sin((1*a-c)*2*math.pi/b):0.5*e*math.pow(2,-10*(a-=1))*math.sin((1*a-c)*2*math.pi/b)+1},easeinback:function(a){return 1*(a/=1)*a*(2.70158*a-1.70158)},easeoutback:function(a){return 1*((a=a/1-1)*a*(2.70158*a+1.70158)+1)},easeinoutback:function(a){var c=1.70158;return 1>(a/=0.5)?0.5*a*a*(((c*=1.525)+1)*a-c):0.5*((a-=2)*a*(((c*=1.525)+1)*a+c)+2)},easeinbounce:function(a){return 1-b.easeoutbounce(1-a)},easeoutbounce:function(a){return(a/=1)<1/2.75?1*7.5625*a*a:a<2/2.75?1*(7.5625*(a-=1.5/2.75)*
a+0.75):a<2.5/2.75?1*(7.5625*(a-=2.25/2.75)*a+0.9375):1*(7.5625*(a-=2.625/2.75)*a+0.984375)},easeinoutbounce:function(a){return 0.5>a?0.5*b.easeinbounce(2*a):0.5*b.easeoutbounce(2*a-1)+0.5}},q=s.canvas.width,u=s.canvas.height;window.devicepixelratio&&(s.canvas.style.width=q+"px",s.canvas.style.height=u+"px",s.canvas.height=u*window.devicepixelratio,s.canvas.width=q*window.devicepixelratio,s.scale(window.devicepixelratio,window.devicepixelratio));this.polararea=function(a,c){r.polararea.defaults={scaleoverlay:!0,
scaleoverride:!1,scalesteps:null,scalestepwidth:null,scalestartvalue:null,scaleshowline:!0,scalelinecolor:"rgba(0,0,0,.1)",scalelinewidth:1,scaleshowlabels:!0,scalelabel:"<%=value%>",scalefontfamily:"'arial'",scalefontsize:12,scalefontstyle:"normal",scalefontcolor:"#666",scaleshowlabelbackdrop:!0,scalebackdropcolor:"rgba(255,255,255,0.75)",scalebackdroppaddingy:2,scalebackdroppaddingx:2,segmentshowstroke:!0,segmentstrokecolor:"#fff",segmentstrokewidth:2,animation:!0,animationsteps:100,animationeasing:"easeoutbounce",
animaterotate:!0,animatescale:!1,onanimationcomplete:null};var b=c?y(r.polararea.defaults,c):r.polararea.defaults;return new g(a,b,s)};this.radar=function(a,c){r.radar.defaults={scaleoverlay:!1,scaleoverride:!1,scalesteps:null,scalestepwidth:null,scalestartvalue:null,scaleshowline:!0,scalelinecolor:"rgba(0,0,0,.1)",scalelinewidth:1,scaleshowlabels:!1,scalelabel:"<%=value%>",scalefontfamily:"'arial'",scalefontsize:12,scalefontstyle:"normal",scalefontcolor:"#666",scaleshowlabelbackdrop:!0,scalebackdropcolor:"rgba(255,255,255,0.75)",
scalebackdroppaddingy:2,scalebackdroppaddingx:2,angleshowlineout:!0,anglelinecolor:"rgba(0,0,0,.1)",anglelinewidth:1,pointlabelfontfamily:"'arial'",pointlabelfontstyle:"normal",pointlabelfontsize:12,pointlabelfontcolor:"#666",pointdot:!0,pointdotradius:3,pointdotstrokewidth:1,datasetstroke:!0,datasetstrokewidth:2,datasetfill:!0,animation:!0,animationsteps:60,animationeasing:"easeoutquart",onanimationcomplete:null};var b=c?y(r.radar.defaults,c):r.radar.defaults;return new h(a,b,s)};this.pie=function(a,
c){r.pie.defaults={segmentshowstroke:!0,segmentstrokecolor:"#fff",segmentstrokewidth:2,animation:!0,animationsteps:100,animationeasing:"easeoutbounce",animaterotate:!0,animatescale:!1,onanimationcomplete:null};var b=c?y(r.pie.defaults,c):r.pie.defaults;return new i(a,b,s)};this.doughnut=function(a,c){r.doughnut.defaults={segmentshowstroke:!0,segmentstrokecolor:"#fff",segmentstrokewidth:2,percentageinnercutout:50,animation:!0,animationsteps:100,animationeasing:"easeoutbounce",animaterotate:!0,animatescale:!1,
onanimationcomplete:null};var b=c?y(r.doughnut.defaults,c):r.doughnut.defaults;return new j(a,b,s)};this.line=function(a,c){r.line.defaults={scaleoverlay:!1,scaleoverride:!1,scalesteps:null,scalestepwidth:null,scalestartvalue:null,scalelinecolor:"rgba(0,0,0,.1)",scalelinewidth:1,scaleshowlabels:!0,scalelabel:"<%=value%>",scalefontfamily:"'arial'",scalefontsize:12,scalefontstyle:"normal",scalefontcolor:"#666",scaleshowgridlines:!0,scalegridlinecolor:"rgba(0,0,0,.05)",scalegridlinewidth:1,beziercurve:!0,
pointdot:!0,pointdotradius:4,pointdotstrokewidth:2,datasetstroke:!0,datasetstrokewidth:2,datasetfill:!0,animation:!0,animationsteps:60,animationeasing:"easeoutquart",onanimationcomplete:null};var b=c?y(r.line.defaults,c):r.line.defaults;return new k(a,b,s)};this.bar=function(a,c){r.bar.defaults={scaleoverlay:!1,scaleoverride:!1,scalesteps:null,scalestepwidth:null,scalestartvalue:null,scalelinecolor:"rgba(0,0,0,.1)",scalelinewidth:1,scaleshowlabels:!0,scalelabel:"<%=value%>",scalefontfamily:"'arial'",
scalefontsize:12,scalefontstyle:"normal",scalefontcolor:"#666",scaleshowgridlines:!0,scalegridlinecolor:"rgba(0,0,0,.05)",scalegridlinewidth:1,barshowstroke:!0,barstrokewidth:2,barvaluespacing:5,bardatasetspacing:1,animation:!0,animationsteps:60,animationeasing:"easeoutquart",onanimationcomplete:null};var b=c?y(r.bar.defaults,c):r.bar.defaults;return new l(a,b,s)};var g=function(a,c,b){var e,h,f,d,g,k,j,l,m;g=math.min.apply(math,[q,u])/2;g-=math.max.apply(math,[0.5*c.scalefontsize,0.5*c.scalelinewidth]);
d=2*c.scalefontsize;c.scaleshowlabelbackdrop&&(d+=2*c.scalebackdroppaddingy,g-=1.5*c.scalebackdroppaddingy);l=g;d=d?d:5;e=number.min_value;h=number.max_value;for(f=0;f<a.length;f++)a[f].value>e&&(e=a[f].value),a[f].value<h&&(h=a[f].value);f=math.floor(l/(0.66*d));d=math.floor(0.5*(l/d));m=c.scaleshowlabels?c.scalelabel:null;c.scaleoverride?(j={steps:c.scalesteps,stepvalue:c.scalestepwidth,graphmin:c.scalestartvalue,labels:[]},z(m,j.labels,j.steps,c.scalestartvalue,c.scalestepwidth)):j=c(l,f,d,e,h,
m);k=g/j.steps;x(c,function(){for(var a=0;a<j.steps;a++)if(c.scaleshowline&&(b.beginpath(),b.arc(q/2,u/2,k*(a+1),0,2*math.pi,!0),b.strokestyle=c.scalelinecolor,b.linewidth=c.scalelinewidth,b.stroke()),c.scaleshowlabels){b.textalign="center";b.font=c.scalefontstyle+" "+c.scalefontsize+"px "+c.scalefontfamily;var e=j.labels[a];if(c.scaleshowlabelbackdrop){var d=b.measuretext(e).width;b.fillstyle=c.scalebackdropcolor;b.beginpath();b.rect(math.round(q/2-d/2-c.scalebackdroppaddingx),math.round(u/2-k*(a+
1)-0.5*c.scalefontsize-c.scalebackdroppaddingy),math.round(d+2*c.scalebackdroppaddingx),math.round(c.scalefontsize+2*c.scalebackdroppaddingy));b.fill()}b.textbaseline="middle";b.fillstyle=c.scalefontcolor;b.filltext(e,q/2,u/2-k*(a+1))}},function(e){var d=-math.pi/2,g=2*math.pi/a.length,f=1,h=1;c.animation&&(c.animatescale&&(f=e),c.animaterotate&&(h=e));for(e=0;e<a.length;e++)b.beginpath(),b.arc(q/2,u/2,f*v(a[e].value,j,k),d,d+h*g,!1),b.lineto(q/2,u/2),b.closepath(),b.fillstyle=a[e].color,b.fill(),
c.segmentshowstroke&&(b.strokestyle=c.segmentstrokecolor,b.linewidth=c.segmentstrokewidth,b.stroke()),d+=h*g},b)},h=function(a,c,b){var e,h,f,d,g,k,j,l,m;a.labels||(a.labels=[]);g=math.min.apply(math,[q,u])/2;d=2*c.scalefontsize;for(e=l=0;e<a.labels.length;e++)b.font=c.pointlabelfontstyle+" "+c.pointlabelfontsize+"px "+c.pointlabelfontfamily,h=b.measuretext(a.labels[e]).width,h>l&&(l=h);g-=math.max.apply(math,[l,1.5*(c.pointlabelfontsize/2)]);g-=c.pointlabelfontsize;l=g=a(g,null,0);d=d?d:5;e=number.min_value;
h=number.max_value;for(f=0;f<a.datasets.length;f++)for(m=0;m<a.datasets[f].data.length;m++)a.datasets[f].data[m]>e&&(e=a.datasets[f].data[m]),a.datasets[f].data[m]<h&&(h=a.datasets[f].data[m]);f=math.floor(l/(0.66*d));d=math.floor(0.5*(l/d));m=c.scaleshowlabels?c.scalelabel:null;c.scaleoverride?(j={steps:c.scalesteps,stepvalue:c.scalestepwidth,graphmin:c.scalestartvalue,labels:[]},z(m,j.labels,j.steps,c.scalestartvalue,c.scalestepwidth)):j=c(l,f,d,e,h,m);k=g/j.steps;x(c,function(){var e=2*math.pi/
a.datasets[0].data.length;b.save();b.translate(q/2,u/2);if(c.angleshowlineout){b.strokestyle=c.anglelinecolor;b.linewidth=c.anglelinewidth;for(var d=0;d<a.datasets[0].data.length;d++)b.rotate(e),b.beginpath(),b.moveto(0,0),b.lineto(0,-g),b.stroke()}for(d=0;d<j.steps;d++){b.beginpath();if(c.scaleshowline){b.strokestyle=c.scalelinecolor;b.linewidth=c.scalelinewidth;b.moveto(0,-k*(d+1));for(var f=0;f<a.datasets[0].data.length;f++)b.rotate(e),b.lineto(0,-k*(d+1));b.closepath();b.stroke()}c.scaleshowlabels&&
(b.textalign="center",b.font=c.scalefontstyle+" "+c.scalefontsize+"px "+c.scalefontfamily,b.textbaseline="middle",c.scaleshowlabelbackdrop&&(f=b.measuretext(j.labels[d]).width,b.fillstyle=c.scalebackdropcolor,b.beginpath(),b.rect(math.round(-f/2-c.scalebackdroppaddingx),math.round(-k*(d+1)-0.5*c.scalefontsize-c.scalebackdroppaddingy),math.round(f+2*c.scalebackdroppaddingx),math.round(c.scalefontsize+2*c.scalebackdroppaddingy)),b.fill()),b.fillstyle=c.scalefontcolor,b.filltext(j.labels[d],0,-k*(d+
1)))}for(d=0;d<a.labels.length;d++){b.font=c.pointlabelfontstyle+" "+c.pointlabelfontsize+"px "+c.pointlabelfontfamily;b.fillstyle=c.pointlabelfontcolor;var f=math.sin(e*d)*(g+c.pointlabelfontsize),h=math.cos(e*d)*(g+c.pointlabelfontsize);b.textalign=e*d==math.pi||0==e*d?"center":e*d>math.pi?"right":"left";b.textbaseline="middle";b.filltext(a.labels[d],f,-h)}b.restore()},function(d){var e=2*math.pi/a.datasets[0].data.length;b.save();b.translate(q/2,u/2);for(var g=0;g<a.datasets.length;g++){b.beginpath();
b.moveto(0,d*-1*v(a.datasets[g].data[0],j,k));for(var f=1;f<a.datasets[g].data.length;f++)b.rotate(e),b.lineto(0,d*-1*v(a.datasets[g].data[f],j,k));b.closepath();b.fillstyle=a.datasets[g].fillcolor;b.strokestyle=a.datasets[g].strokecolor;b.linewidth=c.datasetstrokewidth;b.fill();b.stroke();if(c.pointdot){b.fillstyle=a.datasets[g].pointcolor;b.strokestyle=a.datasets[g].pointstrokecolor;b.linewidth=c.pointdotstrokewidth;for(f=0;f<a.datasets[g].data.length;f++)b.rotate(e),b.beginpath(),b.arc(0,d*-1*
v(a.datasets[g].data[f],j,k),c.pointdotradius,2*math.pi,!1),b.fill(),b.stroke()}b.rotate(e)}b.restore()},b)},i=function(a,c,b){for(var e=0,h=math.min.apply(math,[u/2,q/2])-5,f=0;f<a.length;f++)e+=a[f].value;x(c,null,function(d){var g=-math.pi/2,f=1,j=1;c.animation&&(c.animatescale&&(f=d),c.animaterotate&&(j=d));for(d=0;d<a.length;d++){var l=j*a[d].value/e*2*math.pi;b.beginpath();b.arc(q/2,u/2,f*h,g,g+l);b.lineto(q/2,u/2);b.closepath();b.fillstyle=a[d].color;b.fill();c.segmentshowstroke&&(b.linewidth=
c.segmentstrokewidth,b.strokestyle=c.segmentstrokecolor,b.stroke());g+=l}},b)},j=function(a,c,b){for(var e=0,h=math.min.apply(math,[u/2,q/2])-5,f=h*(c.percentageinnercutout/100),d=0;d<a.length;d++)e+=a[d].value;x(c,null,function(d){var k=-math.pi/2,j=1,l=1;c.animation&&(c.animatescale&&(j=d),c.animaterotate&&(l=d));for(d=0;d<a.length;d++){var m=l*a[d].value/e*2*math.pi;b.beginpath();b.arc(q/2,u/2,j*h,k,k+m,!1);b.arc(q/2,u/2,j*f,k+m,k,!0);b.closepath();b.fillstyle=a[d].color;b.fill();c.segmentshowstroke&&
(b.linewidth=c.segmentstrokewidth,b.strokestyle=c.segmentstrokecolor,b.stroke());k+=m}},b)},k=function(a,c,b){var e,h,f,d,g,k,j,l,m,t,r,n,p,s=0;g=u;b.font=c.scalefontstyle+" "+c.scalefontsize+"px "+c.scalefontfamily;t=1;for(d=0;d<a.labels.length;d++)e=b.measuretext(a.labels[d]).width,t=e>t?e:t;q/a.labels.length<t?(s=45,q/a.labels.length<math.cos(s)*t?(s=90,g-=t):g-=math.sin(s)*t):g-=c.scalefontsize;d=c.scalefontsize;g=g-5-d;e=number.min_value;h=number.max_value;for(f=0;f<a.datasets.length;f++)for(l=
0;l<a.datasets[f].data.length;l++)a.datasets[f].data[l]>e&&(e=a.datasets[f].data[l]),a.datasets[f].data[l]<h&&(h=a.datasets[f].data[l]);f=math.floor(g/(0.66*d));d=math.floor(0.5*(g/d));l=c.scaleshowlabels?c.scalelabel:"";c.scaleoverride?(j={steps:c.scalesteps,stepvalue:c.scalestepwidth,graphmin:c.scalestartvalue,labels:[]},z(l,j.labels,j.steps,c.scalestartvalue,c.scalestepwidth)):j=c(g,f,d,e,h,l);k=math.floor(g/j.steps);d=1;if(c.scaleshowlabels){b.font=c.scalefontstyle+" "+c.scalefontsize+"px "+c.scalefontfamily;
for(e=0;e<j.labels.length;e++)h=b.measuretext(j.labels[e]).width,d=h>d?h:d;d+=10}r=q-d-t;m=math.floor(r/(a.labels.length-1));n=q-t/2-r;p=g+c.scalefontsize/2;x(c,function(){b.linewidth=c.scalelinewidth;b.strokestyle=c.scalelinecolor;b.beginpath();b.moveto(q-t/2+5,p);b.lineto(q-t/2-r-5,p);b.stroke();0<s?(b.save(),b.textalign="right"):b.textalign="center";b.fillstyle=c.scalefontcolor;for(var d=0;d<a.labels.length;d++)b.save(),0<s?(b.translate(n+d*m,p+c.scalefontsize),b.rotate(-(s*(math.pi/180))),b.filltext(a.labels[d],
0,0),b.restore()):b.filltext(a.labels[d],n+d*m,p+c.scalefontsize+3),b.beginpath(),b.moveto(n+d*m,p+3),c.scaleshowgridlines&&0<d?(b.linewidth=c.scalegridlinewidth,b.strokestyle=c.scalegridlinecolor,b.lineto(n+d*m,5)):b.lineto(n+d*m,p+3),b.stroke();b.linewidth=c.scalelinewidth;b.strokestyle=c.scalelinecolor;b.beginpath();b.moveto(n,p+5);b.lineto(n,5);b.stroke();b.textalign="right";b.textbaseline="middle";for(d=0;d<j.steps;d++)b.beginpath(),b.moveto(n-3,p-(d+1)*k),c.scaleshowgridlines?(b.linewidth=c.scalegridlinewidth,
b.strokestyle=c.scalegridlinecolor,b.lineto(n+r+5,p-(d+1)*k)):b.lineto(n-0.5,p-(d+1)*k),b.stroke(),c.scaleshowlabels&&b.filltext(j.labels[d],n-8,p-(d+1)*k)},function(d){function e(b,c){return p-d*v(a.datasets[b].data[c],j,k)}for(var f=0;f<a.datasets.length;f++){b.strokestyle=a.datasets[f].strokecolor;b.linewidth=c.datasetstrokewidth;b.beginpath();b.moveto(n,p-d*v(a.datasets[f].data[0],j,k));for(var g=1;g<a.datasets[f].data.length;g++)c.beziercurve?b.beziercurveto(n+m*(g-0.5),e(f,g-1),n+m*(g-0.5),
e(f,g),n+m*g,e(f,g)):b.lineto(n+m*g,e(f,g));b.stroke();c.datasetfill?(b.lineto(n+m*(a.datasets[f].data.length-1),p),b.lineto(n,p),b.closepath(),b.fillstyle=a.datasets[f].fillcolor,b.fill()):b.closepath();if(c.pointdot){b.fillstyle=a.datasets[f].pointcolor;b.strokestyle=a.datasets[f].pointstrokecolor;b.linewidth=c.pointdotstrokewidth;for(g=0;g<a.datasets[f].data.length;g++)b.beginpath(),b.arc(n+m*g,p-d*v(a.datasets[f].data[g],j,k),c.pointdotradius,0,2*math.pi,!0),b.fill(),b.stroke()}}},b)},l=function(a,
c,b){var e,h,f,d,g,k,j,l,m,t,r,n,p,s,w=0;g=u;b.font=c.scalefontstyle+" "+c.scalefontsize+"px "+c.scalefontfamily;t=1;for(d=0;d<a.labels.length;d++)e=b.measuretext(a.labels[d]).width,t=e>t?e:t;q/a.labels.length<t?(w=45,q/a.labels.length<math.cos(w)*t?(w=90,g-=t):g-=math.sin(w)*t):g-=c.scalefontsize;d=c.scalefontsize;g=g-5-d;e=number.min_value;h=number.max_value;for(f=0;f<a.datasets.length;f++)for(l=0;l<a.datasets[f].data.length;l++)a.datasets[f].data[l]>e&&(e=a.datasets[f].data[l]),a.datasets[f].data[l]<
h&&(h=a.datasets[f].data[l]);f=math.floor(g/(0.66*d));d=math.floor(0.5*(g/d));l=c.scaleshowlabels?c.scalelabel:"";c.scaleoverride?(j={steps:c.scalesteps,stepvalue:c.scalestepwidth,graphmin:c.scalestartvalue,labels:[]},z(l,j.labels,j.steps,c.scalestartvalue,c.scalestepwidth)):j=c(g,f,d,e,h,l);k=math.floor(g/j.steps);d=1;if(c.scaleshowlabels){b.font=c.scalefontstyle+" "+c.scalefontsize+"px "+c.scalefontfamily;for(e=0;e<j.labels.length;e++)h=b.measuretext(j.labels[e]).width,d=h>d?h:d;d+=10}r=q-d-t;m=
math.floor(r/a.labels.length);s=(m-2*c.scalegridlinewidth-2*c.barvaluespacing-(c.bardatasetspacing*a.datasets.length-1)-(c.barstrokewidth/2*a.datasets.length-1))/a.datasets.length;n=q-t/2-r;p=g+c.scalefontsize/2;x(c,function(){b.linewidth=c.scalelinewidth;b.strokestyle=c.scalelinecolor;b.beginpath();b.moveto(q-t/2+5,p);b.lineto(q-t/2-r-5,p);b.stroke();0<w?(b.save(),b.textalign="right"):b.textalign="center";b.fillstyle=c.scalefontcolor;for(var d=0;d<a.labels.length;d++)b.save(),0<w?(b.translate(n+
d*m,p+c.scalefontsize),b.rotate(-(w*(math.pi/180))),b.filltext(a.labels[d],0,0),b.restore()):b.filltext(a.labels[d],n+d*m+m/2,p+c.scalefontsize+3),b.beginpath(),b.moveto(n+(d+1)*m,p+3),b.linewidth=c.scalegridlinewidth,b.strokestyle=c.scalegridlinecolor,b.lineto(n+(d+1)*m,5),b.stroke();b.linewidth=c.scalelinewidth;b.strokestyle=c.scalelinecolor;b.beginpath();b.moveto(n,p+5);b.lineto(n,5);b.stroke();b.textalign="right";b.textbaseline="middle";for(d=0;d<j.steps;d++)b.beginpath(),b.moveto(n-3,p-(d+1)*
k),c.scaleshowgridlines?(b.linewidth=c.scalegridlinewidth,b.strokestyle=c.scalegridlinecolor,b.lineto(n+r+5,p-(d+1)*k)):b.lineto(n-0.5,p-(d+1)*k),b.stroke(),c.scaleshowlabels&&b.filltext(j.labels[d],n-8,p-(d+1)*k)},function(d){b.linewidth=c.barstrokewidth;for(var e=0;e<a.datasets.length;e++){b.fillstyle=a.datasets[e].fillcolor;b.strokestyle=a.datasets[e].strokecolor;for(var f=0;f<a.datasets[e].data.length;f++){var g=n+c.barvaluespacing+m*f+s*e+c.bardatasetspacing*e+c.barstrokewidth*e;b.beginpath();
b.moveto(g,p);b.lineto(g,p-d*v(a.datasets[e].data[f],j,k)+c.barstrokewidth/2);b.lineto(g+s,p-d*v(a.datasets[e].data[f],j,k)+c.barstrokewidth/2);b.lineto(g+s,p);c.barshowstroke&&b.stroke();b.closepath();b.fill()}}},b)},d=window.requestanimationframe||window.webkitrequestanimationframe||window.mozrequestanimationframe||window.orequestanimationframe||window.msrequestanimationframe||function(a){window.settimeout(a,1e3/60)},f={}};

html

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <h1>live updating chart.js</h1>

        <canvas id="mychart" width="400" height="150"></canvas>


    </body>
</html>