A combined SVG Bar and Line chart
This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.bar.js"></script>
<script src="RGraph.svg.line.js"></script>
Put this where you want the chart to show up:
<div style="padding: 15px; display: inline-block">
<div style="width: 750px; height: 300px" id="chart-container"></div>
</div>
This is the code that generates the chart:
<script>
new RGraph.SVG.Bar({
id: 'chart-container',
data: [[8,8,8],[8,6,5],[4,9,9],[5,8,6],[7,6,8],[5,6,7],[5,4,6]],
options: {
gutterBottom: 35,
yaxis: false,
yaxisMax: 15,
hmargin: 25,
backgroundGridVlines: false,
backgroundGridBorder: false,
colors: ['#ccf','#c00','green '],
xaxisTickmarksCount: 7,
xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
textSize: 14,
tooltips: [
'Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday',
'Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday',
'Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'
]
}
}).grow({frames: 30});
new RGraph.SVG.Line({
id: 'chart-container',
data: [
[1.5,2.6,2.3,8.4,6.2,5.4,9.9],
[9.5,4.6,8.3,5.4,1.2,8.4,3.9]
],
options: {
yaxisMax: 15,
backgroundGrid: false,
linewidth: 5,
xaxis: false,
yaxis: false,
yaxisLabels: false,
hmargin: 50,
shadow: true,
shadowOpacity: .25,
shadowBlur: 2,
tickmarksStyle: 'circle',
tickmarksSize: 9,
tickmarksLinewidth: 3,
spline: true,
colors: ['black','red'],
tooltips: [
'M','T','W','T','F','S','S',
'M','T','W','T','F','S','S'
]
}
}).trace({frames: 30});
new RGraph.SVG.Pie({
id: 'chart-container',
data: [42,47,49],
options: {
radius: 30,
textSize: 10,
textBold: true,
labels: ['John','Ruby','Grant'],
colors: ['#ccf','#c00','green', 'pink', 'blue', 'red'],
centerx: 110,
centery: 60,
exploded: [5],
shadow: true,
shadowOpacity: 0.25
}
}).roundRobin();
</script>
« Back