Custom Date Time Format Label For XAxis Not Working

[bala]

Taking highchart demo code, I tried to format label in x axis, but unable to. I've pasted the code below. Any help is appreciated. I used chart.getXAxis().setOption("/dateTimeLabelFormats/month", "%b \'%y" to format the label in XAxis. I'm using highchart

public Chart createChart() {

    final Chart chart = new Chart()
    .setType(Series.Type.LINE)
    .setMarginRight(130)
    .setMarginBottom(25)
    .setChartTitle(
            new ChartTitle().setText("Monthly Average Temperature").setX(-20))
    .setChartSubtitle(new ChartSubtitle().setText("Source: WorldClimate.com").setX(-20))
    .setLegend(
            new Legend().setLayout(Legend.Layout.VERTICAL).setAlign(Legend.Align.RIGHT).setVerticalAlign(Legend.VerticalAlign.TOP).setX(-10).setY(100).setBorderWidth(0))
    .setToolTip(
            new ToolTip().setFormatter(new ToolTipFormatter() {
                @Override
                public String format(ToolTipData toolTipData) {
                    return "<b>" + toolTipData.getSeriesName() + "</b><br/>" + toolTipData.getXAsString() + ": " + toolTipData.getYAsDouble() + "°C";
                }
            }));

    chart.getXAxis().setType(Axis.Type.DATE_TIME);
    chart.getXAxis().setOption("/dateTimeLabelFormats/month", "%b \'%y");
    chart.getYAxis().setAxisTitleText("Temperature °C");
    LinePlotOptions linePlotOptions = new LinePlotOptions();
    chart.addSeries(chart.createSeries().setName("Tokyo").setPlotOptions(linePlotOptions).setPoints(new Number[][] { { getTime("2012-07-31"), 0 }, { getTime("2012-08-31"), 0.6 }, { getTime("2012-09-30"), 0.7 }, { getTime("2012-10-31"), 0.8 } }));

chart.addSeries(chart.createSeries().setName("New York").setPlotOptions(linePlotOptions).setPoints(new Number[][] { { getTime("2012-07-31"), 0 }, { getTime("2012-08-31"), 0.15 }, { getTime("2012-09-30"), 0.35 }, { getTime("2012-10-31"), 0.46 }}));
chart.addSeries(chart.createSeries().setName("Berlin").setPlotOptions(linePlotOptions).setPoints(new Number[][] { { getTime("2012-07-31"), 0 }, { getTime("2012-08-31"), 0.2 }, { getTime("2012-09-30"), 0.47 }, { getTime("2012-10-31"), 0.55 } }));
return chart;
}

private long getTime(String date) {
    return dateTimeFormat.parse(date).getTime();
}

[bala]

Sorry, forgot to provide the versions, here it is:

highchart.js 2.2.5
Jquery 1.7.2
GWT HighChart Wrapper 1.4.0

[bala]

Hi,
I don't see any update yet. Please advise, as I'm working on a proof of concept that'll help us to choose Highchart or not.

[raDies_chen]

Got the same with these versions.
no effect on datetimelabel formats

[Shawn Quinn]

Check out the "DateTimeLabelFormats" class, and see if that can handle what you're trying to do. There's also an example in the Showcase application that you can refer to as well if it helps:

http://www.moxiegroup.com/moxieapps/gwt-highcharts/showcase/#line-spline-irregular

Essentially, you'll want to do something like the following:

~~~~
chart.getXAxis()
.setType(Axis.Type.DATE_TIME)
.setDateTimeLabelFormats(new DateTimeLabelFormats()
.setMonth("%e. %b")
.setYear("%b")
);
~~~~~

The javadocs for DateTimeLabelFormats provide some additional detail on the formats supported as well:

http://www.moxiegroup.com/moxieapps/gwt-highcharts/apidocs/org/moxieapps/gwt/highcharts/client/DateTimeLabelFormats.html

Keep us posted if that resolves what you're trying to accomplish...