GWT Highcharts calling Javascript using JSNI

Question

I am writing a GWT application and using highcharts. Some features are not implementable in Java but are in javascript. I was given an example of how to implement something I can use however, I do not know how to included in my code.

My code includes a variable declared as Chart graph;

I would like to implement an event as show in this answer Add tooltip to legend in highcharts when hovering

  chart: {
        type: 'column',
        events: {
            load: function () {
                var chart = this,
                    legend = chart.legend;

                for (var i = 0, len = legend.allItems.length; i < len; i++) {
                    var item = legend.allItems[i].legendItem;
                    item.on('mouseover', function (e) {
                        //show custom tooltip here
                        console.log("mouseover");
                    }).on('mouseout', function (e) {
                        //hide tooltip
                        console.log("mouseout");
                    });
                }

            }
        }

    },

How would add this capability to my code. I tried using the chart.setOption(/chart/events/load", Object o) as shown here http://www.moxiegroup.com/moxieapps/gwt-highcharts/apidocs/index.html but I could not figure a way to do it.

I assume it will be accomplished by creating a method

private native void foo(JavaScriptObject c)/*-{


}-*/;

OR

private native void foo(Chart c)/*-{


}-*/;

but I am unsure how to connect the two. Any help is appreciated!

Answer 1

First create a native method like this;

private native void foo(JavaScriptObject chart)/*-{
    var legend = chart.legend;

    for (var i = 0, len = legend.allItems.length; i < len; i++) {
        var item = legend.allItems[i].legendItem;

        item.on('mouseover', function (e) {
            //show custom tooltip here
            console.log("mouseover");
        }).on('mouseout', function (e) {
            //hide tooltip
            console.log("mouseout");
        });
    }
}-*/;

And then call this method in conjunction with setLoadEventHandler() like this;

chart.setLoadEventHandler(new ChartLoadEventHandler() {

        @Override
        public boolean onLoad(ChartLoadEvent chartLoadEvent) {
            foo(chart.getNativeChart());

            return true;
        }
    });

And that's all! Hope this will help you.