score:110
update: looks like chartjs has been updated (see comment below). there are some examples up that look very nice:
- here's an example of updating a line chart using new data: http://jsbin.com/yitep/5/edit
- 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>
score:-8
so simple, just replace the chart canvas element.
$('#canvas').replacewith(' id="canvas" height="200px" width="368px">');
score:0
you can check instance of chart
by using chart.instances
.
this will give you all the charts instances.
now you can iterate on that instances and and change the data, which is present inside config.
suppose you have only one chart in your page.
for (var _chartjsindex in chart.instances) {
/*
* here in the config your actual data and options which you have given at the
time of creating chart so no need for changing option only you can change data
*/
chart.instances[_chartjsindex].config.data = [];
// here you can give add your data
chart.instances[_chartjsindex].update();
// update will rewrite your whole chart with new value
}
score:0
as of 2022 and using chartjs v3.7.1 you can use the code below.
note that it is based on the jsbin snippets in doub1ejack's answer but these were not up to date and wouldn't work with the latest chartjs version, mainly because the path to charts' data changed (now being yourchart._metasets[0]._dataset.data
).
var canvas = document.getelementbyid('updating-chart'),
ctx = canvas.getcontext('2d'),
startingdata = {
labels: [1, 2, 3, 4, 5, 6, 7],
datasets: [
{
fillcolor: "rgba(220,220,220,0.2)",
strokecolor: "rgba(220,220,220,1)",
pointcolor: "rgba(220,220,220,1)",
pointstrokecolor: "#fff",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
fillcolor: "rgba(151,187,205,0.2)",
strokecolor: "rgba(151,187,205,1)",
pointcolor: "rgba(151,187,205,1)",
pointstrokecolor: "#fff",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
// reduce the animation steps for demo clarity.
const mylivechart = new chart(ctx, {
type: 'bar',
data: startingdata,
options: {
scales: {
y: {
beginatzero: true
}
},
maintainaspectratio: false,
}
});
setinterval(function(){
// get a random index point
var indextoupdate = math.round(math.random() * startingdata.labels.length);
// update one of the points in the second dataset
mylivechart._metasets[0]._dataset.data[indextoupdate] = math.random() * 100;
mylivechart.update();
}, 5000);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>updating chart example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="updating-chart" width="500" height="300"></canvas>
</body>
</html>
score:1
the simplest way is to replace the canvas element and then call new chart() again:
function reloadmychart() {
$('mychart').replacewith('<canvas id="mychart"></canvas>');
new chart(document.getelementbyid("mychart"), {
data: yourchartdata,
type: yourcharttype,
options: yourchartoptions
});
}
of course, you must replace yourchartdata, yourcharttype and yourchartoptions with the correct values required to initialize chart.js. see chart.js docs.
you can call reloadmychart function on a button click or any other event you need. probably you'll add parameters to this function and use these to make a rest call to dynamically update your chart, like this:
function reloadmychart(param1, param2) {
$('mychart').replacewith('<canvas id="mychart"></canvas>');
$.get("resturl?param1=" + param1 + "¶m2=" + param2 + ",
function(data) {
// call new chart() here and use returned data
}
);
hope it helps! =)
score:1
showing realtime update chartjs
function add_data(chart, label, data)
{
var today = new date();
var time = today.gethours() + ":" + today.getminutes() + ":" + today.getseconds();
mylinechart.data.datasets[0].data.push(math.random() * 100);
mylinechart.data.datasets[1].data.push(math.random() * 100);
mylinechart.data.labels.push(time)
mylinechart.update();
}
setinterval(add_data, 10000); //milisecond
full code , you can download in description link
score:2
this is an example with chartjs - 2.9.4
var maximumpoints = 5;// with this variable you can decide how many points are display on the chart
function adddata(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.foreach((dataset) => {
var d = data[0];
dataset.data.push(d);
data.shift();
});
var canremovedata = false;
chart.data.datasets.foreach((dataset) => {
if (dataset.data.length > maximumpoints) {
if (!canremovedata) {
canremovedata = true;
chart.data.labels.shift();
}
dataset.data.shift();
}
});
chart.update();
}
window.onload = function () {
var canvas = document.getelementbyid('elm-chart'),
ctx = canvas.getcontext('2d');
var mylinechart = new chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [
{
data: [],
label: 'dataset-1',
backgroundcolor: "#36a2eb88",
bordercolor: "#36a2eb",
},
{
data: [],
label: 'dataset-2',
backgroundcolor: "#ff638488",
bordercolor: "#ff6384",
}
],
},
options: {
responsive: false,
maintainaspectratio: false,
scales: {
yaxes: [{
ticks: {
beginatzero: true
}
}]
}
}
});
var index = 0;
setinterval(function () {
var data = [];
mylinechart.data.datasets.foreach((dataset) => {
data.push(math.random() * 100);
});
adddata(mylinechart, index, data);
index++;
}, 1000);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.min.js"></script>
<canvas id="elm-chart" width="640" height="480"></canvas>
score:3
i don't think it's possible right now.
however that's a feature which should come soon, as the author hinted here: https://github.com/nnnick/chart.js/issues/161#issuecomment-20487775
score:3
there are 2 ways to solve it:
chart.update()
delete existing chart using chart.destroy() and create new chart object.
score:5
if destroy() and clear() is not working (just like what i had experience) you can use jquery to remove the canvas and append it again.
$('#chartamazon').remove();
$('#chartbar').append('<canvas id="chartamazon"></canvas>');
var ctxamazon = $("#chartamazon").get(0).getcontext("2d");
var amazonchart = new chart(ctxamazon, {
type: 'doughnut',
data: dataamazon,
options: optionsa
});
score:5
i think the easiest way is to write a function to update your chart including the chart.update()
method. check out this simple example i wrote in jsfiddle for a bar chart.
//value for x-axis
var emotions = ["calm", "happy", "angry", "disgust"];
//colours for each bar
var colouarray = ['red', 'green', 'yellow', 'blue'];
//let's initialdata[] be the initial data set
var initialdata = [0.1, 0.4, 0.3, 0.6];
//let's updateddataset[] be the array to hold the upadted data set with every update call
var updateddataset;
/*creating the bar chart*/
var ctx = document.getelementbyid("barchart");
var barchart = new chart(ctx, {
type: 'bar',
data: {
labels: emotions,
datasets: [{
backgroundcolor: colouarray,
label: 'prediction',
data: initialdata
}]
},
options: {
scales: {
yaxes: [{
ticks: {
beginatzero: true,
min: 0,
max: 1,
stepsize: 0.5,
}
}]
}
}
});
/*function to update the bar chart*/
function updatebargraph(chart, label, color, data) {
chart.data.datasets.pop();
chart.data.datasets.push({
label: label,
backgroundcolor: color,
data: data
});
chart.update();
}
/*updating the bar chart with updated data in every second. */
setinterval(function() {
updateddataset = [math.random(), math.random(), math.random(), math.random()];
updatebargraph(barchart, 'prediction', colouarray, updateddataset);
}, 1000);
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.3.0/chart.min.js"></script>
<body>
<div>
<h1>update bar chart</h1>
<canvas id="barchart" width="800" height="450"></canvas>
</div>
<script src="barchart.js"></script>
</body>
</head>
</html>
hope this helps.
score:8
remove the canvas dom and add in again.
function renderchart(label,data){
$("#canvas-wrapper").html("").html('<canvas id="storesends"></canvas>');
var linechartdata = {
labels : label,
datasets : [
{
fillcolor : "rgba(49, 195, 166, 0.2)",
strokecolor : "rgba(49, 195, 166, 1)",
pointcolor : "rgba(49, 195, 166, 1)",
pointstrokecolor : "#fff",
data : data
}
]
}
var canvas = document.getelementbyid("storesends");
var ctx = canvas.getcontext("2d");
myline = new chart(ctx).line(linechartdata, {
responsive: true,
maintainaspectratio: false
});
}
score:18
you just need to change the chartobject.data.datasets
value and call update()
like this:
chartobject.data.datasets = newdata.datasets;
chartobject.data.labels = newdata.labels;
chartobject.update();
score:28
you also can use destroy() function. like this
if( window.mybar!==undefined)
window.mybar.destroy();
var ctx = document.getelementbyid("canvas").getcontext("2d");
window.mybar = new chart(ctx).bar(barchartdata, {
responsive : true,
});
score:52
here is how to do it in the last version of chartjs:
setinterval(function(){
chart.data.datasets[0].data[5] = 80;
chart.data.labels[5] = "newly added";
chart.update();
}
look at this clear video
or test it in jsfiddle
score:79
the update()
triggers an update of the chart.
chart.update( )
.update(config)
triggers an update of the chart. this can be safely called after updating the data object. this will update all scales, legends, and then re-render the chart. a
config
object can be provided with additional configuration for the update process.
update()
can be safely called after updating values of one or more existing points within the the data object, rendering the changes in one animated render loop.
// update the first dataset's value of 'march' to be 50
mybarchart.data.datasets[0].bars[2].value = 50;
// animate update of 'march' from 90 to 50.
mybarchart.update();
Source: stackoverflow.com
Related Query
- Dynamically update values of a chartjs chart
- Dynamically update the options of a chart in chartjs using Javascript
- Dynamically update values of a chartjs2.0 chart
- ChartJs chart won't update new values
- Dynamically update chart in chartJs
- Chartjs random colors for each part of pie chart with data dynamically from database
- Display values outside of pie chart in chartjs
- Show data dynamically in line chart - ChartJS
- How to dynamically set ChartJs line chart width based on dataset size?
- dynamically update the scale type of chartjs graph
- Chartjs - Donut Chart label for small values not visible
- Meteor and ChartJS dynamically create a chart
- Chartjs Bar chart shows undefined values
- ChartJS update chart with multiple datasets
- ChartJS v2.6 update breaks custom line-with-area-range (stripe) chart
- Force ChartJS to show Doughnut chart with null values
- How to update a chart using VueJS and ChartJS
- Display Bar chart values in the graph - ChartJS
- ChartJS chart not scaling after adding values
- Update Chart js chart dynamically in angular 2 from data getting from nodejs service
- Bar chart with min height and zero values - ChartJs
- Stacked bar chart with chartjs with included values
- React Chartjs - Update Chart on interval
- ChartJS : Hook before values are given to doughnut (absolute value in chart and real values in the tooltips)
- ChartJS dynamically adding values with jQuery array
- How to show the chartjs bar chart data values labels as text?
- Chartjs Radar chart - How to dynamically highlight one of the gridlines at a specific point
- chartjs how to update dynamically data from database(Chartjs cant get the data)
- Using number/text input field to set the data values in ChartJs stops the chart from being displayed
- Chartjs - Stacked bar chart data order causes invisible other values
More Query from same tag
- Displaying multiple line graphs on one page
- How to edit style of negative x grid lines on Chart.js?
- Chart.js - tooltiptemplate with one decimal value in pie chart
- Multi dataset line graph from table
- js error: while trying to display graph using chart.js: Uncaught TypeError: Cannot read property 'call' of undefined
- Get Value for point clicked on Pie Chart in Chart.js 3
- Load Chart.js tooltip information asynchronously
- Problem with Charts.js in vue. anyone can help step by step
- Calculate x and y coords for bullet trajectory - Chart.js
- Chart.js drawing only in the top of canvas
- chart.js set one bar as different colour?
- ChartJs Force scatter plot to be square shaped
- Chart.js not installing with NPM
- How to format tool tip as currency in piechart chartJS?
- Position Label under the Horizontal Bar
- Chart.js set global point size not working
- chart.js substitute tooltipItems
- How to fix a stacked logarithmic bar chart values to fit the grid
- Rails chart.js data coffee script
- chart.js - Horizontal lines per bar
- not able to move my range slector
- Avoid the first GridLine to be dashed on Chart JS
- ChartJs canvas showing previous graph when changing Graph types
- How do I import Chart.js Helper Functions in Django?
- Chart.JS Data Element To Be settled as Euro Currency
- Angular chart showing series but no data
- Why must I create my VueJS application before using ChartJS?
- reactive chart with chart.js in meteor
- Make Chart.js canvas responsive inside the resizeable div
- Chartjs: how to show only max and min values on y-axis