This bar chart uses the ModalDialog which in turn uses the onmodaldialog event which is added using DOM1 style methods. Click on the canvas and a ModalDialog will be shown that uses the DOM1 style onmodaldialog event to show an alert().
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.modaldialog.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 bar = new RGraph.Bar({
id: 'cvs',
data: [4,8,5,3,4,6,8],
options: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
shadowOffsetx: 2,
shadowOffsety: 2,
shadowBlur: 2,
'background.grid.autofit.numvlines': 7,
textSize:16,
textAccessible: true
}
}).draw();
bar.onclick = function (e, shape)
{
ModalDialog.Show('string:<h1>A sample dialog</h1><center><a href="javascript:ModalDialog.Close()">Close</a></center>');
}
bar.onmousemove = function (e, shape)
{
return true;
}
ModalDialog.onmodaldialog = function (obj)
{
console.log('In the onmodaldialog DOM1 style event listener');
}
};
</script>