<script>
ca = document.getElementById("cvs");
data = [15,14,12,18,16,13];
data_drilldown = [];
// The drilldown data - the order corresponds to that of the labels
data_drilldown.push([2,3,1,2,3,1,3]);
data_drilldown.push([2,2,2,1,2,2,3]);
data_drilldown.push([1,1,1,2,3,2,2]);
data_drilldown.push([3,3,3,2,3,3,1]);
data_drilldown.push([4,3,1,1,3,2,2]);
data_drilldown.push([3,2,2,2,3,1,0]);
labels = ['John','Fred','Luis','Kevin','Lola','June'];
bar = drawMainChart();
// Draws the main chart
function drawMainChart ()
{
RGraph.reset(ca);
var bar = new RGraph.Bar({
id: 'cvs',
data: data,
options: {
xaxisLabels: labels,
bevelled: true,
title: 'The whole teams statistics for sales of widgets',
backgroundGridVlinesCount: data.length,
colorsStroke:'rgba(0,0,0,0)',
shadow: true
}
}).fadeIn();
// When a bar is clicked show a more detailed breakdown
bar.onclick = function (e, shape)
{
var obj = e.target.__object__;
var ca = obj.canvas;
var idx = shape.index;
// Slide the old bar out
obj.fadeOut(null, function ()
{
RGraph.reset(ca);
var bar = new RGraph.Bar({
id: 'cvs',
data: data_drilldown[idx],
options: {
xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
bevelled: true,
colorsStroke: 'rgba(0,0,0,0)',
title: 'Specific statistics for: ' + labels[idx],
backgroundGridVlinesCount: 7
}
}).fadeIn();
});
}
// The onmousemove event to change the cursor
bar.onmousemove = function (e, shape)
{
return true;
}
return bar;
}
document.getElementById("butBack").onclick = function (e)
{
var obj = ca.__object__;
obj.fadeOut(null,function ()
{
var bar = drawMainChart();
});
}
</script>