HOWTO: Add events to your charts

Starting from January 2012 adding events to your charts has become much easier. There are two new properties for this:

• chart.events.mousemove
• chart.events.click

These properties make adding interactivity to you charts very easy. Here's a step-by-step example of using them.

1. The chart without the event listeners

Here's the basic chart without any event listeners defined:

<script>
    var bar1 = new OfficeExcel.Bar('cvs1', [4,6,5,3,8,9]);
    bar1.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
    bar1.Draw();
</script>

2. The chart with the click event listener added

The first step would be to add the click event listener. This function is run when a bar is clicked. The function that you specify is passed two arguments - the (standard) event object, and a second array of coordinates that describe the shape. This array can (but doesn't always) contain the OfficeExcel chart object and the index of the shape. The index begins at zero - so the first bar would have an index of zero, the second bar would have an index of one and so on.

<script>

    function myClick (e, bar)
    {
        var index = bar[5];

        switch (index) {
            case 0: alert('The first bar was clicked'); break;
            case 1: alert('The second bar was clicked'); break;
            case 2: alert('The third bar was clicked'); break;
            case 3: alert('The fourth bar was clicked'); break;
            case 4: alert('The fifth bar was clicked'); break;
            case 5: alert('The sixth bar was clicked'); break;
        }
    }

    var bar2 = new OfficeExcel.Bar('cvs2', [4,6,5,3,8,9]);
    bar2.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
    bar2.Set('chart.events.click', myClick);
    bar2.Draw();
</script>

3. The chart with the mousemove event listener added

The second step is to add the mousemove event listener. This allows us to change the cursor to pointer when the mouse is moved over a bar. Because this is a common operation the pointer is automatically changed back to the previous state when it is moved away from the bar.

<script>

    function myMousemove (e, bar)
    {
        // It's automatically changed back to the previous state for you
        e.target.style.cursor = 'pointer';
    }

    function myClick (e, bar)
    {
        var index = bar[5];

        switch (index) {
            case 0: alert('The first bar was clicked'); break;
            case 1: alert('The second bar was clicked'); break;
            case 2: alert('The third bar was clicked'); break;
            case 3: alert('The fourth bar was clicked'); break;
            case 4: alert('The fifth bar was clicked'); break;
            case 5: alert('The sixth bar was clicked'); break;
        }
    }

    var bar3 = new OfficeExcel.Bar('cvs2', [4,6,5,3,8,9]);
    bar3.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
    bar3.Set('chart.events.click', myClick);
    bar3.Set('chart.events.mousemove', myMousemove);
    bar3.Draw();
</script>