Question

39

Changing data when click button in chart.js

rated 0 times [ 41] [ 2] / answers: 1 / hits: 16457 / 7 Years ago, thu, september 14, 2017, 12:00:00

I'm working on some website project, in I have problem with charts.js, I want to change the data inside of the chart, So when i click button the data value is changing, but i'm stuck on it, i don't know how to do it. Here's the example of the code that similar with my project Chart.js.

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 context = document.querySelector('#graph').getContext('2d');

    new Chart(context).Line(data);

<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>

Option 1

</button>

<button>

Option 2

</button>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arron

Add To Favorites

Follow

Total Points: 663

Total Questions: 119

Total Answers: 112

Location: Belize

Member since Mon, Jun 20, 2022

2 Years ago

answered 7 Years ago patienceannel · Accepted Answer

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>