A Line chart showing employee sales

[No canvas support]

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).


This goes in the documents header:
<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>

A Bar chart version of the chart

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.

[No canvas support]

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>