[Chartjs]-Updating chart.js bar graph in real time

by

8👍

✅

You can just use the method addData(), Example:

bar.addData([40, 60], "Google");

Working example – http://jsbin.com/kalilayohu/1/

4👍

this is the code

var canvas = document.getElementById('myChart');
var myBarChart = Chart.Bar(canvas,{
data:{
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
    {
        label: "My First dataset", 
        data: [65, 59, 80, 81, 56, 55, 40],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],


           borderWidth: 1
        }
    ]
},
    options:{
    scales: {
    yAxes:[{
        stacked:true,
        gridLines: {
        display:true,
        color:"rgba(255,99,132,0.2)"
        }
    }],
    xAxes:[{
            gridLines: {
            display:false
         }
       }]
    }
  }
 });

You can update doing this:

myBarChart.data.datasets[0].data[4] = 50;//this update the value of may
myBarChart.update();

Leave a comment