A vertical line Scatter chart
Note
There's now a better way to produce vertical line charts and
that's to use
the Horizontal Bar chart.
There's quite a few
options for it (including a spline
mode) and there's a
couple of demos for it in
the download archive
(hbar-vartical-line.html
and
hbar-vertical-line-multiple.html
).
There's an example of the style of vertical line chart
that the Horizontal Bar chart profuces here.
Vertical line charts are not supported natively in RGraph however they can
be achieved using the Scatter chart (and the Horizontal Bar chart).
With the Scatter chart, unlike the Line chart, you can
specify the X-axis
and Y-axis
coordinates and a connecting line can be shown as in the
example.
Below is the code that's necessary to achieve the vertical line chart. The Y-axis
labels are
specific and used to show the labels for the chart whilst an X-axis
scale is enabled to show
the magnitude of values. The maximum values are set manually - so you may want to add code
that determines these based on the data - as a normal Line chart would.
Read the comments in the code sample below to find out more information.
This goes in the documents header:
<script src="RGraph.common.core.js"></script> <script src="RGraph.scatter.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="400" height="550" style="float: right"> [No canvas support] </canvas>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):
<script> // Create the Scatter chart but configure it in such a way that it has // the appearance of a vertical Line chart. One configuration option // that is used here is the X-axis scale - which can be used on any // Scatter chart instead of regular labels. new RGraph.Scatter({ id: 'cvs', data: [[76, 6.5],[34,5.5],[12,4.5],[48,3.5],[43,2.5],[14,1.5],[5,0.5]], options: { xaxis: false, xaxisScaleMax: 100, yaxisScaleMax: 7, textSize: 14, line: true, lineLinewidth: 3, backgroundGridBorder: false, backgroundGridHlines: false, backgroundGridVlinesCount: 5, yaxisLabelsSpecific: ['', 'Monday','', 'Tuesday','', 'Wednesday','', 'Thursday','', 'Friday','', 'Saturday','', 'Sunday',''], marginLeft: 100, xaxisScale: true, yaxisTickmarksCount: 14, tickmarksStyle: null } }).draw(); </script>