A vertical line chart using the SVG Scatter chart
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>
« Back