<script src="RGraph.common.core.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="800" height="350"> [No canvas support] </canvas>This is the code that generates the chart:
<script> new RGraph.Line({ id: 'cvs', data: [8,7,6,5,8,7,9,8,6,5,8,3,4,1,1,9,5,7,8,5,6,9,8,7], options: { tickmarks: 'circle', tickmarksSize: 100, linewidth: 2, hmargin: 5, shadow: false, filled: true, backgroundGridVlines: false, backgroundGridBorder: false, noaxes: true, title: 'Sales figures for 2012', unitsPost: '%', gutterLeft: 50, labels: [ '','Jan','', '','Feb','', '','Mar','', '','Apr','', '','May','', '','Jun','', '','Jul','', '','Aug','', '','Sep','', '','Oct','', '','Nov','', '','Dec','' ] } }).draw().exec(function (obj) { // The fill var grad = obj.context.createLinearGradient(0,15,0,275); grad.addColorStop(0, 'rgba(248,231,209,0.75)'); grad.addColorStop(0.6, 'rgba(248,231,209,0.5)'); grad.addColorStop(0.6, 'rgba(220,234,216,0.75)'); grad.addColorStop(0.8, 'rgba(220,234,216,0.5)'); grad.addColorStop(0.8, 'rgba(132,208,248,0.75)'); grad.addColorStop(1.0, 'rgba(132,208,248,0.5)'); obj.set({ fillstyle: grad }); // The stroke var grad2 = obj.context.createLinearGradient(0,25,0,275); grad2.addColorStop(0, 'orange'); grad2.addColorStop(0.6, 'orange'); grad2.addColorStop(0.6, 'green'); grad2.addColorStop(0.8, 'green'); grad2.addColorStop(0.8, 'blue'); grad2.addColorStop(1.0, 'blue'); obj.set({ colors: [grad2] }); RGraph.redraw(); }); </script>