How to create a custom Exporting button

[Jim Brown]

Hi,

I need to create a custom Exporting button and have it fire a method for exporting the data that backs my chart in Excel format.

I've figured out how to get the button positioned on the chart and formatted the way I want, but for the life of me I cannot figure out how to make the 'onclick' code work.

Here is my code snippet that defines the button:

  .setExporting(new Exporting()
      .setOption("url", "https://export.highcharts.com")
      .setOption("buttons/customButton/symbol", "url(static/icon-data-download-15.png)")
      .setOption("buttons/customButton/symbolFill", "#B5C9DF")
      .setOption("buttons/customButton/hoverSymbolFill", "#779ABF")
      .setOption("buttons/customButton/_titleKey", "downloadExcel")
      .setOption("buttons/customButton/onclick", "function () { alert('wtf?'); }")
   )

When I click the button I get the following error:

        Uncaught TypeError: undefined is not a function

I found a lot of references to pure Highcharts examples using the embedded Javascript like shown above. I've also tried defining a JSNI function in my GWT Java client code and referencing it in the .SetOption onclick but that doesn't work either.

Does anybody know what I'm doing wrong?

[Shawn Quinn]

I don't believe GWT Highcharts has built-in wrapper methods available for custom button event callbacks (not sure if that "exporting.buttons.customButton" is even a documented feature of Highcharts yet?). So, to support this you probably would need to resort to JSNI. You can take a look at the BaseChart.nativeRenderChart() method for an idea of how the Javascript to Java callbacks are wired up for events.

[Jim Brown]

Thanks Shawn. Yes, JSNI did the trick, like this.

Javascript In my containing HTML file:

function rqtExcel_js(msg) {
    alert(msg);
}

I moved the entire custom button definition into a JavaScriptObject:

private static native JavaScriptObject rqtExcel(String msg) /*-{
    var code = {
        _id:                "csv_export",
        symbol:             "url(static/icon-data-download-15.png)",
        symbolFill:         "#B5C9DF",
        hoverSymbolFill:    "#779ABF",
        _titleKey:          "downloadExcel",
        onclick:            function() { $wnd.rqtExcel_js (msg) }
    };
    return code;
}-*/;

And then called .setExporting like this:

.setExporting(new Exporting()
    .setOption("url", "https://export.highcharts.com")
    .setOption("buttons/customButton", rqtExcel("Finally!"))
)