Switch chart.js data with button click

Question

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

Solution

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

Comments

[The Dead Man]

Hi @GRUNT can you help me on similar issue in my thread stackoverflow.com/questions/57479353/… ?

[Novice]

@GRUNT: is it possible to read the data from two different csv files for this scenario , may be using d3.csv function ?