Файл: book-of-vaadin.pdf

Vaadin Charts

Configuration conf = chart.getConfiguration(); conf.setTitle("Speedometer"); conf.getPane().setStartAngle(-135); conf.getPane().setEndAngle(135);

Axis Configuration

A gauge has only an Y-axis. You need to provide both a minimum and maximum value for it.

YAxis yaxis = new YAxis(); yaxis.setTitle("km/h");

//The limits are mandatory yaxis.setMin(0); yaxis.setMax(100);

//Other configuration yaxis.getLabels().setStep(1); yaxis.setTickInterval(10); yaxis.setPlotBands(new PlotBand[]{

new PlotBand(0, 60, SolidColor.GREEN), new PlotBand(60, 80, SolidColor.YELLOW), new PlotBand(80, 100, SolidColor.RED)});

conf.addyAxis(yaxis);

You can do all kinds of other configuration to the axis - please see the API documentation for all the available parameters.

Setting and Updating Gauge Data

A gauge only displays a single value, which you can define as a data series of length one, such as as follows:

ListSeries series = new ListSeries("Speed", 80); conf.addSeries(series);

Gauges are especially meaningful for displaying changing values. You can use the updatePoint() method in the data series to update the single value.

final TextField tf = new TextField("Enter a new value"); layout.addComponent(tf);

Button update = new Button("Update", new ClickListener() { @Override

public void buttonClick(ClickEvent event) {

Integer newValue = new Integer((String)tf.getValue()); series.updatePoint(0, newValue);

}

});

layout.addComponent(update);

19.4.7. Area and Column Range Charts

Ranged charts display an area or column between a minimum and maximum value, instead of a singular data point. They require the use of RangeSeries, as described in Section 19.6.3, “Range Series”. An area range is created with AREARANGE chart type, and a column range with

COLUMNRANGE chart type.

Consider the following example:

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

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);

Vaadin Charts

19.5. Chart Configuration

All the chart content configuration of charts is defined in a chart model in a Configuration object. You can access the model with the getConfiguration() method.

The configuration properties in the Configuration class are summarized in the following:

•credits: Credits (text, position, href, enabled)

•labels: HTMLLabels (html, style)

•lang: Lang (decimalPoint, thousandsSep, loading)

•legend: Legend (see Section 19.5.3, “Legend”)

•pane: Pane

•plotoptions: PlotOptions (see Section 19.5.1, “Plot Options”

•series: Series

•subTitle: SubTitle

•title: Title

•tooltip: Tooltip

•xAxis: XAxis (see Section 19.5.2, “Axes”

•yAxis: YAxis (see Section 19.5.2, “Axes”

For data configuration, see Section 19.6, “Chart Data”.

19.5.1. Plot Options

The plot options can be set in the configuration of the entire chart or for each data series separately. Some of the plot options are chart type specific, defined in type-specific options classes, which all extend AbstractPlotOptions.

You need to create the plot options object and set them either for the entire chart or for a data series with setPlotOptions().

For example, the following enables stacking in column charts:

PlotOptionsColumn plotOptions = new PlotOptionsColumn(); plotOptions.setStacking(Stacking.NORMAL); conf.setPlotOptions(plotOptions);

See the API documentation of each chart type and its plot options class for more information about the chart-specific options, and the AbstractPlotOptions for the shared plot options.

19.5.2. Axes

Many chart types have two axes, X and Y, which are represented by XAxis and YAxis classes. The X axis is usually horizontal, representing the iteration over the data series, and Y vertical, representing the values in the data series. Some chart types invert the axes and they can be