Chartjs-Interactive Button doesn't hide the chart as I intended

by

1👍

I think I see two issues with your current code.

  1. Your chart variable is myCovidChart, but in updateChart you reference chart.
  2. Your function updateChart defines a local function also called updateChart, but doesn’t call it.

These can be fixed by changing the updateChart function to:

function updateChart() {
    myCovidChart.data.datasets[0].data = [120387, 127108, 132510, 137069, 140996, 146173, 152447, 158762, 164053, 170109];
    myCovidChart.update();
}

0👍

As domdomegg pointed out in his answer your update function was not correct, the chart pointed to the wrong variable because chart was nothing because you stored the chart in the myCovidChart, also the update function didnt work because you nested it double with a lot of extra brackets so it couldnt find the variable anymore. If you remove all extra clutter and point to the right variable it will work

Example:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>Covid Piemonte 2020</title>
  <h1>Evoluzione del virus Covid-19 nel bimestre marzo-aprile 2020 (Piemonte)</h1>

  <br>
  <button class="btn btn-success" onclick="updateChart()">MARZO</button>
  <button class="btn btn-success" onclick="updateChart1()">APRILE</button>
  <br>



</head>

<body>

  <div class="container">
    <canvas id="myChart" width="720" height="360"></canvas>

  </div>

  <script>
    var label1 = ['16-marzo', '17-marzo', '18-marzo', '19-marzo', '20-marzo', '21-marzo', '22-marzo', '23-marzo', '24-marzo', '25-marzo', '26-marzo', '27-marzo', '28-marzo', '29-marzo', '30-marzo', '31-marzo', '1-aprile', '2-aprile', '3-aprile', '4-aprile', '5-aprile', '6-aprile', '7-aprile', '8-aprile', '9-aprile', '10-aprile', '11-aprile', '12-aprile', '13-aprile', '14-aprile', '15-aprile', '16-aprile', '17-aprile', '18-aprile', '19-aprile', '20-aprile', '21-aprile', '22-aprile', '23-aprile', '24-aprile', '25-aprile', '26-aprile', '27-aprile', '28-aprile', '29-aprile', '30-aprile'];


    var olddata = [5589, 6872, 8140, 9424, 10590, 11799, 12869, 14619, 16110, 17509, 18486, 20197, 22829, 24782, 26578, 28918, 31135, 33431, 36547, 38638, 40638, 43306, 46927, 51311, 55548, 60271, 65391, 69003, 71615, 74060, 78066, 83130, 89136, 94278, 99008, 102082, 107850, 113930, 120387, 127108, 132510, 137069, 140996, 146173, 152447, 158762, 164053, 170109];
    var olddata1 = [1516, 2063, 2659, 3017, 3576, 4059, 4541, 5094, 5767, 6193, 6708, 7228, 7920, 8461, 8835, 9418, 9918, 10466, 11082, 11839, 12442, 13046, 13434, 13964, 14671, 15412, 16109, 16733, 17246, 17773, 18446, 19261, 19954, 20581, 21144, 21437, 22149, 22854, 23319, 24050, 24549, 24910, 25216, 25538, 25995, 26453];
    var olddata2 = [111, 144, 166, 183, 224, 255, 300, 336, 403, 483, 545, 598, 662, 734, 795, 854, 924, 1018, 1088, 1144, 1191, 1284, 1349, 1349, 1417, 1487, 1591, 1689, 1788, 1876, 1969, 2064, 2146, 2224, 2302, 2379, 2453, 2524, 2598, 2668, 2737, 2803, 2859, 2913, 2966, 3032, 3086];

    let myChart = (document.getElementById('myChart').getContext('2d'));
    let myCovidChart = new Chart(myChart, {
      type: 'line',
      data: {
        labels: label1,
        datasets: [{
          data: olddata,
          label: 'numero cumulativo dei Tamponi',
          borderColor: 'green',


        }, {
          data: olddata1,
          label: 'Numero incrementale dei contagiati',
          borderColor: 'red',


        }, {
          data: olddata2,
          label: 'Numero incrementale dei decessi',
          borderColor: 'blue',

        }]
      },
      options: {

      }
    });


    function updateChart() {
      myCovidChart.data.datasets[0].data = [74060, 78066, 83130, 89136, 94278, 99008, 102082, 107850, 113930, 120387, 127108, 132510, 137069, 140996, 146173, 152447, 158762, 164053, 170109];
      myCovidChart.update();
    };
  </script>

</body>

</html>

Leave a comment