Clickable Bars in js Highcharts?

Question

I have horizontal bar chart with Highcharts. How can I make each bar clickable for an event, for example like 'alert' ?

I have this series for example:

series : [{
    name: 'John',
    data: [5, 3, 4, 7, 2]
}, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1]
}, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5]
}];

What more should I do?

Prop

Answer 1

You might find the Highcharts Options Reference a good starting point.

From the reference, here's an example of a column chart where clicking a column fires an alert.

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-column/

Mitis

@Christian - link now fixed for the bar chart example. It looks like the Highcharts team still has to fix the links within their API reference, though. – Mitis

I have location bars showing status, I need to have navigate the user to a page on clicking a particular bar, can anyone tell me how to do this? – Overview

Answer 2

I needed to do a something similar. Hope it helps.

Disclaimer: I am using GWT Highcharts wrapper!

Here are the highlights of what I did:

1) I created an interface FooCallback that has a method bar( int index ) and implemented it

2) Created a method getBarClickCallback that returns a JavascriptObject (function), that has the FooCallback as a param

3) I add a click callback in the chart option /plotOptions/series/point/events/click, passing it getBarClickCallback

4) Once a bar is clicked, FooCallback.bar( int index ) is invoked

...

chart.setOption("/plotOptions/series/point/events/click",getBarClickCallback(this));

private native static JavaScriptObject getBarClickCallback(FooCallback callback) /*-{
    return function()
    {
        if( this.x !== "undefined" && this.x >= 0 ){
            [email protected]::bar(I)(this.x);
        }
    };
}-*/;

public void bar( int index ){
    //handle chosen index
}

...

Additionally I wanted to listen to category label clicks (By the way I am showing an inverted bar graph that has categories)

1) Created a method that will locate categories in the dom and add click events to them. I called it addLabelClickHandler(FooCallback callback, String chartId) and used jquery to add the events.

2) Add a ChartLoadEventHandler that calls addLabelClickHandler() that forwards params to addLabelClickHandler(FooCallback callback, String chartId)

3) Once a axis category is clicked, FooCallback.bar( int index ) is invoked ...

chart.setLoadEventHandler(new ChartLoadEventHandler() {

    @Override
    public boolean onLoad(ChartLoadEvent chartLoadEvent) {
    addLabelClickHandler();
    return false;
    }
    });

private void addLabelClickHandler(){
    addLabelClickHandler(this,chart.getElement().getId());
}

private native static void addLabelClickHandler(FooCallback callback, String chartId)/*-{
        try {
            var search = '#' + chartId + ' .highcharts-axis-labels:first text';
            $wnd.jQuery(search).each(
                    function(i, j) {
                        $wnd.jQuery(this).css("cursor", "pointer");
                        $wnd.jQuery(this).click(function() {
                            [email protected]::bar(I)(this.x);
                        });
                    });
        } catch (err) {
            console.log(err);
        }

    }-*/;

Jeff

Vazquez

Answer 3

Add click event under Plotoption

plotOptions: {
                series: {
                    point: {
                        events: {
                            click: function () {
                                    alert(this.category)
                            }
                        }
                    }
                }
            }

Honorable

Answer 4

You can do this by adding following in plotOptions > series. Example attached

        point: {
            events: {
                click: function () {
                    alert('Category: ' + this.category + ', value: ' + this.y);
                }
            }
        }

http://jsfiddle.net/tkab9f20/

Jemimah