The Pseudo-standard events dollar syntax

Recommend RGraph:  
    Read comments...

Summary
Documentation about the pseudo-standard events dollar syntax that is new in October 2012. This syntax allows you to add event listeners to individual elements in you charts.

[No canvas support]

The new syntax for adding pseudo-standard events is new in October 2012 and allows you to add events to specific elements on your chart - bars/points/segments etc. The Pie chart here shows how you can easily add click, mousemove and mouseover event listeners to your charts to trigger custom actions (eg alerts, redirections, popups, ModalDialogs etc). The sample code below shows how simple the code for this chart is.


Update April 2016 Now, if the mousemove event handler function returns a value that is "truthy" (ie: true, 1, [], {}, function () {} etc) then the mouse cursor shape is changed to pointer. If not then it remains at default
<script>
    window.onload = function ()
    {
        // Create the Pie chart
        var pie = new RGraph.Pie({
            id: 'cvs',
            data: [4,6,3,5,2,5,8],
            options: {
                labels: ['Monday', 'Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                exploded: []
                textAccessible: true,
                textSize: 14
            }
        }).draw()
        
            
        // Add the click listener
        pie.$1.onclick = function (e, shape)
        {
            if (!pie.get('exploded') || !pie.get('exploded')[1]) {
                pie.set('exploded', [,25]);
                RGraph.redraw();
            }

            // Stops the window.onclick event from firing
            e.stopPropagation();
        }
        
        // Add the mousemove listener
        pie.$1.onmousemove = function (e, shape)
        {
            // If the mousemove event handler returns true then the mouse
            // is changed to a pointer shape.
            return true;
        }

        // Add the window click listener that resets the Pie chart
        window.addEventListener('click', function (e)
        {
            pie.set('exploded', []);
            RGraph.redraw();
        }, false);
    }
</script>

Comments