HighCharts Stock Chart error code 18

Question

I am trying to add series to my chart application using gwt-highchart (using the latest gwt-highchart 1.6.0 and Highstock 2.3.4 versions). Everything seems fine until the third series. When I try to add the third one I got this error:

com.google.gwt.core.client.JavaScriptException: (String) 
@org.moxieapps.gwt.highcharts.client.BaseChart::nativeAddSeries(Lcom/google/gwt/core
/client/JavaScriptObject;Lcom/google/gwt/core/client/JavaScriptObject;ZZ)([JavaScript 
object(4953), JavaScript object(5135), bool: true, bool: true]): Highcharts error #18:
www.highcharts.com/errors/18

And here is my code (runs within a loop):

            // Create a new serie with a new yAxis
        Series newSeries = chart.createSeries().setYAxis(index).setPlotOptions(new LinePlotOptions().setColor(tag.getColor()));

        // Set new yAxis options
        chart.getYAxis(index).setPlotLines(chart.getYAxis(index).createPlotLine().setValue(0).setWidth(1).setColor(tag.getColor())).setLabels(new YAxisLabels().setEnabled(false)).setTickLength(0).setOffset(60).setStartOnTick(false)
                .setEndOnTick(false).setGridLineWidth(0).setMaxPadding(DEFAULT_YAXIS_MAX_PADDING).setMinPadding(DEFAULT_YAXIS_MIN_PADDING)
                .setAxisTitle(new AxisTitle().setText(null).setStyle(new Style().setColor(tag.getColor())));

        // Add the serie to the chart
        chart.addSeries(newSeries.setName("Test " + index));

First two series are OK as I said before but third one throws the above exception (when I debug the application, I can see the newly created yAxis references).

Here is the line which throws the exception:

chart.addSeries(newSeries.setName("Test " + index));

Thanks

Answer 1

I've figured it out finally!

GWT-HighCharts seems to be the problem. It does not add the new YAxis to the Chart at all. So you must add YAxis via native calls like this;

private static native void nativeAddAxis(JavaScriptObject chart, JavaScriptObject axisOptions, boolean isX, boolean redraw, boolean animationFlag) /*-{
    chart.addAxis(axisOptions, isX, redraw, animationFlag);
}-*/;

Just call this native method before adding the new series.

            // Create new series
        Series newSeries = chart.createSeries().setYAxis(index);
        newSeries.setPlotOptions(new LinePlotOptions().setColor(tag.getColor()));
        newSeries.setName(index + 1 + ") ");

        // Create a new YAxis
        YAxis yAxis = chart.getYAxis(index).setPlotLines(chart.getYAxis(index).createPlotLine().setValue(0).setWidth(1).setColor(tag.getColor())).setLabels(new YAxisLabels().setEnabled(false)).setTickLength(0).setOffset(60)
                .setStartOnTick(false).setEndOnTick(false).setGridLineWidth(0).setPlotLines().setMaxPadding(DEFAULT_YAXIS_MAX_PADDING).setMinPadding(DEFAULT_YAXIS_MIN_PADDING)
                .setAxisTitle(new AxisTitle().setText(null).setStyle(new Style().setColor(tag.getColor())));

        // IMPORTANT!: New YAxis must be added to the chart via native calls since gwt-highcharts wrapper doesn't do that properly!
        nativeAddAxis(chart.getNativeChart(), yAxis.getOptions().getJavaScriptObject(), false, false, false);

        // Physical attach
        chart.addSeries(newSeries);

Answer 2

please check the index value. if index is more than the axis count this error may occur

highcharts error #18 indicates that the axis trying to access does not exist.

here is the link http://www.highcharts.com/errors/18

Hope that will help you

Answer 3

Here is the cause of this type of errors:

If you are using GWT-HighCharts wrapper, you must make the configuration before adding chart to DOM! It seems that after adding it to the DOM, any configuration changes does not seem to work at all!

Happy coding!