A Bar chart with a dark background

[No canvas support]

This is a grouped Bar chart, with two bars per group, which uses a red/blue graduated fill. The background grid has been customised and the background itself is a dark color (so the text has been changed to white). Also the chart is using the Bar chart wave() effect. This grows sequentially from the left hand side with a small delay between each group of bars.

The two gradients that are used here (Gradient(white:#ccf:#ccf:#ccf:#ccf) and Gradient(white:#faa:#faa:#faa:#faa) are created by using the RGraph specific gradient syntax. This is an easy way to produce gradients (it's certainly easier than the canvas API method!) and can be utilised to produce gradients for your own charts.

If you wanted to add further information to the chart in order to identify the meaning of the two bars you could add a key in either the graph or gutter modes or you could perhaps also use the labelsAbove option.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var data = [[45,56],[75,32],[39,47],[34,48],[46,47],[48,52]];

        new RGraph.Bar({
            id: 'cvs',
            data: data,
            options: {
                shadow: false,
                strokestyle: 'rgba(0,0,0,0)',
                grouping: 'grouped',
                colors: ['Gradient(white:#ccf:#ccf:#ccf:#ccf)','Gradient(white:#faa:#faa:#faa:#faa)'],
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                textColor: 'white',
                labels: ['2007','2008','2009','2011','2012','2013'],
                textAccessible: true,
                textSize: 16,
                gutterLeft: 35,
                gutterBottom: 35,
                gutterTop: 15,
                gutterRight: 5
            }
        }).wave();
    };
</script>