Vaadin Charts

19.6. Chart Data

Chart data is stored in data series model, which contains visual representation information about the data points in addition to their values. There are a number of different types of series -

DataSeries, ListSeries, AreaListSeries, and RangeSeries.

19.6.1. List Series

The ListSeries is essentially a helper type that makes the handling of simple sequential data easier than with DataSeries. The data points are assumed to be at a constant interval on the X axis, starting from the value specified with the pointStart property (default is 0) at intervals specified with the pointInterval property (default is 1.0). The two properties are defined in the PlotOptions for the series.

The Y axis values are given in a List<Number>, or with ellipsis or an array.

ListSeries series = new ListSeries( "Total Reindeer Population", 181091, 201485, 188105, ...);

series.getPlotOptions().setPointStart(1959); conf.addSeries(series);

You can also add them one by one with the addData() method, which is typical when converting from some other representation.

// Original representation

int data[][] = reindeerData();

//Create a list series with X values starting from 1959 ListSeries series = new ListSeries("Reindeer Population"); series.getPlotOptions().setPointStart(1959);

//Add the data points

for (int row[]: data) series.addData(data[1]);

conf.addSeries(series);

If the chart has multiple Y axes, you can specify the axis for the series by its index number with setyAxis().

19.6.2. Generic Data Series

The DataSeries can represent a sequence of data points at an interval as well as scatter data. Data points are represented with the DataSeriesItem class, which has x and y properties for representing the data value. Each item can be given a category name.

DataSeries series = new DataSeries(); series.setName("Total Reindeer Population"); series.add(new DataSeriesItem(1959, 181091)); series.add(new DataSeriesItem(1960, 201485)); series.add(new DataSeriesItem(1961, 188105)); series.add(new DataSeriesItem(1962, 177206));

// Modify the color of one point series.get(1960, 201485)

.getMarker().setFillColor(SolidColor.RED); conf.addSeries(series);

Chart Data

429