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