- GWT Highcharts Tutorial
- GWT Highcharts - Home
- GWT Highcharts - Overview
- Environment Setup
- Configuration Syntax
- GWT Highcharts - Line Charts
- GWT Highcharts - Area Charts
- GWT Highcharts - Bar Charts
- GWT Highcharts - Column Charts
- GWT Highcharts - Pie Charts
- GWT Highcharts - Scatter Chart
- GWT Highcharts - Dynamic Charts
- GWT Highcharts - Combinations
- GWT Highcharts - 3D Charts
- GWT Highcharts - Map Charts
- GWT Highcharts Useful Resources
- GWT Highcharts - Quick Guide
- GWT Highcharts - Useful Resources
- GWT Highcharts - Discussion
GWT Highcharts - Spline chart with Symbols
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.
gwt_highcharts_line_charts.htm
Advertisements