This is a demo of a Scatter chart with a connecting line that has actually been configured to look like a vertical Line chart. It uses the X axis scale and Y axis labels.
This goes in the documents header:<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.scatter.js"></script>Put this where you want the chart to show up:
<div style="width: 300px; height: 600px" id="chart-container"></div>This is the code that generates the chart:
<script> data = [ {x:50, y:1}, {x:42, y:3}, {x:89, y:5}, {x:76, y:7}, {x:16, y:9}, {x:44, y:11}, {x:44, y:13} ]; new RGraph.SVG.Scatter({ id: 'chart-container', data: data, options: { backgroundGridVlinesCount: 5, backgroundGridHlines: false, backgroundGridBorder: false, line: true, lineLinewidth: 2, yaxisMax: 14, xaxisMin: 0, xaxisMax: 100, xaxisScale: true, xaxisLabelsCount: 5, xaxisLabelsPositionEdgeTickmarksCount: 5, yaxisLabelsPositionEdgeTickmarksCount: 14, yaxisLabels: [ '', 'Bazz', '', 'Lucy', '', 'Pete', '', 'Olga', '', 'Hank', '', 'Jane', '', 'Jack', '' ], yaxisScale: false, gutterLeft: 50, tickmarksSize: 0, xaxis: false } }).draw(); </script>