<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.bar.js"></script> <script src="RGraph.line.js"></script> <script src="RGraph.drawing.text.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250"> [No canvas support] </canvas>This is the code that generates the chart:
<script> window.onload = function () { var canvas = document.getElementById('cvs'); /** * Draw the Line chart when the page loads */ drawLine(); /** * Draw the line chart */ function drawLine () { RGraph.Reset(canvas); var line = new RGraph.Line({ id: 'cvs', data: [4,8,6,3,5,2,6], options: { labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'], hmargin: 5, linewidth: 5, textAccessible: true } }).draw() drawButtons(); } /** * Draw the Bar chart */ function drawBar () { RGraph.reset(canvas); var bar = new RGraph.Bar({ id: 'cvs', data: [4,8,6,3,5,2,6], options: { labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'], colors: ['Gradient(white:blue)'], textAccessible: true } }).draw(); drawButtons(); } /** * Draw the buttons (using the drawing API text object). */ function drawButtons () { var text1 = new RGraph.Drawing.Text({ id: 'cvs', x: 600 - 25 - 5, y: 25 + 5, text: 'Line chart', options: { font: 'Arial', size: 14, bounding: true, boundingFill: 'white', boundingShadow: true, boundingShadowColor: '#bbb', boundingShadowOffsetx: 1, boundingShadowOffsety: 1, halign: 'right', valign: 'top', colors: ['blue'], textAccessible: true, textAccessiblePointerevents: false } }).on('click', function (e, shape) { drawLine(); }).on('mousemove', function () { return true; }).draw() var text2 = new RGraph.Drawing.Text({ id: 'cvs', x: 600 - 25 - 5 - 5 - text1.coords[0][2], y: 25 + 5, text: 'Bar chart', options: { font: 'Arial', size: 14, bounding: true, boundingFill: 'white', boundingShadow: true, boundingShadowColor: '#bbb', boundingShadowOffsetx: 1, boundingShadowOffsety: 1, halign: 'right', valign: 'top', colors: ['blue'], textAccessible: true, textAccessiblePointerevents: false } }).on('click', function (e, shape) { drawBar(); }).on('mousemove', function () { return true; }).draw(). text1.onmousemove = text2.onmousemove = function (e, shape) { e.target.style.cursor = 'pointer'; } } }; </script>