A Line chart showing the employee sales by department. Since this chart was 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 as 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 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> new RGraph.Line({ id: 'cvs', 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, tickmarks: null, linewidth: 7, backgroundGridVlines: false, backgroundGridColor: 'gray', backgroundColor: '#222', noaxes: true, textColor: '#A7A5A6', textSize: 10, textAccessible: false, title: '2009 employee sales by department', titleColor: 'white', titleSize: 24, labels: ['Food','Auto','Household','Furniture','Hitchen','Bath'], gutterLeft: 50, gutterRight: 50, gutterTop: 75, gutterBottom: 60, key: ['Mary','Tom','Brad','Kate'], keyPosition: 'gutter', keyTextSize: 14, keyTextColor: 'rgb(248,248,248)', keyPositionY: 425, colors: ['#B8202C','#96D1E3','#FA8710','#62648D'] } }).on('beforedraw', function (obj) { RGraph.clear(obj.canvas, '#555557'); }).draw(); </script>
Here's a version of the above Line chart but using a grouped Bar chart instead of a Line. Personally, I think the Bar chart makes the interpretation of the chart easier and the intent easier to read.
This is the code that generates the chart:<script> new RGraph.Bar({ id: 'cvs2', data: [ [190,12,42,2], [165,180,80,42], [47,10,93,47], [121,80,25,27], [30,25,21,43], [72,75,120,50] ], options: { grouping: 'grouped', shadow: false, tickmarks: null, linewidth: 7, backgroundGridVlines: false, backgroundGridColor: 'gray', backgroundColor: '#222', noaxes: true, textColor: '#A7A5A6', textSize: 10, textAccessible: false, title: '2009 employee sales by department', titleColor: 'white', titleSize: 24, labels: ['Food','Auto','Household','Furniture','Hitchen','Bath'], gutterLeft: 50, gutterRight: 50, gutterTop: 75, gutterBottom: 60, key: ['Mary','Tom','Brad','Kate'], keyPosition: 'gutter', keyTextSize: 14, keyTextColor: 'rgb(248,248,248)', keyPositionY: 425, colors: ['#B8202C','#96D1E3','#FA8710','#62648D'] } }).on('beforedraw', function (obj) { RGraph.clear(obj.canvas, '#555557'); }).wave(); </script>