Vaadin Charts

Chart chart = new Chart(ChartType.AREARANGE); chart.setWidth("400px"); chart.setHeight("300px");

//Modify the default configuration a bit Configuration conf = chart.getConfiguration(); conf.setTitle("Extreme Temperature Range in Finland");

...

//Create the range series

//Source: http://ilmatieteenlaitos.fi/lampotilaennatyksia RangeSeries series = new RangeSeries("Temperature Extremes",

new Double[]{-51.5,10.9}, new Double[]{-49.0,11.8},

...

new Double[]{-47.0,10.8});// conf.addSeries(series);

The resulting chart, as well as the same chart with a column range, is shown in Figure 19.8, “Area and Column Range Chart”.

Figure 19.8. Area and Column Range Chart

19.4.8. Polar, Wind Rose, and Spiderweb Charts

Most chart types having two axes can be displayed in polar coordinates, where the X axis is curved on a circle and Y axis from the center of the circle to its rim. Polar chart is not a chart type in itself, but can be enabled for most chart types with setPolar(true) in the chart model parameters. Therefore all chart type specific features are usable with polar charts.

Vaadin Charts allows many sorts of typical polar chart types, such as wind rose, a polar column graph, or spiderweb, a polar chart with categorical data and a more polygonal visual style.

// Create a chart of some type

Chart char = new Chart(ChartType.LINE);

// Enable the polar projection

Configuration conf = chart.getConfiguration(); conf.getChart().setPolar(true);

You need to define the sector of the polar projection with a Pane object in the configuration. The sector is defined as degrees from the north direction. You also need to define the value range for the X axis with setMin() and setMax().

// Define the sector of the polar projection Pane pane = new Pane(0, 360); // Full circle

Polar, Wind Rose, and Spiderweb Charts

425

Vaadin Charts

conf.addPane(pane);

// Define the X axis and set its value range XAxis axis = new XAxis();

axis.setMin(0);

axis.setMax(360);

The polar and spiderweb charts are illustrated in Figure 19.9, “Wind Rose and Spiderweb Charts”.

Figure 19.9. Wind Rose and Spiderweb Charts

Spiderweb Charts

A spiderweb chart is a commonly used visual style of a polar chart with a polygonal shape rather than a circle. The data and the X axis should be categorical to make the polygonal interpolation meaningful.The sector is assumed to be full circle, so no angles for the pane need to be specified. Note the style settings done in the axis in the example below:

Chart chart = new Chart(ChartType.LINE);

...

//Modify the default configuration a bit Configuration conf = chart.getConfiguration(); conf.getChart().setPolar(true);

...

//Create the range series

//Source: http://ilmatieteenlaitos.fi/lampotilaennatyksia ListSeries series = new ListSeries("Temperature Extremes",

10.9, 11.8, 17.5, 25.5, 31.0, 33.8, 37.2, 33.8, 28.8, 19.4, 14.1, 10.8);

conf.addSeries(series);

//Set the category labels on the X axis correspondingly XAxis xaxis = new XAxis();

xaxis.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

xaxis.setTickmarkPlacement(TickmarkPlacement.ON);

xaxis.setLineWidth(0);

conf.addxAxis(xaxis);

//Configure the Y axis

YAxis yaxis = new YAxis(); yaxis.setGridLineInterpolation("polygon"); // Webby look yaxis.setMin(0);

yaxis.setTickInterval(10); yaxis.getLabels().setStep(1); conf.addyAxis(yaxis);

426	Polar, Wind Rose, and Spiderweb Charts