GWT Highcharts - Spline chart with Symbols


Advertisements

We have already seen the configuration used to draw this chart in Highcharts Configuration Syntax chapter. Let us now consider the following example to further understand a Spline chart with Symbols.

Configurations

Add symbols to a series of a chart using the marker.symbol property. It can be a preconfigured symbol like 'square', 'diamond' or a url to an image. Marker can be added at any point in the data of series as well.

chart.createSeries()  
   .setName("Tokyo")  
   .setPlotOptions(  
      new SplinePlotOptions()  
      .setMarker(  
         new Marker()  
            .setSymbol(Marker.Symbol.SQUARE)  
      )  
   )  

Example

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Point;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.XAxis;
import org.moxieapps.gwt.highcharts.client.YAxis;

import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsData;
import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsFormatter;
import org.moxieapps.gwt.highcharts.client.labels.YAxisLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.Marker;
import org.moxieapps.gwt.highcharts.client.plotOptions.SplinePlotOptions;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setType(Type.SPLINE)
         .setChartTitleText("Monthly Average Temperature")
         .setChartSubtitleText("Source: WorldClimate.com");

      XAxis xAxis = chart.getXAxis();
         xAxis.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

      YAxis yAxis = chart.getYAxis();
      yAxis.setAxisTitleText("Temperature °C");
      yAxis.setLabels(
         new YAxisLabels()
         .setFormatter(new AxisLabelsFormatter() {
            @Override
            public String format(AxisLabelsData axisLabelsData) {
               return axisLabelsData.getValueAsLong() + "°";  
            }
         })
      );

      ToolTip toolTip = new ToolTip(); 
      toolTip.setValueSuffix("°C")
         .setCrosshairs(true)
         .setShared(true);

      chart.setToolTip(toolTip);

      chart.setSplinePlotOptions(new SplinePlotOptions()  
         .setMarker(  
         new Marker()  
            .setRadius(4)  
            .setLineColor("#666666")  
            .setLineWidth(1)  
         )  
      );  

      chart.addSeries(  
         chart.createSeries()  
            .setName("Tokyo")  
            .setPlotOptions(  
               new SplinePlotOptions()  
               .setMarker(  
                  new Marker()  
                  .setSymbol(Marker.Symbol.SQUARE)  
               )  
            )  
         .setPoints(  
            new Point[]{  
               new Point(7.0),  
               new Point(6.9),  
               new Point(9.5),  
               new Point(14.5),  
               new Point(18.2),  
               new Point(21.5),  
               new Point(25.2),  
               new Point(26.5)  
               .setMarker(  
                  new Marker()  
                     .setSymbol("http://highcharts.com/demo/gfx/sun.png")  
               ),  
               new Point(23.3),  
               new Point(18.3),  
               new Point(13.9),  
               new Point(9.6)  
            }  
         )  
      );  

      chart.addSeries(     
         chart.createSeries()  
            .setName("London")  
            .setPlotOptions(  
               new SplinePlotOptions()  
                  .setMarker(  
                     new Marker()  
                        .setSymbol(Marker.Symbol.DIAMOND)  
                  )  
            )     
            .setPoints(  
               new Point[]{  
                  new Point(3.9)  
                  .setMarker(  
                     new Marker()  
                        .setSymbol("http://highcharts.com/demo/gfx/snow.png")  
                  ),  
                  new Point(4.2),  
                  new Point(5.7),  
                  new Point(8.5),  
                  new Point(11.9),  
                  new Point(15.2),  
                  new Point(17.0),  
                  new Point(16.6),  
                  new Point(14.2),  
                  new Point(10.3),  
                  new Point(6.6),  
                  new Point(4.8),  
               }  
            )  
      );  
      RootPanel.get().add(chart);
   }
}

Result

Verify the result.

Spline Chart with Symbols
gwt_highcharts_line_charts.htm
Advertisements