Vaadin Charts

19.3. Basic Use

The Chart is a regular Vaadin component, which you can add to a layout.You can give the chart type in the constructor or set it later in the chart model. A chart has a height of 400 pixels and takes full width by default, which settings you may often need to customize.

Chart chart = new Chart(ChartType.COLUMN); chart.setWidth("400px"); // 100% by default chart.setHeight("300px"); // 400px by default

The chart types are described in Section 19.4, “Chart Types”.

Configuration

After creating a chart, you need to configure it further. At the least, you need to specify the data series to be displayed in the configuration.

Most methods available in the Chart object handle its basic Vaadin component properties. All the chart-specific properties are in a separate Configuration object, which you can access with the getConfiguration() method.

Configuration conf = chart.getConfiguration(); conf.setTitle("Reindeer Kills by Predators"); conf.setSubTitle("Kills Grouped by Counties");

The configuration properties are described in more detail in Section 19.5, “Chart Configuration”.

Plot Options

Many chart settings can be configured in the plot options of the chart or data series. Some of the options are chart type specific, as described later for each chart type, while many are shared.

For example, for line charts, you could disable the point markers as follows:

// Disable markers from lines

PlotOptionsLine plotOptions = new PlotOptionsLine(); plotOptions.setMarker(new Marker(false)); conf.setPlotOptions(plotOptions);

You can set the plot options for the entire chart or for each data series separately, allowing also mixed-type charts, as described in Section 19.3.2, “Mixed Type Charts”.

The shared plot options are described in Section 19.5.1, “Plot Options”.

Chart Data

The data displayed in a chart is stored in the chart configuration as a list of Series objects. A new data series is added in a chart with the addSeries() method.

ListSeries series = new ListSeries("Diameter"); series.setData(4900, 12100, 12800,

6800, 143000, 125000, 51100, 49500);

conf.addSeries(series);

The data can be specified with a number of different series types DataSeries, ListSeries, AreaListSeries, and RangeSeries. The data configuration is described in more detail in Section 19.6, “Chart Data”.

414

Basic Use

Vaadin Charts

Axis Configuration

One of the most common tasks for charts is customizing its axes. At the least, you usually want to set the axis titles. Usually you also want to specify labels for data values in the axes.

When an axis is categorical rather than numeric, you can define category labels for the items. They must be in the same order and the same number as you have values in your data series.

XAxis xaxis = new XAxis(); xaxis.setCategories("Mercury", "Venus", "Earth",

"Mars",	"Jupiter", "Saturn",
"Uranus",	"Neptune");
xaxis.setTitle("Planet");
conf.addxAxis(xaxis);

Formatting of numeric labels can be done with JavaScript expressions, for example as follows:

// Set the Y axis title YAxis yaxis = new YAxis(); yaxis.setTitle("Diameter");

yaxis.getLabels().setFormatter(

"function() {return Math.floor(this.value/1000) + \'Mm\';}"); yaxis.getLabels().setStep(2);

conf.addyAxis(yaxis);

19.3.1. Displaying Multiple Series

The simplest data, which we saw in the examples earlier in this chapter, is one-dimensional and can be represented with a single data series. Most chart types support multiple data series, which are used for representing two-dimensional data. For example, in line charts, you can have multiple lines and in column charts the columns for different series are grouped by category. Different chart types can offer alternative display modes, such as stacked columns. The legend displays the symbols for each series.

//The data

//Source: V. Maijala, H. Norberg, J. Kumpula, M. Nieminen

//Calf production and mortality in the Finnish

//reindeer herding area. 2002.

String predators[] =			{"Bear", "Wolf", "Wolverine", "Lynx"};
int kills[][]	= {		// Location:
{8,	0,	7,	0}, // Muddusjarvi
{30,	1, 30,		2}, // Ivalo
{37,	0, 22,		2}, // Oraniemi
{13, 23,		4,	1}, // Salla
{3,	10,	9,	0}, // Alakitka
};

// Create a data series for each numeric column in the table for (int predator = 0; predator < 4; predator++) {

ListSeries series = new ListSeries(); series.setName(predators[predator]);

// The rows of the table

for (int location = 0; location < kills.length; location++) series.addData(kills[location][predator]);

conf.addSeries(series);

}

The result for both regular and stacked column chart is shown in Figure 19.3, “Multiple Series in a Chart”. Stacking is enabled with setStacking() in PlotOptionsColumn.

Axis Configuration

415

Vaadin Charts

Figure 19.3. Multiple Series in a Chart

19.3.2. Mixed Type Charts

Each data series has a PlotOptions object, just like the entire chart has, which allows using different settings for each series. This includes the chart type, so you can mix series with different chart types in the same chart.

The chart type of a series is determined by the type of the plot options. For example, to get a line chart, you need to use PlotOptionsLine.

//A data series as column graph DataSeries series1 = new DataSeries();

PlotOptionsColumn options1 = new PlotOptionsColumn(); options1.setFillColor(SolidColor.BLUE); series1.setPlotOptions(options1); series1.setData(4900, 12100, 12800,

6800, 143000, 125000, 51100, 49500);

conf.addSeries(series1);

//A data series as line graph

ListSeries series2 = new ListSeries("Diameter"); PlotOptionsLine options2 = new PlotOptionsLine(); options2.setLineColor(SolidColor.RED); series2.setPlotOptions(options2); series2.setData(4900, 12100, 12800,

6800, 143000, 125000, 51100, 49500);

conf.addSeries(series2);

416	Mixed Type Charts