Dynamically update values of a chartjs chart

Question

I created an basic bar chart using chartjs and it works fine  Now I want to update the values on a time based interval  My problem is that after I created the chart  I do not know how to update its values correctly     My code   var ctx       myChart   get 0  getContext  2d     var dts                   fillColor   rgba 220 220 220 0 5            strokeColor   rgba 220 220 220 1            data   0  0  0  0  0            var data         labels    Core 1    Core 2    Core 3    Core 4    Total        datasets  dts     var chart   new Chart ctx   chart Bar data      test code setInterval  function                                  data datasets 0  data    random    random    random    random    random         chart Bar data      2000     in the test code  I am updating the values with datasets 0  data- is this the right way to do it  The problem with this is that everytime I call chart Bar    the values are reset to 0 then animated to the random value  like I am recreating the chart   This way  all animations are always from 0 to value which looks strange  I would expect that if I update a value from 50 to 10 the bar would go down to 10 from 50 and not setted to 0 then animated to 10   I did not found anything in the docs about this    am I doing something wrong or this is impossible with this library

User · Accepted Answer

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 gt  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 amp  amp  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 lt b  d gt c  a d lt 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 lt 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   amp  amp isFinite c  amp  amp a gt c c  isNaN parseFloat b   amp  amp  isFinite b  amp  amp a lt 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   lt     join   t   replace        gt     t     g   1 r   replace   t        gt  g     1     split   t   join        split    gt    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 gt  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 gt  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 gt  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 gt  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 gt  a  0 5  0 5 Math pow 2 10  a-1   0 5  -Math pow 2 -10 --a  2   easeInCirc function a  return 1 lt  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 gt  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 lt 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 lt 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 lt Math abs 1   e 1 c b 4  c b  2 Math PI  Math asin 1 e  return 1 gt 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 gt  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  lt 1 2 75 1 7 5625 a a a lt 2 2 75 1  7 5625  a- 1 5 2 75   a 0 75  a lt 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 gt 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 amp  amp  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   lt   value  gt   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   lt   value  gt   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   lt   value  gt   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   lt   value  gt   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 amp  amp  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 lt a length f   a f  value gt e amp  amp  e a f  value  a f  value lt h amp  amp  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 lt j steps a   if c scaleShowLine amp  amp  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 amp  amp  c animateScale amp  amp  f e  c animateRotate amp  amp  h e   for e 0 e lt 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 amp  amp  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 lt a labels length e   b font c pointLabelFontStyle     c pointLabelFontSize  px   c pointLabelFontFamily h b measureText a labels e   width h gt l amp  amp  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 lt a datasets length f   for m 0 m lt a datasets f  data length m   a datasets f  data m  gt e amp  amp  e a datasets f  data m   a datasets f  data m  lt h amp  amp  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 lt 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 lt 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 lt a datasets 0  data length f   b rotate e  b lineTo 0 -k  d 1   b closePath   b stroke   c scaleShowLabels amp  amp   b textAlign  center  b font c scaleFontStyle     c scaleFontSize  px   c scaleFontFamily b textBaseline  middle  c scaleShowLabelBackdrop amp  amp  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 lt 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 gt 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 lt a datasets length g    b beginPath    b moveTo 0 d -1 v a datasets g  data 0  j k   for var f 1 f lt 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 lt 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 lt a length f   e  a f  value x c null function d  var g -Math PI 2 f 1 j 1 c animation amp  amp  c animateScale amp  amp  f d  c animateRotate amp  amp  j d   for d 0 d lt 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 amp  amp  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 lt a length d   e  a d  value x c null function d  var k -Math PI 2 j 1 l 1 c animation amp  amp  c animateScale amp  amp  j d  c animateRotate amp  amp  l d   for d 0 d lt 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 amp  amp   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 lt a labels length d   e b measureText a labels d   width t e gt t e t q a labels length lt t  s 45 q a labels length lt 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 lt a datasets length f   for l  0 l lt a datasets f  data length l   a datasets f  data l  gt e amp  amp  e a datasets f  data l   a datasets f  data l  lt h amp  amp  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 lt j labels length e   h b measureText j labels e   width d h gt 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 lt s  b save   b textAlign  right   b textAlign  center  b fillStyle c scaleFontColor for var d 0 d lt a labels length d   b save   0 lt 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 amp  amp 0 lt 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 lt 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 amp  amp 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 lt 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 lt 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 lt 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 lt a labels length d   e b measureText a labels d   width t e gt t e t q a labels length lt t  w 45 q a labels length lt 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 lt a datasets length f   for l 0 l lt a datasets f  data length l   a datasets f  data l  gt e amp  amp  e a datasets f  data l   a datasets f  data l  lt  h amp  amp  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 lt j labels length e   h b measureText j labels e   width d h gt 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 lt w  b save   b textAlign  right   b textAlign  center  b fillStyle c scaleFontColor for var d 0 d lt a labels length d   b save   0 lt 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 lt 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 amp  amp b fillText j labels d  n-8 p- d 1  k   function d  b lineWidth c barStrokeWidth for var e 0 e lt a datasets length e    b fillStyle a datasets e  fillColor b strokeStyle a datasets e  strokeColor for var f 0 f lt 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 amp  amp 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   lt html gt       lt head gt           lt script src    ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt       lt  head gt       lt body gt           lt h1 gt Live Updating Chart js lt  h1 gt            lt canvas id  myChart  width  400  height  150  gt  lt  canvas gt         lt  body gt   lt  html gt

