Question

30

Switch chart.js data with button click

rated 0 times [ 34] [ 4] / answers: 1 / hits: 19783 / 7 Years ago, wed, april 26, 2017, 12:00:00

I am trying to build a dynamic chart using chart.js but I cannot figure out how to swap datasets when clicking buttons.
Some answers here suggest using update() and destroy() with version 2 but they have not worked for me. I can destroy the data but not then draw the new chart with the correct data set. Here is the jsfiddle and code below:

HTML:

<canvas id=forecast width=300 height=150></canvas>

<button id=0 type=button >Dataset 1</button>

<button id=1 type=button >Dataset 2</button>

JavaScript:

var chart_labels = ['06:00', '09:00', '12:00', '15:00', '18:00', '21:00'];

var temp_dataset = ['1', '8', '10', '10', '9', '7'];

var rain_dataset = ['0', '0', '6', '32', '7', '2'];



var ctx = document.getElementById(forecast).getContext('2d');



var config = {

    type: 'bar',

  data: {

    labels: chart_labels,

    datasets: [

      {

        type: 'line',

        label: Temperature (Celsius),

        yAxisID: y-axis-0,

        fill: false,

        data: temp_dataset,

      },

      {

        type: 'bar',

        label: Precipitation (%),

        yAxisID: y-axis-1,

        data: rain_dataset,

      }]

  },

  options: {

    scales: {

      yAxes: [{

        position: left,

        id: y-axis-0,

      }, {

        position: right,

        id: y-axis-1,

      }]

    }

  }

};



var forecast_chart = new Chart(ctx, config);



$(#1).click(function (){

  var chart_labels = ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'];

  var temp_dataset = ['5', '3', '4', '8', '10', '11', '10', '9'];

  var rain_dataset = ['0', '0', '1', '4', '19', '19', '7', '2'];

  forecast_chart.destroy();

  forecast_chart = new Chart(ctx, config);

});

edit* I should add that the initial values should load with the page, the second values on button2 click and the original values on button1 click

Answers

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

martina

Add To Favorites

Follow

Total Points: 101

Total Questions: 103

Total Answers: 111

Location: Seychelles

Member since Mon, Jun 28, 2021

3 Years ago

answered 7 Years ago cristinadomoniquel · Accepted Answer

That could be accomplished by replacing the data and labels array on button click ...

$(#0).click(function() {

    var data = forecast_chart.config.data;

    data.datasets[0].data = temp_dataset;

    data.datasets[1].data = rain_dataset;

    data.labels = chart_labels;

    forecast_chart.update();

});



$(#1).click(function() {

    var chart_labels = ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'];

    var temp_dataset = ['5', '3', '4', '8', '10', '11', '10', '9'];

    var rain_dataset = ['0', '0', '1', '4', '19', '19', '7', '2'];



    var data = forecast_chart.config.data;

    data.datasets[0].data = temp_dataset;

    data.datasets[1].data = rain_dataset;

    data.labels = chart_labels;

    forecast_chart.update();

});

Here's the working fiddle