A bar chart with horizontal gradients

This bar chart draws the chart then uses the coordinates of the bars to create gradients (each is specific to a bar), changes the colors to the gradients and finally redraws the chart.

[No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.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>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,8,5,3,4,6,8],
        options: {
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            colorsSequential: true,
            shadowColor: '#999',
            shadow: true,
            shadowOffsetx: 0,
            shadowOffsety: 0,
            shadowBlur: 15,
            colorsStroke: 'rgba(0,0,0,0)',
            backgroundGridVlinesCount: 7,
            yaxis: false
        }
    }).draw();


    // Now the chart has been drawn use the coords to create some appropriate gradients
    var colors = [];

    for(var i=0; i<bar.coords.length; ++i) {
        // Because it's a horizontal gradient the Y coords don't matter
        x1 = bar.coords[i][0];
        y1 = 0;
        x2 = bar.coords[i][0] + bar.coords[i][2];
        y2 = 0;
        
        colors[i] = RGraph.linearGradient(bar, x1, y1, x2, y2, '#c00','red');
    }

    bar.set('colors', colors);
    RGraph.clear(bar.canvas);
    RGraph.redraw();
</script>