How to draw multiple data Line charts on 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
Hello,

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,
BGupta
Posted by RGraph support on 29th November 2012
Hi,

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:

phpjs.org/categories/array/
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

myChart.Set('chart.tooltips',d2x).
Any help much appreciated.

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

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
Hi,

Well your can only have one set of labels per axis or you will get them overlapping (you can have multi-line or angled labels though (www.rgraph.net/docs/misc.html#crlf) ). If you need to show labels for each dataset you could have multiple axes. The next version of RGraph will have an RGraph.DrawXAxis() API function in it that will allow you to do this - as in these examples:

dev.rgraph.net/tests/2012-11-30/drawxaxis.html
dev.rgraph.net/docs/howto-multiple-xaxis.html
Posted by Jesus on 30th November 2012
I did copy paste the code of "dev.rgraph.net/tests/2012-11-30/drawxaxis.html" but it does not work, what's wrong?, use google chrome. Can you explain better use?


aplicacionhitos.16mb.com/gantt01.html



Code:

<!DOCTYPE html >
<html>
<head>
     <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/RGraph.bar.js" ></script>
    
     <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
     <title>A basic Gantt chart</title>
</head>
<body>

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


     <script>
         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
                               });
     }
     bar.Draw();
         }
     </script>
</body>
</html>
Posted by RGraph support on 30th November 2012
Hi,

If you're posting a link 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
RGraph on social media