[javascript] Dynamically update values of a chartjs chart

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?

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
 }

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

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();

There's at least 2 ways of solve it:

1) chart.update()

2) Delete existing chart using chart.destroy() and create new chart object.

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>

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,
 });

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

So simple, Just replace the chart canvas element.

$('#canvas').replaceWith(' id="canvas" height="200px" width="368px">');

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
    });
}

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_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);

<html>_x000D_
_x000D_
<head>_x000D_
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>_x000D_
_x000D_
<body>_x000D_
    <div>_x000D_
      <h1>Update Bar Chart</h1>_x000D_
      <canvas id="barChart" width="800" height="450"></canvas>_x000D_
    </div>_x000D_
    <script src="barchart.js"></script>_x000D_
  </body>_x000D_
  _x000D_
</head>_x000D_
_x000D_
</html>

Hope this helps.

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 + "&param2=" + param2 + ",
        function(data) {
            // call new Chart() here and use returned data
        }
    );

Hope it helps! =)

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();

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
    });

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