I have a Line chart filledRange and tickmarks problem


« 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 Berjawi on 6th December 2016
hello,

Im trying to draw three lines with filled range. I know that the filled range requires only two lines, so I made two charts which resolve my problem.
Here is my code :

<script>
     window.onload = function ()
     {
         var l1 = new RGraph.Line({
             id: 'cvs',
             data: [
                 [75,90,85,80],
                 [57,50,60.8,59]
             ],
             options: {
                 gutterTop: 50,
                 hmargin: 10,
                 backgroundGridVlines: false,
                 labels: ["A 1","A 2","A 3","A 4"],
                 title: 'Range of fuel consumption',
                 filled: true,
                 filledRange: true,
                 fillstyle: 'rgba(255,121,121,1)',
                 linewidth: 5,
                 colors: [
                         'rgba(255,93,93,1)',
                          'rgba(151,201,1,1)'
                         ],
                
                 ymax: 100,
                 textSize: 14,
                 textAccessible: true,
                 linewidth: 5,
                 tickmarks: 'filledcircle',
                 ticksize: 5
             }
         }).draw();
         var l2 = new RGraph.Line({
             id: 'cvs',
             data: [
                 [57,50,60.8,59],
                 [40,20,39,25]
             ],
             options: {
                 gutterTop: 50,
   hmargin: 10,
   backgroundGridVlines: false,
                 filled: true,
                 filledRange: true,
                 fillstyle: 'rgba(182,217,1,1)',
                 linewidth: 5,
                 colors: [
                          'rgba(151,201,1,1)',
                          'rgba(100,100,245,1)'
                         ],
                 ymax: 100,
                 textSize: 14,
                 textAccessible: true,
                 tickmarks: 'filledcircle',
                 ticksize: 5
             }
         }).draw();
     };
</script>

However, I still have two problems:
1 - the filled areas cover a part of the tickmars
2 - The horizontal gridline is showing for l1

Any help is appreciated.
Posted by Richard on 6th December 2016
Hi,

The overlapping tickmarks is down to the order that things are drawn in - so what you can do is just turn off tickmarks.

I suppose what you could also do is draw them yourself in the ondraw event so that they're drawn on top of everything.

The background grid issue can be resolved by just turning off the grid on the second chart.

Here's an example of your two charts:

www.rgraph.net/fiddle/view.html/a-bar-chart-with-two-ranges




Richard
Posted by Berjawi on 6th December 2016
Thank you, that resolve my problem.

One note concerning the link : www.rgraph.net/fiddle/view.html/a-bar-chart-with-two-ranges
The title should be "A Line chart with two ranges" instead of "A Bar chart with two ranges"

Add a reply

 




« Back to message list
RGraph on social media