This is a basic example of the Line chart that shows you how to use the pseudo-events that RGraph has:
eventsClick
eventsMousemove
Here the mousemove
event is used to change the mouse cursor
(it's automatically changed back for you). And the click
event
is used to show an alert.
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.pie.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="400" height="250"> [No canvas support] </canvas>This is the code that generates the chart:
<script> /** * This is the function for the mousemove event. It changes the pointer to the hand. * When the mouse is moved away from the segment the pointer is changed back to what it was * automatically for you. * * @param object e The event object * @param array segment The details of the segment that was hovered over */ function myMousemove (e, segment) { return true; } /** * This is the function for the click event. * * @param object e The event object * @param array segment The details of the segment that was clicked */ function myClick (e, segment) { alert('A segment was clicked (with index: ' + segment[5] + ')'); } new RGraph.Pie({ id: 'cvs', data: [12,13,16,15,16], options: { eventsMousemove: myMousemove, eventsClick: myClick, labels: ['Charly','Lou','Pete','Jim','Fred'] } }).draw(); </script>