<script src="RGraph.common.core.js"></script> <script src="RGraph.common.effects.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.drawing.text.js"></script> <script src="RGraph.bar.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 ca = document.getElementById("cvs"); var data = [15,14,12,18,16,13]; var data_drilldown = []; /** * The drilldown data - the order corresponds to that of the labels */ data_drilldown.push([2,3,1,2,3,1,3]); data_drilldown.push([2,2,2,1,2,2,3]); data_drilldown.push([1,1,1,2,3,2,2]); data_drilldown.push([3,3,3,2,3,3,1]); data_drilldown.push([4,3,1,1,3,2,2]); data_drilldown.push([3,2,2,2,3,1,0]); var labels = ['John','Fred','Luis','Kevin','Lola','June'] var bar = drawMainChart(); /** * Draws the main chart */ function drawMainChart () { RGraph.reset(ca); var bar = new RGraph.Bar({ id: 'cvs', data: data, options: { labels: labels, bevel: !RGraph.ISOLD, title: 'The whole teams statistics for sales of widgets', backgroundGridAutofitNumvlines: data.length, strokestyle:'rgba(0,0,0,0)', textAccessible: true, shadow: true } }).fadeIn(); /** * When a bar is clicked show a more detailed breakdown */ bar.onclick = function (e, shape) { var obj = e.target.__object__; var ca = obj.canvas; var idx = shape.index; /** * Slide the old bar out */ obj.fadeOut(null, function () { RGraph.reset(ca); var bar = new RGraph.Bar({ id: 'cvs', data: data_drilldown[idx], options: { labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'], bevel: true, strokestyle: 'rgba(0,0,0,0)', title: 'Specific statistics for: ' + labels[idx], backgroundGridAutofitNumvlines: 7, textAccessible: true } }).fadeIn(); }); } /** * The onmousemove event to change the cursor */ bar.onmousemove = function (e, shape) { return true; } return bar; } document.getElementById("butBack").onclick = function (e) { var obj = ca.__object__; obj.fadeOut(null,function () { var bar = drawMainChart(); }); } }; </script>