A Line chart showing employee sales
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:
<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,
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>
« Back