Pseudo-standard events

Normally, if you apply an onclick listener to the canvas it will apply to the whole canvas. OfficeExcel provides a way to add event listeners to your chart so that the event listeners apply only to the appropriate areas. In the case of the Bar chart on the right this means the actual bars themselves. You can see the effect here when you click on a bar - you get an alert. And when you click on a non-bar area - nothing happens.

You can use the properties:

chart.events.click
chart.events.mousemove

To add your listeners to the chart. The listener is simply a function that is called when the event fires. Only one function can be specified, so you need to check the index to see if the bar is the one you want.

<script>
    /**
    * This is the function that is run when the event fires.
    */
    function myClick (e, bar)
    {
        var obj = bar[0];
        var x   = bar[1];
        var y   = bar[2];
        var w   = bar[3];
        var h   = bar[4];
        var idx = bar[5];
        
        alert('The onclick listener just fired...!');
    }

    var myBar = new OfficeExcel.Bar('cvs', [4,5,8,4,6,8,5]);
    myBar.Set('chart.labels', ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']);
    myBar.Set('chart.colors', ['blue']);
    myBar.Set('chart.events.mousemove', function (e, bar) {e.target.style.cursor = 'pointer';});
    myBar.Set('chart.events.click', myClick); // The myClick function is the one above
    OfficeExcel.Effects.Bar.Wave2(myBar);
</script>

Note

If you want the mouse pointer to change to the hand when you move the mouse over a bar you need to do as shown below in the chart.events.mousemove event with the CSS cursor property. When you move the mouse away from the bar the pointer will be restored to its previous state. Like this:

obj.Set('chart.events.mousemove', function (e, bar) {e.target.style.cursor = 'pointer';});