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 really related to each other. There's a grouped Bar chart below this Line chart that uses the same styling and demonstrates this.
There's a grouped Bar chart version of the chart that's shown below that makes the data far easier to interpret (in my opinion).
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.key.js"></script> <script src="RGraph.bar.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="575" height="450"> [No canvas support] </canvas>This is the code that generates the chart:
<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, linewidth: 7, backgroundGridVlines: false, backgroundGridColor: 'gray', colorsBackground: '#222', axes: false, textColor: '#A7A5A6', textSize: 10, title: '2009 employee sales by department', titleColor: 'white', titleSize: 24, xaxisLabels: ['Food','Auto','Household','Furniture','Kitchen','Bath'], marginLeft: 50, marginRight: 50, marginTop: 75, 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 } // 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 handler function is added. }).on('beforedraw', function (obj) { // Clear the canvas to a specific color RGraph.clear(obj.canvas, '#555557'); }).trace(); </script>
Here's a version of the above Line chart but using a grouped Bar chart instead of a Line chart. Personally I think the Bar chart makes the interpretation of the data easier and makes the intent easier to read.
This is the code that generates the chart: