Aligning values of Line charts with years

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 rod on 13th June 2013
Hi Richard, can you help me out with my chart please? I want the values of the line charts align with the years. On the sample code below, year 2000 is aligned ok but as you go through the years till 2012, the distance between the values and the years becomes wide. How can do I align them? Thanks for any advice. Please see the sample code below.

<p> <canvas id="cvs29" width="900" height="400">[No canvas support]</canvas>
<script>

var bar29 = new RGraph.Line('cvs29', [[905, 693.1, 670, 838.2, 923.9, 1099.4, 1293.4, 1237.1, 1844.8, 1936, 2054, 2509.1, 2614.2, , , ], [, , , , 0, -7.5, 26.8, 43.4, 49, 77.4, 110.1, 134.8, 179.7, , , ], [271, 241, 275, 268, 286, 264, 284, 282, 316, 313, 416, 324, 537, , , ], [, , , , , , , , , , , 26.6, 42, , , ], [66, 107.7, 126.3, 168, 232.5, 302, 324.8, 383.7, 144, 168.4, 488.7, 563.1, 674.4, , , ]])
.Set('key', ['mm','cc','yy','bb','sb'])
.Set('gutter.top', 50)
.Set('key.interactive', true)
.Set('key.position', 'gutter')
.Set('key.position.gutter.boxed', false)
.Set('key.position.y', 0)
.Set('tickmarks', 'circle')
.Set('ticksize', 2)
.Set('linewidth', 2)
.Set('outofbounds', true)
.Set('adjustable', 100)
.Set('numxticks', 3)
.Set('chart.gutter.right', 10)
.Set('gutter.left', 75)
.Set('yaxispos', 'left')
.Set('xaxispos', 'center')
.Set('background.grid.autofit.align', true)
.Set('title', 'income')
.Set('labels', ['2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015'])
.Draw();
</script>

....
Posted by RGraph support on 14th June 2013
Hi there,

Normally, with the Linw chart, to align the background grid you would set the number of vertical grid lines to one less than the number of datapoints that you have - ie 15. Because one of the points is placed on the left axis. With your data though it seems necessary to have to use 14 vertical grid lines - like this:

dev.rgraph.net/fiddle/view/3b9ce0f8364627eb6eb8b595b7995a78



Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Enter your name... on 14th June 2013
Hi Richard,

Thanks for your reply. The background grids and valuepoints are now lined-up, but the years on the x-axis are not lined-up.

How can I make the years line-up with the valuepoints and the years at the center of each grids? I have been looking in the properties and samples in the demos folder but I have not been very lucky to achieve what I'd like to do.

Thanks again for any help.

Posted by RGraph support on 14th June 2013
Hi there,


Just supply the correct amount of labels:

dev.rgraph.net/fiddle/view/3b9ce0f8364627eb6eb8b595b7995a78



Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Enter your name... on 16th June 2013
Hi Richard, thanks very much. It works!
Posted by Mikey Wetzel on 12th September 2016
I'm interested in the solution, but the fiddle examples are password protected. Please share if you don't mind.

My simple line chart is a year's worth of data (365 data values), with 12 horizontal labels for the months ('Jan', 'Feb', etc.). The month labels are not centered between the grid lines. I can't find a property to center them, although labelsOffsetX lets me slide them over.

Is that the correct solution? Use labelsOffsetX?

It's not ideal, in the case that size of the line chart may change. A "center" option would be better.

Posted by Richard on 12th September 2016
Hi there,

Well that example is over three years old and I've probably reused it as it doesn't seem to be around any more.

But to use date.time values I'd advise using the Scatter chart instead of the Line chart and there's a demo of that here:

www.rgraph.net/demos/scatter-date-time-values.html

With regard to centering the labels, the drawing API X axis has an option called labelsPosition which allows you to switch between Scatter style (called section) and Line style (called edge).




Richard

Add a reply




« Back to message list