A basic SVG Bipolar chart
This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.bipolar.js"></script>
Put this where you want the chart to show up:
<div style="padding: 15px">
<div style="width: 600px; height: 500px" id="chart-container"></div>
</div>
This is the code that generates the chart:
<script>
new RGraph.SVG.Bipolar({
id: 'cc',
left: [[4,2,5],[4,6,3],[5,8,9],[4,5,2],[4,6,3],[5,8,9],[4,3,5]],
right: [[8,6,6],[2,3,8],[4,6,8],[4,9,8],[2,5,9],[4,5,3],[4,9,6]],
options: {
labelsAbove: true,
labelsAboveUnitsPost: 'Kg',
labelsAboveSize: 18,
gutterTop: 50,
gutterLeft: 50,
gutterRight: 50,
xaxis: false,
yaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
yaxisTextBold: true,
yaxisTextItalic: true,
yaxisTextSize: 18,
vmargin: 10,
colors: [
'Gradient(red:white:red)',
'Gradient(green:#faa:green)',
'Gradient(yellow:#faa:yellow)'
],
grouping: 'stacked',
title: 'A basic Bipolar example chart',
titleSubtitle: 'A subtitle to go along with the title'
}
}).wave();
</script>
« Back