A basic example of a Pie chart that uses the pseudo events

[No canvas support]

This is a basic example of the Line chart that shows you how to use the pseudo-events that RGraph has:

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.

This goes in the documents header:
<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="300" height="250">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    window.onload = function ()
    {
        /**
        * 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 mouseover'ed
        */
        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] + ')');
        }


        var bar = new RGraph.Pie({
            id: 'cvs',
            data: [12,13,16,15,16],
            options: {
                textAccessible: true,
                eventsMousemove: myMousemove,
                eventsClick: myClick,
                labels: ['Charly','Lou','Pete','Jim','Fred']
            }
        }).draw();
    };
</script>

Share on Facebook Share on Twitter