Highcharts plugin "custom events"

[Johan Strand]

Hi!

I'm using Moxie GWT Highcharts and I want to use Highcharts plugin "custom events" to get access to click events on x axis labels. http://www.highcharts.com/plugin-registry/single/15/Custom-Events

In their example they're doing:

        xAxis: {
            labels: {
                events: {
                    dblclick: function () {
                       call_some_function()
                    },
                 }
               }

The equivalent in GWT Highcharts would probably look something like:

        getXAxis()
            .setLabels(new XAxisLabels()
                     .setOption("/title/events", "{click: function () {$wnd.handleXAxisLabelClick();}}")
            )

I have declared the handleXAxisLabelClick function as advided on http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html#sharing

Is this indented to work? If yes, am I doing something wrong? Can I pass a String declaring a JS function like this to setOption()?

Best regards,
s

[Johan Strand]

Any suggestions?

[Shawn Quinn]

Of course support for standard events is one of the strengths of GWT Highcharts. But, unfortunately there currently isn't a way to bridge custom Highcharts events to GWT java methods. The reason the JSNI that you attempted doesn't work is because that is simply treated as a string, and therefore not compiled as JSNI during the GWT compile process. So, I think the only clear way to do what you're attempting here is to modify the BaseChart.java class, and in particular the nativeRenderChart() method to add the new callback for the custom event you're trying to support.

(I suppose it's potentially possible that there may be a way to do this without modifying BaseChart using Highcharts new "Chart.update()" JS method in conjunction with GWT Highcharts "Chart.getNativeChart()" method, and then some JSNI magic. But I'm not quite sure how you could setup a native JS function callback with a GWT JSON object.)

Any GWT gurus out there that can propose a way that we could setup arbitrary function callbacks between Highcharts JS custom events and GWT callback methods, even if it requires some JSNI goo?

[MxBlinkPx]

I got it working like this:

setExporting(
   new Exporting()
    .setOption("/buttons", "exportButton, clearButton")
    .setOption("/buttons/exportButton/text", "Download")
    .setOption("/buttons/clearButton/text", "Clear All")
    .setContextButton((ContextButton) new ContextButton().setEnabled(false))
 );

 final Callback<String, String> callBack = new Callback<String, String>() {
        @Override
        public void onSuccess(String result) {
            System.out.println(result);
        }
        @Override
        public void onFailure(String reason) {}
    };

    Timer timer = new Timer() {
        @Override
        public void run() {
            setupDownloadHandler(getNativeChart(), getOptions().getJavaScriptObject(), callBack);   
        }
    };
    timer.schedule(2000);

private native void setupDownloadHandler(JavaScriptObject chart, JavaScriptObject options, Callback<String, String> callBack) /*-{
        options.exporting.buttons.exportButton.onclick = function(e) {
            callBack.@com.google.gwt.core.client.Callback::onSuccess(Ljava/lang/Object;)("Download");
        };
        options.exporting.buttons.clearButton.onclick = function(e) {
            callBack.@com.google.gwt.core.client.Callback::onSuccess(Ljava/lang/Object;)("Clear");
        };
        chart.update(options);

    }-*/;