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:

424	Area and Column Range Charts