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 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',
xaxis: false,
yaxis: 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');
// Use the trace effect to show the chart and add some responsive capability to accommodate
// smaller screens.
}).trace().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'}}
]);
</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.
<script>
// A Bar chart version of the Line chart that's shown above. With
// the Bar chart the data is arranged differently to the Line chart -
// each set of numbers is actually just one group of bars on the chart.
// Other than this the configuration is much the same as the Line
// chart.
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,
tickmarksStyle: null,
linewidth: 7,
backgroundGridVlines: false,
backgroundGridColor: 'gray',
colorsBackground: '#222',
xaxis: false,
yaxis: false,
textColor: '#d7d5d6',
textSize: 12,
title: '2009 employee sales by department',
titleColor: 'white',
xaxisLabels: ['Food','Auto','Misc','Furniture','Bath','Kitchen'],
marginTop: 75,
marginBottom: 60,
key: ['Mary','Tom','Brad','Kate'],
keyPosition: 'margin',
keyLabelsSize: 14,
keyLabelsColor: 'rgb(248,248,248)',
keyPositionY: 425,
colors: ['#B8202C','#96D1E3','#FA8710','#62648D']
}
// Again, the beforedraw function is used to clear the canvas to
// a dark color before the chart is drawn.
}).on('beforedraw', function (obj)
{
RGraph.clear(obj.canvas, '#555557');
// Use the wave effect to show the chart and add some responsive capability to accommodate
// smaller screens.
}).wave().responsive([
{maxWidth:null,width:575,height:450,options:{marginLeft: 50,marginRight: 50,marginTop: 75,titleSize: 24,keyPositionY: 425}},
{maxWidth:900,width:400,height:300,options:{marginLeft: 40,marginRight: 15,marginTop: 55,titleSize: 17,keyPositionY: 275}}
]);
</script>