clearing or redrawing graph

• April 15, 2015 at 8:21 am #8626
  
  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

  April 15, 2015 at 7:59 pm #8631
  
  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??

  April 16, 2015 at 2:36 am #8633
  
  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

  April 16, 2015 at 7:34 pm #8645
  
  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();
  });

  April 17, 2015 at 11:14 am #8647
  
  palli

  Thanks! That worked.