Adding Flags using GWT Highcharts.

[Shawn Quinn]

Until all of the wrapper methods in the GWT StockChart API is more flushed out, you'll need to use the "setOption" method to accomplish this. Here's a functional example that shows how to add flags on a series:

final StockChart chart = new StockChart()
    .setChartTitle(new ChartTitle()
        .setText("USD to EUR")
    );

Series dataSeries = chart.createSeries()
    .setName("USD to EUR")
    .setPoints(getUSDtoEURData());
chart.addSeries(dataSeries);

chart.addSeries(chart.createSeries()
    .setOption("type", "flags")
    .setOption("onSeries", dataSeries.getOptions().get("id"))
    .setOption("shape", "circlepin")
    .setOption("width", 16)
    .setPoints(new Point[]{
        new Point(t(2011, 2, 28), 0)
            .setOption("title", "A")
            .setOption("text", "EURUSD: Bulls Clear Path to 1.50 Figure"),
        new Point(t(2011, 3, 4), 0)
            .setOption("title", "B")
            .setOption("text", "EURUSD: Rate Decision to End Standstill")
    })
);

Note that the "t()" method used in that example simply creates a java.util.Date instance for the given year/month/day.

[Shawn Quinn]

Clarification on this last post: the "t()" method used in that example simply creates a java.util.Date instance for the given year/month/day, and then returns the "getTime()" of the date. Specifically:

    static final DateTimeFormat dateTimeFormat = DateTimeFormat.getFormat("yyyy-MM-dd");

    private long t(int year, int month, int day) {
        return dateTimeFormat.parse(year + "-" + (month + 1) + "-" + day).getTime();
    }

[Robert Light]

Shawn,

I tried this on a "Chart" (not a StockChart) and couldn't get it to work... if I did a setOption("type","flags") on the series... I got the following stacktrace:

Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError): c is not a constructor at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248) at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136) at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561) at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269) at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91) at org.moxieapps.gwt.highcharts.client.BaseChart.nativeRenderChart(BaseChart.java) at org.moxieapps.gwt.highcharts.client.BaseChart.onLoad(BaseChart.java:1980) at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:350) at com.google.gwt.user.client.ui.Widget.setParent(Widget.java:475) at com.google.gwt.user.client.ui.Panel.adopt(Panel.java:127) at com.google.gwt.user.client.ui.ComplexPanel.add(ComplexPanel.java:97) at com.google.gwt.user.client.ui.AbsolutePanel.add(AbsolutePanel.java:97) at client.PerfMonEntryPoint.onModuleLoad(PerfMonEntryPoint.java:24) ... 9 more

[Shawn Quinn]

I don't believe that the generic "Highcharts" JS library supports flags (which is what the GWT Highcharts "Chart" type uses). Source: http://highslide.com/forum/viewtopic.php?f=9&t=11988

So, if you need flags you'll want to include the "Highstock" JS library in your page instead (which is what the GWT Highcharts "StockChart" type uses.)