Drawing a line on the chart

[Shawn Quinn]

Highcharts does support adding both arbitrary plot lines to charts. E.g.:

   XAxis xAxis = chart.getXAxis();
   xAxis.setPlotLines(
     xAxis.createPlotLine()
        .setColor("#CC0000")
        .setValue(40),
     xAxis.createPlotLine()
        .setColor("#009900")
        .setValue(60)
        .setWidth(3)
        .setLabel(new PlotLineLabel()
           .setText("Hi Mom!")
        )
   );

As well as adding arbitrary plot bands to charts, e.g.:

   YAxis yAxis = chart.getYAxis();
   yAxis.setPlotBands(
      yAxis.createPlotBand()
         .setFrom(11)
         .setTo(14)
         .setColor("#FF0000")
         .setLabel(new PlotBandLabel()
            .setText("Strong breeze")
            .setStyle(new Style()
               .setColor("#606060")
            )
         )
   );

You can see an example in the Showcase example here as well:

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

Hopefully one of those will do what you need, but just let us know if you run into trouble.

[Shawn Quinn]

Thanks for the note about the JavaDoc issue. That was incorrectly referring to the "PlotOptions" type, but it should have been the "SeriesPlotOptions" type. Here's the correct example:

chart.setSeriesPlotOptions(new SeriesPlotOptions()
    .setMarker(new Marker()
        .setEnabled(true)
        .setFillColor("#CC0000")
        .setRadius(4)
    )
);

That documentation will be fixed in the next release.

Regarding the oddity you're seeing with the plot lines and labels: can you post a simply example that demonstrates the problem? I'm guessing that you've likely running into either an SVG rendering bug or an issue in the core Highcharts JS library, but I'd like to confirm that there isn't some issue with GWT Highcharts first...

[Abhijith Reddy]

Hi , I've been trying to add a method to add a plotline.
This is in Axis.java

public void addPlotLine(PlotLine line){
    if(getNativeAxis() != null){
        addPlotLine(getNativeAxis(),line.getOptions().getJavaScriptObject());
    }else{
        setPlotLines(line);
    }
}
private native void addPlotLine(JavaScriptObject axis,Object object)/*-{
    axis.addPlotLine(object);
}-*/;

This doesn't seem to do the trick, any ideas ?

[Shawn Quinn]

Thanks for coding that up! I did just give your method a try, and it works perfectly for me (sample code shown below). Note that it's important that you invoke the chart.getYAxis() or chart.getXAxis() method once before the chart is rendered in order to then properly access the same axis instance after the chart is rendered. This is due to a nuance of the way GWT Highcharts handles the axis references, which is a bit difficult to resolve for the use case when multiple axis are used within a chart. Until that is resolved though, just make sure you reference the axis instance at least once before the chart is rendered if you plan to change the axis dynamically after it is rendered as in the code shown below:

    final Chart chart = new Chart()
        .setType(Series.Type.SPLINE);

    chart.getXAxis()
        .setType(Axis.Type.DATE_TIME)
        .setTickPixelInterval(150);

    chart.getYAxis()
        .setAxisTitleText("Value");

    chart.setClickEventHandler(new ChartClickEventHandler() {
        public boolean onClick(ChartClickEvent chartClickEvent) {
            chart.getYAxis().addPlotLine(
                chart.getYAxis().createPlotLine()
                    .setValue(.2)
                    .setWidth(2)
                    .setColor("#FF0000")
            );
            return false;
        }
    });

    final Series series = chart.createSeries();
    chart.addSeries(series
        .setName("Random data")
    );

    long time = new Date().getTime();
    for (int i = -19; i <= 0; i++) {
        series.addPoint(time + i * 1000, com.google.gwt.user.client.Random.nextDouble());
    }

Can you let us know if that works for you as well? If so, we'll try add get these new methods added to the next GWT Highcharts release.

[Abhijith Reddy]

I did get it to work. This is the code i added to Axis.java

private ArrayList<PlotLine> plotlinesList = new ArrayList<PlotLine>();

public void removeAllPlotLines(){
    for(PlotLine plotline : plotlinesList){
        nativeRemovePlotLine(getNativeAxis(), plotline.getOptions().getJavaScriptObject());
    }
    plotlinesList.clear();
}

/**
 * @param line
 */
public void addPlotLine(PlotLine line){
    plotlinesList.add(line);
    if(getNativeAxis() != null){
        addNativePlotLine(getNativeAxis(),line.getOptions().getJavaScriptObject());
    }else{
        setPlotLines(line);
    }
}

private native void addNativePlotLine(JavaScriptObject axis,Object object)/*-{
    axis.addPlotLine(object);
}-*/;

private native void nativeRemovePlotLine(JavaScriptObject axis,JavaScriptObject object)/*-{
    axis.removePlotBand(object.id);
}-*/;

This works with highcharts v2.1.9 and jquery.

Great job on the Gwt-Hightcharts library !

[Abhijith Reddy]

I did get it to work. This is the code i added to Axis.java

private ArrayList<PlotLine> plotlinesList = new ArrayList<PlotLine>();

public void removeAllPlotLines(){
    for(PlotLine plotline : plotlinesList){
        nativeRemovePlotLine(getNativeAxis(), plotline.getOptions().getJavaScriptObject());
    }
    plotlinesList.clear();
}

/**
 * @param line
 */
public void addPlotLine(PlotLine line){
    plotlinesList.add(line);
    if(getNativeAxis() != null){
        addNativePlotLine(getNativeAxis(),line.getOptions().getJavaScriptObject());
    }else{
        setPlotLines(line);
    }
}

private native void addNativePlotLine(JavaScriptObject axis,Object object)/*-{
    axis.addPlotLine(object);
}-*/;

private native void nativeRemovePlotLine(JavaScriptObject axis,JavaScriptObject object)/*-{
    axis.removePlotBand(object.id);
}-*/;

This works with highcharts v2.1.9 and jquery.

Great job on the Gwt-Hightcharts library !