User · Answer

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

User · Answer

There s at least 2 ways of solve it   1  chart update    2  Delete existing chart using chart destroy   and create new chart object

User · Answer

This is an example with ChartJs - 2 9 4  x000D   x000D  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    gt                    var d   data 0                   dataset data push d                   data shift                                  var canRemoveData   false              chart data datasets forEach  dataset    gt                    if  dataset data length  gt  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    gt                        data push Math random     100                                        addData myLineChart  index  data                   index                    1000             x000D   lt script src  https   cdnjs cloudflare com ajax libs Chart js 2 9 4 Chart min js  gt  lt  script gt   lt canvas id  elm-chart  width  640  height  480  gt  lt  canvas gt  x000D   x000D   x000D

User · Answer

Remove the canvas dom and add in again   function renderChart label data            canvas-wrapper   html     html   lt canvas id  storeSends  gt  lt  canvas gt         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

User · Answer

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

User · Answer

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

User · Answer

So simple  Just replace the chart canvas element          canvas   replaceWith   id  canvas  height  200px    width  368px

User · Answer

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

User · Answer

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    x000D   x000D    value for x-axis x000D  var emotions     calm    happy    angry    disgust    x000D   x000D    colours for each bar x000D  var colouarray     red    green    yellow    blue    x000D   x000D    Let s initialData   be the initial data set x000D  var initialData    0 1  0 4  0 3  0 6   x000D   x000D    Let s updatedDataSet   be the array to hold the upadted data set with every update call x000D  var updatedDataSet  x000D   x000D    Creating the bar chart   x000D  var ctx   document getElementById  barChart    x000D  var barChart   new Chart ctx    x000D    type   bar   x000D    data    x000D      labels  emotions  x000D      datasets     x000D        backgroundColor  colouarray  x000D        label   Prediction   x000D        data  initialData x000D         x000D       x000D    options    x000D      scales    x000D        yAxes     x000D          ticks    x000D            beginAtZero  true  x000D            min  0  x000D            max  1  x000D            stepSize  0 5  x000D            x000D           x000D        x000D      x000D      x000D   x000D    Function to update the bar chart   x000D  function updateBarGraph chart  label  color  data    x000D    chart data datasets pop    x000D    chart data datasets push   x000D      label  label  x000D      backgroundColor  color  x000D      data  data x000D        x000D    chart update    x000D    x000D   x000D    Updating the bar chart with updated data in every second     x000D  setInterval function     x000D    updatedDataSet    Math random    Math random    Math random    Math random     x000D    updateBarGraph barChart   Prediction   colouarray  updatedDataSet   x000D     1000   x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt script src  https   cdnjs cloudflare com ajax libs Chart js 2 3 0 Chart min js  gt  lt  script gt  x000D   x000D   lt body gt  x000D       lt div gt  x000D         lt h1 gt Update Bar Chart lt  h1 gt  x000D         lt canvas id  barChart  width  800  height  450  gt  lt  canvas gt  x000D       lt  div gt  x000D       lt script src  barchart js  gt  lt  script gt  x000D     lt  body gt  x000D     x000D   lt  head gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    Hope this helps

User · Answer

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   lt canvas id  chartAmazon  gt  lt  canvas gt          var ctxAmazon       chartAmazon   get 0  getContext  2d          var AmazonChart   new Chart ctxAmazon            type   doughnut           data  dataAmazon          options  optionsA

User · Answer

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

User · Answer

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

User · Answer

The simplest way is to replace the canvas element and then call new Chart   again   function reloadMyChart            myChart   replaceWith   lt canvas id  myChart  gt  lt  canvas gt         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   lt canvas id  myChart  gt  lt  canvas gt           get  restUrl param1     param1     amp param2     param2              function data                   call new Chart   here and use returned data                    Hope it helps

User · Answer

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

[javascript] Dynamically update values of a chartjs chart

Examples related to javascript

Examples related to charts

Examples related to chart.js