[Chartjs]-Changing data when click button in chart.js

by

8👍

✅

Call Chart(context).Line(New data);
on button click to reload your chart.

var data = {
    labels: ['January', 'February', 'March'],
    
    datasets: [
        {
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [30,120,90]
        },
        {
        fillColor: "rgba(100,220,220,0.7)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [10,70,110]
        }
    ]
    };

var data1 = {
    labels: ['March', 'Apr', 'May'],
    
    datasets: [
        {
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [50,100,140]
        },
        {
        fillColor: "rgba(100,220,220,0.7)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [40,70,200]
        }
    ]
    };

var context = document.querySelector('#graph').getContext('2d');
new Chart(context).Line(data);
    
$("#btn1").on("click", function() {
     var context1 = document.querySelector('#graph').getContext('2d');
    new Chart(context1).Line(data);
  });
$("#btn2").on("click", function() {
    var context2 = document.querySelector('#graph').getContext('2d');
    new Chart(context2).Line(data1);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="graph" width="800px" height="400px"></canvas>

<button id="btn1">
Option 1
</button>
<button id="btn2">
Option 2
</button>

9👍

You should update the data that you want and call the update method.

https://www.chartjs.org/docs/latest/developers/api.html#updateconfig

const context = document.querySelector('#graph').getContext('2d'),
      chart = new Chart(context).Line(data);

$("#btn1").on("click", function() {
    chart.data.datasets[0].data = [140,100,50];
    chart.update();
});

Leave a comment