Dynamic selection of datasets, causing old versions to redraw on screen

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by David Knowles on 18th April 2013
In my problem I am trying to build an interactive graph where the user can select which datasets are displayed.

At present I am just using checkboxes to turn on and off the datasets, this all works fine, but my problem is how do I remove the old versions of the graph from the system.

If the user clicks on the screen then all the old versions of the graph are displayed.

Sorry if this is a silly mistake but this is day one of using rgraph, and I have run out of ideas.


link beta.recordsforbuildings.com/rgraphtest.html


<!DOCTYPE html >

<TITLE>Test Page</TITLE>

     <script src="/libraries/RGraph.common.core.js" ></script>
     <script src="/libraries/RGraph.common.dynamic.js" ></script>
     <script src="/libraries/RGraph.common.tooltips.js" ></script>
     <script src="/libraries/RGraph.common.effects.js" ></script>
     <script src="/libraries/RGraph.line.js" ></script>
     <script src="/libraries/jquery.min.js" ></script>
     <script src="/libraries/RGraph.common.key.js"></script>
     <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->

<body OnLoad = 'GraphTestExample()'> <!-- note in main system upto 50 charts on each page so this function loads all the charts -->
<script> var GDTestExample_F0 =[66.8,68.4,72.9,65.6,64.2,65.8,62.5,65,65,65,65,65,65,65,65,65,65,65,65,65,65,65,65,65,64.5,65,,65,65,65,50,65,65];</script>
<script> var GDTestExample_F1 =[65.4,60.6,65.2,53.4,61.2,60.5,60.5,61,61,63.1,61,60,60,60,60,60,60,60,60,60,60,60,60,60,58.9,58,,59,60,58,45,60,52.9];</script>

  <tr><td colspan="2">
     We want the graph to show up to 10 individual datasets on the line graph, but be able to deselect all but one dataset and have the graph redraw with new axis scales etc.<br>
     The example performs this feature (with the two data sets).<br>
     Problem : After just selecting set one causing the Y Axis to change if the users clicks on the page (anywhere but the checkboxes) then the original graph is redrawn.<br>
     Solution needed : How do I stop the old graphs from being redrawn.

    <!-- Two temperatures to be displayed so two tick boxes to turn them on and off -->
             <input name="" type="checkbox" id="GTestExample_F0" onClick="GraphTestExample()" value="1" checked>┬áDataset One<br>
             <input name="" type="checkbox" id="GTestExample_F1" onClick="GraphTestExample()" value="1" checked>┬áDataset Two<br>
      <td >
          <canvas id="cvsTestExample" width="1300" height="450"></canvas>
function GetDataTestExample(){
  var Field = 0;
  var obj;
  var TempData ;
  obj = document.getElementById("GTestExample_F0")
     if (obj.checked==true)
   Field = Field + 1;
   TempData = GDTestExample_F0 ; // if this is the only temperature to be shown remember it for later
  obj = document.getElementById("GTestExample_F1")
     if (obj.checked==true)
   Field = Field + 1;
   TempData = GDTestExample_F1 ; // if this is the only temperature to be shown remember it for later
  if (Field == 1) {
   GraphData = TempData; // only one temperature so we have remembered it and can just set the return value now.
  } else {
  var GraphData = new Array(1);
  // more than one temperature so build array of data arrays
     obj = document.getElementById("GTestExample_F0")
     if (obj.checked==true)
   GraphData[0] = GDTestExample_F0;
     obj = document.getElementById("GTestExample_F1")
     if (obj.checked==true)
   GraphData[1] = GDTestExample_F1;
  // now we have the data we need to reset the data in the rGraph object
  return GraphData;

      function GraphTestExample ()
         var GData = GetDataTestExample() // get the data from above;
   // wipe the old graph ready for a clean new one.
         var _RG_ = RGraph;
         var canvas = document.getElementById("cvsTestExample");
   // rebuild the graph with the new temeratures
   var lineTestExample = new RGraph.Line('cvsTestExample',GData);
             lineTestExample.Set('chart.labels', ['26/04/2010','24/05/2010','21/06/2010','28/07/2010','31/08/2010','30/09/2010','21/10/2010','29/11/2010','10/01/2011','24/01/2011','16/02/2011','01/04/2011','21/04/2011','26/05/2011','21/06/2011','18/07/2011','23/08/2011','22/09/2011','31/10/2011','30/11/2011','14/12/2011','12/01/2012','29/02/2012','21/03/2012','18/04/2012','14/05/2012','14/06/2012','23/07/2012','23/08/2012','20/09/2012','15/10/2012','08/11/2012','19/12/2012']);
             lineTestExample.Set('chart.linewidth', 2);
             lineTestExample.Set('chart.hmargin', 5);


Posted by RGraph support on 19th April 2013
Hi there,

Your chart looks like it's working OK so did you solve this? Either way you can prevent old charts from reappear by restting the canvas in between draws:

canvas = document.getElementById('cvs');

So you can do the reset before you draw a chart and you'll have a clear canvas to draw on.

Richard, RGraph Support
Posted by RGraph support on 19th April 2013
Hi there,

Also, if you use \r\n in your labels you might be able to get them horizontal - for example:

myObj.Set('labels', ['26th Apr `10','\r\n24th May `10','21 Jun `10','\r\n28th Jul `10','31st Aug 2010']);

Richard, RGraph Support
Posted by David Knowles on 19th April 2013
Thanks .Reset(canvas) worked great.

Cheers David

Add a reply

« Back to message list