clearing or redrawing graph

[palli]

Hi – I like this program! I got one issue with a dynamic (on click) graph that I created (see test site http://www.opendatafit.org/javatest/twoupdates.html – view source for code):

Basically as it appears to me that when chart.render() is executed on click, only the part of the chart that I have specified an x-range for gets updated. So if the initial plot had an x-range (time) of 250 but I change it to 100 and then change one or more of the other parameters, the region between 0-100 gets updated but the old data at + 100 to 250 is still there. If I choose to make x bigger than 250 all the old data goes away but if I then run this again with a smaller x value the data beyond that lingers…

Looking around I can’t find an obvious solution. In other programs people mention something like “redraw” or clear.chart but you don’t appear to have anything like that (which also clears the excess data).

Any suggestions (sorry – I posted this initially in DOCS – updating chart options but it probably belongs better in forum)? Maybe there is a simple array trick I am missing – I am newish to JavaScript so pardon my ignorance. Palli

[Anjali]

Palli,

Sorry, but we are not able to understand the issue clearly. Can you please explain it in detail.

When you say “of 250 but I change it to 100” do you mean changing the range programmatically (via minimum and maximum) by zooming in to the region manually with mouse/pointer.

What other parameters are you changing?

And what do you mean by clearing the excess data? Are you looking for dynamic charts like this by any chance?

Can you please give us step by step instructions to reproduce the problem??

[palli]

Sure – open up the site. After the chart is drawn, change:

Initial conc (first input box) from 250 to 100 (this controls where the line short start on the y-axis)
Max time on x-axis (bottom input box) from 250 to 100 (this controls the length of the x-axis dataset)

Hit recalculate graph button.

See what happens to the graph around x = 100?
I want the redraw to clear all the “old” data points beyond x = 100. But the “old” data points from 100-250 are still there (and the graph even tries to spline the two datasets together!).

Is there a simple way of clearing the old traces away “on click”?
Cheers
Palli

[Anjali]

Palli,

We just looked into your code and it turns out you are not clearing/resetting the dataPoints before assigning new values to it. You can do so by assigning a new empty array as shown below.

chart.options.data[0].dataPoints = [];
for(var i = 1 ; i < xtmax; i++) {
  xtime += 1;
  kt = Ratek1*xtime;
  Aconct=Aconct0*Math.exp(-kt);
  chart.options.data[0].dataPoints[i-1] = {x:xtime, y:Aconct};
};
chart.render();

chart.options.data[1].dataPoints = [];
for(var i = 1 ; i < xtmax; i++) {
        xtime += 1;

   Aconct0kt1 = 1+(Aconct0*Ratek2*xtime);
   Aconct2=Aconct0/Aconct0kt1;
	chart.options.data[1].dataPoints[i-1] = {x:xtime, y:Aconct2}
};

chart.render();
});

[palli]

Thanks! That worked.