Chartjs-Chartjs line graph destroy function is not clearing the old chart instances

by

0👍

✅

First you need to define var myChart outside of the function getoptiontunnels().

var myChart;
function getoptiontunnels() {
  ...

Then, inside the function getoptiontunnels(), you create the chart if it does not exist or you update its data if it already exists.

if (myChart) {
  myChart.data.labels = chartx;
  myChart.data.datasets = chartdata;
  myChart.update();
} else {
  myChart = new Chart('myChart', {
    ...     
  });
}

Please take a look at your amended code and see how it works.

var myChart;
function getoptiontunnels() {

  var cust_tag = document.getElementById('Choosecustomer');
  var cust = cust_tag.value;
  var arr = []

  var obj = {};
  var data1 = [
    ["Mon, 23 Nov 2020 10:38:49 GMT", 4, "device.ams1"],
    ["Mon, 23 Nov 2020 10:43:49 GMT", 4, "device.ams1"],
    ["Mon, 23 Nov 2020 10:48:49 GMT", 4, "device.ams1"],
    ["Mon, 23 Nov 2020 10:53:49 GMT", 4, "device.ams1"],
    ["Mon, 23 Nov 2020 10:58:49 GMT", 4, "device.ams1"],
    ["Mon, 23 Nov 2020 11:03:50 GMT", 4, "device.ams1"],
    ["Mon, 23 Nov 2020 11:08:50 GMT", 4, "device.ams1"],
    ["Mon, 23 Nov 2020 11:13:50 GMT", 4, "device.ams1"],
    ["Mon, 23 Nov 2020 11:18:50 GMT", 4, "device.ams1"],
    ["Mon, 23 Nov 2020 11:23:50 GMT", 4, "device.ams1"],
    ["Mon, 23 Nov 2020 11:28:50 GMT", 4, "device.ams1"],
    ["Mon, 23 Nov 2020 11:33:51 GMT", 4, "device.ams1"],
    ["Mon, 23 Nov 2020 10:39:15 GMT", 4, "device.blr1"],
    ["Mon, 23 Nov 2020 10:44:14 GMT", 4, "device.blr1"],
    ["Mon, 23 Nov 2020 10:49:12 GMT", 4, "device.blr1"],
    ["Mon, 23 Nov 2020 10:54:12 GMT", 4, "device.blr1"],
    ["Mon, 23 Nov 2020 10:59:13 GMT", 4, "device.blr1"],
    ["Mon, 23 Nov 2020 11:04:13 GMT", 4, "device.blr1"],
    ["Mon, 23 Nov 2020 11:09:13 GMT", 4, "device.blr1"],
    ["Mon, 23 Nov 2020 11:14:11 GMT", 4, "device.blr1"],
    ["Mon, 23 Nov 2020 11:19:12 GMT", 4, "device.blr1"],
    ["Mon, 23 Nov 2020 11:24:11 GMT", 4, "device.blr1"],
    ["Mon, 23 Nov 2020 11:29:11 GMT", 4, "device.blr1"],
    ["Mon, 23 Nov 2020 11:34:11 GMT", 4, "device.blr1"],
    ["Mon, 23 Nov 2020 10:38:45 GMT", 4, "device.ewr1"],
    ["Mon, 23 Nov 2020 10:43:46 GMT", 4, "device.ewr1"],
    ["Mon, 23 Nov 2020 10:48:46 GMT", 4, "device.ewr1"],
    ["Mon, 23 Nov 2020 10:53:46 GMT", 4, "device.ewr1"],
    ["Mon, 23 Nov 2020 10:58:46 GMT", 4, "device.ewr1"],
    ["Mon, 23 Nov 2020 11:03:46 GMT", 4, "device.ewr1"]
  ];

  var data2 = [
    ["Mon, 23 Nov 2020 10:38:49 GMT", 0, "device.ams1"],
    ["Mon, 23 Nov 2020 10:43:49 GMT", 0, "device.ams1"],
    ["Mon, 23 Nov 2020 10:48:49 GMT", 0, "device.ams1"],
    ["Mon, 23 Nov 2020 10:53:49 GMT", 0, "device.ams1"],
    ["Mon, 23 Nov 2020 10:58:49 GMT", 0, "device.ams1"],
    ["Mon, 23 Nov 2020 11:03:50 GMT", 0, "device.ams1"],
    ["Mon, 23 Nov 2020 11:08:50 GMT", 0, "device.ams1"],
    ["Mon, 23 Nov 2020 11:13:50 GMT", 0, "device.ams1"],
    ["Mon, 23 Nov 2020 11:18:50 GMT", 0, "device.ams1"],
    ["Mon, 23 Nov 2020 11:23:50 GMT", 0, "device.ams1"],
    ["Mon, 23 Nov 2020 11:28:50 GMT", 0, "device.ams1"],
    ["Mon, 23 Nov 2020 11:33:51 GMT", 0, "device.ams1"],
    ["Mon, 23 Nov 2020 10:39:15 GMT", 0, "device.blr1"],
    ["Mon, 23 Nov 2020 10:44:14 GMT", 0, "device.blr1"],
    ["Mon, 23 Nov 2020 10:49:12 GMT", 0, "device.blr1"],
    ["Mon, 23 Nov 2020 10:54:12 GMT", 0, "device.blr1"],
    ["Mon, 23 Nov 2020 10:59:13 GMT", 0, "device.blr1"],
    ["Mon, 23 Nov 2020 11:04:13 GMT", 0, "device.blr1"],
    ["Mon, 23 Nov 2020 11:09:13 GMT", 0, "device.blr1"],
    ["Mon, 23 Nov 2020 11:14:11 GMT", 0, "device.blr1"],
    ["Mon, 23 Nov 2020 11:19:12 GMT", 0, "device.blr1"],
    ["Mon, 23 Nov 2020 11:24:11 GMT", 0, "device.blr1"],
    ["Mon, 23 Nov 2020 11:29:11 GMT", 0, "device.blr1"],
    ["Mon, 23 Nov 2020 11:34:11 GMT", 0, "device.blr1"],
    ["Mon, 23 Nov 2020 10:38:45 GMT", 0, "device.ewr1"],
    ["Mon, 23 Nov 2020 10:43:46 GMT", 0, "device.ewr1"],
    ["Mon, 23 Nov 2020 10:48:46 GMT", 0, "device.ewr1"],
    ["Mon, 23 Nov 2020 10:53:46 GMT", 0, "device.ewr1"],
    ["Mon, 23 Nov 2020 10:58:46 GMT", 0, "device.ewr1"],
    ["Mon, 23 Nov 2020 11:03:46 GMT", 0, "device.ewr1"]
  ];

  if (cust == "lav") {
    arr = data1;
  } else {
    arr = data2;
  }

  arr.forEach(v => (obj[v[2]] || (obj[v[2]] = [])).push(v));
  var res = Object.keys(obj).map(v => obj[v]);

  var bdcolor = ["rgba(26, 188, 156,1.0)", "rgba(46, 204, 113,1.0)", "rgba(52, 152, 219,1.0)", "rgba(52, 73, 94,1.0)", "rgba(22, 160, 133,1.0)", "rgba(41, 128, 185,1.0)", "rgba(241, 196, 15,1.0)", "rgba(230, 126, 34,1.0)", "rgba(231, 76, 60,1.0)", "rgba(243, 156, 18,1.0)", "rgba(211, 84, 0,1.0)", "rgba(192, 57, 43,1.0)", "rgba(127, 140, 141,1.0)"];

  var chartdata = [];
  for (var i = 0; i < res.length; i++) {

    var chartx = []
    var charty = []
    var chartl = []

    for (var j = 0; j < res[i].length; j++) {
      chartx.push(res[i][j][0]);
      charty.push(res[i][j][1]);
      chartl = cust + " " + res[i][j][2];;
    }

    chartdata.push({
      label: chartl,
      data: charty,
      lineTension: 0.5,
      fill: false,
      borderColor: bdcolor[i],
      borderWidth: 1
    })
  }
  
  if (myChart) {
    myChart.data.labels = chartx;
    myChart.data.datasets = chartdata;
    myChart.update();
  } else {
    myChart = new Chart('myChart', {
      type: 'line',
      data: {
        labels: chartx,
        datasets: chartdata
      },
      options: {
        legend: {
          display: true,
          position: 'left'
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  }
}
getoptiontunnels();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<select id="Choosecustomer" onchange="getoptiontunnels();">
  <option value="lav">lav</option>
  <option value="prov">prov</option>
</select>
<br>
<canvas id="myChart" height="100"></canvas>

Leave a comment