A Line chart showing employee sales
A Line chart
showing the employee sales by department. Since this chart is
a copy of a chart found on the Internet it uses the Line chart
- though a
stacked or grouped Bar chart
may represent the data better because the types
of furniture aren't related to each other.
This goes in the documents header:
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.key.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<div style="text-align: center"> <canvas id="cvs" width="575" height="450">[No canvas support]</canvas> </div>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):
<script> // Create the Line chart new RGraph.Line({ id: 'cvs', // The four datasets that are shown on the chart - a multi-dimensional // array. data: [ [190,165,47,121,30,72], [12,180,10,80,25,75], [42,80,93,25,21,120], [2,42,27,47,43,50] ], options: { shadow: false, tickmarksStyle: null, backgroundGridVlines: false, backgroundGridColor: 'gray', colorsBackground: '#222', xaxis: false, yaxis: false, textColor: '#A7A5A6', textSize: 14, title: '2009 employee sales by department', titleColor: 'white', xaxisLabels: ['Food','Auto','Misc','Furniture','Bath','Kitchen'], marginLeft: 50, marginRight: 50, marginBottom: 60, colors: ['#B8202C','#96D1E3','#FA8710','#62648D'], // The key for this chart is positioned in the bottom margin // instead of the top key: ['Mary','Tom','Brad','Kate'], keyPosition: 'margin', keyLabelsSize: 14, keyLabelsColor: 'rgb(248,248,248)', keyPositionY: 425, responsive: [ {maxWidth:null,width:575,height:450,options:{linewidth: 7,marginTop: 75,titleSize: 17,keyPositionY: 425},css:{'float':'none'}}, {maxWidth:900,width:400,height:300,options:{linewidth: 4,marginTop: 55,titleSize: 17,keyPositionY: 275},css:{'float':'none'}} ] } // Here we use the beforedraw event to clear the canvas to a dark // color before the drawing is performed. Since it's the beforedraw // event the call to the draw() function has to be after the on() // function (otherwise the beforedraw event would have already run // by the time that the event is added. }).on('beforedraw', function (obj) { // Clear the canvas to a specific color RGraph.clear(obj.canvas, '#555557'); // Use the trace effect to show the chart and add some responsive capability to accommodate // smaller screens. }).trace(); </script>