A Line chart showing employee sales

View the bare-bones version of this demo with any interactive features or animations enabled

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

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:

<div style="text-align: center">
    <canvas id="cvs" width="575" height="450">[No canvas support]</canvas>
</div>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):

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

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 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 - it should be placed AFTER the canvas tag(s):

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