How can I clean a graph before I load new measures with ajax

[pierrot10]

Good evening.

I actually have 3 graph for 12 captors. When the page is loaded (Ajax), 100 last measures are show in the graph.
Then I can select a date range to reload new point of measures in my graph.
Here is the exemple:
http://smart-idea.io/chart-step/
I observed, when I want to have (load) the measures from 20.10.2017 to the 20.10.2017 (measures od the 20 of october), it look like if the previous is still in the graph.

For example, load the page and load new measures of the day 20.10.2017. And then move your mouse over the temperature graph (first graph). You will observe that the graph is like resized (move sudently). In fact, some previous measures are there.

Is there a way to clean a graph before we reload new measure?

Thank a lot

[etimberg]

@pierrot10 the problem happens because the old charts are not destroyed.

In your example I noticed

 var ctx = document.getElementById("pond-0");
 window.myLine = new Chart(ctx, chartTemperature);
     
var ctx = document.getElementById("pond-1");
window.myLine = new Chart(ctx, chartWater);
   
var ctx = document.getElementById("pond-2");
window.myLine = new Chart(ctx, chartHeatflux);

However, if the charts already exist you need to destroy() the old ones first. This is a quick fix, but a solution that doesn't use global variables would be more ideal

if (window.myLine0) {
  window.myLine0.destroy();
}
var ctx = document.getElementById("pond-0");
 window.myLine0 = new Chart(ctx, chartTemperature);

if (window.myLine1) {
  window.myLine1.destroy();
}
     
var ctx = document.getElementById("pond-1");
window.myLine1 = new Chart(ctx, chartWater);

if (window.myLine2) {
  window.myLine2.destroy();
}
var ctx = document.getElementById("pond-2");
window.myLine2 = new Chart(ctx, chartHeatflux);

Another alternative is to not destroy and recreate the chart but on the second update just change the chart's data.

[benmccann]

Closing as solved