<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>