2 vertical axes in demo file: line-front-page.html

Share RGraph:   Share or Like RGraph on Facebook!

« 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 Luc Brossé on 30th April 2013
Hello there,

I want to use the deme "line-front-page.html" with 2 diffirent vertical axes because the data ranges are diffirent ...
PE:
var data1 = [0.880,0.722,1.132,0.983,0.774,1.664,1.947,2.173,1.760,1.127,1.569];
var data2 = [24,19,33,29,23,49,55,64,58,39,60];

How do i do that?

Here is the script:

     <script>
         window.onload = function ()
         {
             var data1 = [0.880,0.722,1.132,0.983,0.774,1.664,1.947,2.173,1.760,1.127,1.569];
             var data2 = [24,19,33,29,23,49,55,64,58,39,60];

             var myLine = new RGraph.Line('cvs',data1, data2);
             myLine.Set('chart.labels', ['2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010']);
             myLine.Set('chart.gutter.left', 40);
             myLine.Set('chart.gutter.right', 30);
             myLine.Set('chart.gutter.bottom', 30);
             myLine.Set('chart.colors', ['red', 'black']);
             myLine.Set('chart.linewidth', 5);
             myLine.Set('chart.hmargin', 15);
             myLine.Set('chart.text.color', '#333');
             myLine.Set('chart.text.font', 'Arial');
             myLine.Set('chart.background.grid.autofit', true);
             myLine.Set('chart.background.grid.autofit.numvlines', 11);
             myLine.Set('chart.shadow', true);
             myLine.Set('chart.shadow.color', 'rgba(20,20,20,0.3)');
             myLine.Set('chart.shadow.blur', 10);
             myLine.Set('chart.shadow.offsetx', 0);
             myLine.Set('chart.shadow.offsety', 0);
             myLine.Set('chart.background.grid.vlines', true);
             myLine.Set('chart.background.grid.border', true);
             myLine.Set('chart.noxaxis', false);
             myLine.Set('chart.axis.color', '#666');
             myLine.Set('chart.text.color', '#666');
             myLine.Set('chart.spline', true);
             myLine.Set('chart.shadow.offsetx', 3);
             myLine.Set('chart.shadow.offsety', 3);
             myLine.Set('chart.shadow.color', '#aaa');
             myLine.Draw();
             RGraph.Effects.Line.jQuery.UnfoldFromCenterTrace(myLine, {'duration': 3000});
         }
     </script>

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

Because of the different scales you'll need to use two different Line objects like - this one one (but which uses the Line instead of the Bar):

www.rgraph.net/docs/combining-charts.html




PS - cheers!

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

An example:

[removed]


Richard
Posted by Luc Brossé on 2nd May 2013
OK guys tnx!!

This works very well, but the animation not ...
----------------------------------------------------
var line1 = new RGraph.Line('cvs', [24,19,33,29,23,49,55,64,58,39,60]);
    line1.Set
    .....
    line1.Draw();
var line2 = new RGraph.Line('cvs', [0.880,0.722,1.132,0.983,0.774,1.664,1.947,2.173,1.760,1.127,1.569]);
   line2.Set
   .....
   line2.Draw();
----------------------------------------------------
so far so good ...

After deleting the line1.draw() and line2.Draw() and then combining ...
----------------------------------------------------
var combo = new RGraph.CombinedChart(line1, line2);
combo.Draw();
----------------------------------------------------
nothing happens ...
And i want allso to animation with
----------------------------------------------------
RGraph.Effects.Line.jQuery.UnfoldFromCenterTrace(combo, {'duration': 3000});
----------------------------------------------------

Any Idea?

Regards
Posted by RGraph support on 2nd May 2013
Hi there,

I doubt the UnfoldFromCenterTrace effect will work correctly though the Trace2 effect does.



Richard

Add a reply




« Back to message list