Here's an example of a dasgboard thats made up of Horizontal Bar, Bar and a Pie chart. There are various ways shown of visualising the same data in different ways. Each chart uses its own SVG tag and the DIV tags that you specify are shown below.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.hbar.js"></script> <script src="RGraph.svg.bar.js"></script> <script src="RGraph.svg.pie.js"></script>Put this where you want the chart to show up:
<div style="border: 1px solid gray; width: 750px; height: 600px"> <div style="width: 375px; height: 200px; float: left" id="cc1"></div> <div style="width: 375px; height: 200px; float: left" id="cc2"></div> <div style="width: 150px; height: 200px; float: left" id="cc3"></div> <div style="width: 150px; height: 200px; float: left" id="cc4"></div> <div style="width: 150px; height: 200px; float: left" id="cc5"></div> <div style="width: 150px; height: 200px; float: left" id="cc6"></div> <div style="width: 150px; height: 200px; float: left" id="cc7"></div> <div style="width: 750px; height: 200px; float: left" id="cc8"></div> </div>This is the code that generates the chart:
<script> data = [ [10,23,18,25,15], [12,25,14,5,4], [13,20,13,8,3], [12,19,17,10,8], [15,16,13,8,5] ]; colors = ['#0B74B5','#D56229','#1B9F77','#CF77A9','#E79F26']; pieLabels = ['Category 1','Category 2','Category 3','Category 4','Category 5']; labels = ['Item 1','Item 2','Item 3','Item 4','Item 5']; pie = new RGraph.SVG.Pie({ id: 'cc1', data: data[0], options: { colors: colors, centerx: 250 } }).draw(); hbar1 = new RGraph.SVG.HBar({ id: 'cc2', data: data, options: { colors: colors, grouping: 'stacked', backgroundGrid: false, xaxisTickmarks: false, yaxisTickmarks: false, yaxisLabels: labels, xaxisMax: 90 } }).draw(); // Add the labels on the left of the Pie chart for (var i=0; i<pieLabels.length; ++i) { var y = (i * 30) + 35; RGraph.SVG.text({ object: pie, text: pieLabels[i], x: 100, y: y, halign: 'right', valign: 'center' }); RGraph.SVG.create({ svg: pie.svg, type: 'circle', attr: { cx: 115, cy: y, r: 8, fill: colors[i] } }); } // Second row hbar2 = new RGraph.SVG.HBar({ id: 'cc3', data: data[0], options: { colors: [colors[0]], backgroundGrid: false, xaxisTickmarks: false, yaxisTickmarks: false, yaxisLabels: labels, xaxisMax: 30, textSize: 10, xaxisLabelsCount: 2 } }).draw(); hbar2 = new RGraph.SVG.HBar({ id: 'cc4', data: data[1], options: { colors: [colors[1]], backgroundGrid: false, xaxisTickmarks: false, yaxisTickmarks: false, xaxisMax: 30, textSize: 10, xaxisLabelsCount: 2 } }).draw(); hbar3 = new RGraph.SVG.HBar({ id: 'cc5', data: data[2], options: { colors: [colors[2]], backgroundGrid: false, xaxisTickmarks: false, yaxisTickmarks: false, xaxisMax: 30, textSize: 10, xaxisLabelsCount: 2 } }).draw(); hbar4 = new RGraph.SVG.HBar({ id: 'cc6', data: data[3], options: { colors: [colors[3]], backgroundGrid: false, xaxisTickmarks: false, yaxisTickmarks: false, xaxisMax: 30, textSize: 10, xaxisLabelsCount: 2 } }).draw(); hbar5 = new RGraph.SVG.HBar({ id: 'cc7', data: data[4], options: { colors: [colors[4]], backgroundGrid: false, xaxisTickmarks: false, yaxisTickmarks: false, xaxisMax: 30, textSize: 10, xaxisLabelsCount: 2 } }).draw(); bar = new RGraph.SVG.Bar({ id: 'cc8', data: data, options: { colors: colors, backgroundGridHlinesCount: 2, backgroundGridVlines: false, backgroundGridBorder: false, xaxisTickmarks: false, yaxisTickmarks: false, yaxis: false, yaxisMax: 30, yaxisLabelsCount: 2, hmargin: 25, xaxisLabels: labels } }).draw(); </script>