<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="250"> [No canvas support] </canvas>This is the code that generates the chart:
<script> window.onload = function () { var color = '#E9B34E'; var line = new RGraph.Line({ id: 'cvs', data: [ [7000,26000,11000,16000,28000,13000,23000,28500,null,null,null,null], [null,null,null,null,null,null,null,28500,11000,14000,9000,10000], ], options: { colors: ['black',color], shadow: false, noaxes: true, backgroundGridVlines: false, backgroundGridAutofitNumhlines: 3, backgroundGridBorder: false, numyticks: 3, ylabelsCount: 3, ymax: 30000, gutterTop: 50, gutterLeft: 100, unitsPre: '£', linewidth: 3, labels: ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'], tickmarks: 'dot', tickmarksDotStroke: 'white', tickmarksDotLinewidth: 0, tickmarksDotStroke: 'white', ticksize: 0, textSize: 14, textFont: 'Segoe UI', scaleZerostart: true, shadow: true, shadowOffsetx: 0, shadowOffsety: 0, shadowBlur: 0, textAccessible: true } }).on('draw', function (obj) { // Draw the vertical line var x = obj.coords2[1][7][0]; var y = obj.coords2[1][7][1]; // Draw thevertical line above/below the 8th point RGraph.path2(obj.context, ['b','m',x,25,'l',x,y - 10,'s',color]); RGraph.path2(obj.context, ['b','m',x,y + 10,'l',x,230,'s',color]); obj.context.fillStyle = color; // Draw the text above the line RGraph.text2(obj, { 'x': x, 'y': 25, 'text': 'TODAY', 'size': 8, 'halign': 'center', 'bold': true, accessible: true }); // Draw the text above the line RGraph.text2(obj, { color: 'black', 'x': 65, 'y': 30, 'text': 'REVENUE', 'size': 14, 'halign': 'center', 'bold': true, accessible: true }); }).trace2({frames: 50}, function (obj) { obj.animate({ frames: 15, ticksize: 7, tickmarksDotLinewidth: 3, shadowOffsetx: 1, shadowOffsety: 1, shadowBlur: 2 }); }); }; </script>