Multiple instances of RGraph

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 Matt on 8th June 2013
Hello,

Ive been trying to figure out how to run multiple instances of RGraph on one page (each instance containing multiple graphs). The reason I want to do this is because I am making a slider which lets the user move between sets of graphs (by using php ‘include’) so I can’t group the graphs’ script together in the same place on the page. For the same reason I cant call the script in <head> but I guess that shouldn’t matter?

For example:

<body>

         <script>
          window.onload = function ()
    {
    //DATA SETS
   
var data1 = [array1];
var data2 = [array2];
var data3 = [array3];

             var scatter = new RGraph.Scatter('bp', data1, data2);
//customisation variables here

             var scatter = new RGraph.Scatter('hr', data3);
//customisation variables here
    }
       </script>

<canvas id="rr" width="800" height="200">
<canvas id="hr" width="800" height="200">


//SOME HTML


         <script>
          window.onload = function ()
    {
    //DATA SETS
   
var data1_2 = [array1_2];
var data2_2 = [array2_2];
var data3_2 = [array3_2];

             var scatter = new RGraph.Scatter('bp_2', data1_2, data2_2);
//customisation variables here

             var scatter = new RGraph.Scatter('hr_2', data3_2);
//customisation variables here
    }
       </script>
<canvas id="rr_2" width="800" height="200">
<canvas id="hr_2" width="800" height="200">


//SOME MORE HTML


The problem is when I do this, only the second set of graphs are displayed, I can’t figure out why? Is there a way I can run RGraph more than once in a page?
Here is an example: (note that here I have used the same arrays for both sets of graphs for ease, but it won’t be the same arrays in the final version).

stage.mattstubbs.co.uk/5/charts/example3.php?mrn=10000001&date=2013-05-30

Thanks very much for any help in advance,

Matt
Posted by RGraph support on 8th June 2013
Hi there,

I can't really tell what you're describing (and your link doesn't work) but it sounds like you're using one canvas to show multiple charts. So each time you create an RGraph Scatter object you'll need to use the same canvas ID (eg 'cvs') - and a good idea would be to reset the canvas in between charts:

canvas = document.getElementById('cvs');
RGraph.Reset(canvas);

If you're refreshing the page between charts you probably won't need to reset the canvas - but you should still use the same canvas ID.




Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Matt on 10th June 2013
Hi Richard, thanks for the reply, that's not exactly what i meant, sorry the link doesnt work - my mistake. I think i have come up with a solution to my problem, i am just testing it. if it works i will post here so that others with similar issue can see.
Posted by Michael on 17th December 2013
Hello,
Trying to show two thermometers in a page
I've seen example where you show three gauges -bank gauge example-, but what I need is multiple thermometers. I've already tried the "bank gauge" with thermometers but when I change the width of the thermo canvas what I get is a massive thermometer, only one.
Can I use .Set('centerx','200') with thermometers?
Any clue?

thx
Michael
Posted by RGraph support on 17th December 2013
Hi there,

If your canvas is (for example) 1000 wide you can size it with the gutter properties so that it has a relevant amount of space. Eg:

www.rgraph.net/fiddle/view/a-thermometer-with-a-big-canvas



Richard, RGraph Support
www.rgraph.net
Please link to the RGraph website
Posted by Michael on 17th December 2013
Thanks a lot, with your help I got it to work

Michael

Add a reply




« Back to message list