How do I draw multiple Line charts on the same canvas?

« 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 BGupta on 29th November 2012

I am trying to plot 4 datasets (different array lengths) on same canvas for line chart. Issue is I am not able to sort the multiple data labels on x axis.
Any help much appreciated.
Kind regards,
Posted by RGraph support on 29th November 2012

Without an example of the labels and some indication of what you want to do with them I can't help. If you want to pad the arrays there's an RGraph.array_pad() function and there's plenty of sort functions similar to PHP sort functions here:
Posted by BGupta on 29th November 2012
Thanks for responding.

An example of first line chart is
var d1 = [2,1,1,1,1,1,1,1,1,1]
var d1x = [10-11-2012 11:15,10-11-2012 11:30,10-11-2012 14:30,10-11-2012 15:15,10-11-2012 15:20,10-11-2012 15:22,10-11-2012 15:23,10-11-2012 16:08,11-11-2012 23:47,12-11-2012 00:51]

d1 for y axis and d1x for x axis

second line chart is

var d2 = [1,1,1,1,2,1]
var d2x = [10-11-2012 11:10,10-11-2012 11:20,10-11-2012 15:10,10-11-2012 15:24,10-11-2012 16:07,12-11-2012 00:52]

d2 for y axis and d2x for x axis

Now both the array lengths are different, also I am not able to display tooltips by giving

Any help much appreciated.

Kind regards,
Posted by RGraph support on 29th November 2012

Your tooltips should be strings - that means using quotes - for example

['10-11-2012 11:10', ...

And to make the arrays the same length you can either use RGraph.array_pad() or add the extra values yourself.
Posted by BGupta on 29th November 2012
That helps, but when more than one datasets show on same canvas, the labels on x axis overlap and show wrongly sorted especially the date time
Posted by RGraph support on 29th November 2012

Well you can only have one set of labels per axis or you will get them overlapping (you can have multi-line or angled labels though ( ). If you need to show labels for each dataset you could have multiple axes. The next version of RGraph will have a drawing API X axis object.
Posted by Jesus on 30th November 2012
I did copy paste the code of the X axis demo but it does not work, what's wrong?, use google chrome. Can you explain better use?


<!DOCTYPE html >
     <script type="text/javascript" src="libraries/RGraph.common.core.js" ></script>
     <script type="text/javascript" src="libraries/RGraph.gantt.js" ></script>
     <script type="text/javascript" src="libraries/RGraph.common.core.js" ></script>
     <script type="text/javascript" src="libraries/RGraph.common.dynamic.js" ></script>
     <script type="text/javascript" src="libraries/RGraph.common.tooltips.js" ></script>
     <script type="text/javascript" src="libraries/" ></script>
     <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
     <title>A basic Gantt chart</title>

     <h1>A basic Gantt chart</h1>
    <canvas id="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas>

         window.onload = function ()
     var bar = new RGraph.Bar('cvs', [4,8,6,3,5,2,1,5,6,8]);
     bar.Set('labels', ['Luis','Fred','Pete','Gill','Kevin','Jack','Jill','Freda','Bill','Olga']);
     bar.Set('gutter.bottom', 50);
     bar.Set('hmargin', 5);
     bar.Set('colors', ['Gradient(white:blue)']);
     bar.ondraw = function (obj)
         RGraph.DrawXAxis(obj, {
                                'axis.y': obj.canvas.height - 25,
                                'axis.labels': ['Team A','Team B'],
                                'axis.hmargin': 5
Posted by RGraph support on 30th November 2012

If you're posting a URL to an example page there's no need to post the source code. And according to the console (which you access in Chrome by pressing CTRL+SHIFT+J) DrawXAxis() doesn't exist. Which it doesn't because you're using an older version of RGraph - presumably the current stable version.

Either use the current beta or there'll be a new stable later today.
Posted by Jesus on 30th November 2012
True, thank you very much for all your contribution and quick response.

Add a reply

« Back to message list