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

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”.

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",

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.

// 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.

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

Vaadin Charts

19.3.3. Chart Themes

The visual style and essentially any other chart configuration can be defined in a theme. The theme is global in the UI and can be set with the setTheme() in the thread-local ChartTheme singleton.

ChartTheme.get().setTheme(new SkiesTheme());

The VaadinTheme is the default chart theme in Vaadin Charts. Other available themes are GrayTheme, GridTheme, and SkiesTheme. The default theme in Highcharts can be set with the HighChartsDefaultTheme.

A theme is a Vaadin Charts configuration that is used as a template for the configuration when rendering the chart.

19.4. Chart Types

Vaadin Charts comes with over a dozen different chart types.You normally specify the chart type in the constructor of the Chart object. The available chart types are defined in the ChartType enum. You can later read or set the chart type with the chartType property of the chart model, which you can get with getConfiguration().getChart().

Each chart type has its specific plot options and support its specific collection of chart features. They also have specific requirements for the data series.

The basic chart types and their variants are covered in the following subsections.

19.4.1. Line and Spline Charts

Line charts connect the series of data points with lines. In the basic line charts the lines are straight, while in spline charts the lines are smooth polynomial interpolations between the data points.

Table 19.1. Line Chart Subtypes

Plot Options

The color property in the line plot options defines the line color, lineWidth the line width, and dashStyle the dash pattern for the lines.

See Section 19.4.4, “Scatter Charts” for plot options regarding markers and other data point properties. The markers can also be configured for each data point.

19.4.2. Area Charts

Area charts are like line charts, except that the area between the line and the Y axis is painted with a transparent color. In addition to the base type, chart type combinations for spline interpolation and ranges are supported.

In area range charts, the area between a lower and upper value is painted with a transparent color. The data series must specify the minimum and maximum values for the Y coordinates, defined either with RangeSeries, as described in Section 19.6.3, “Range Series”, or with DataSeries, described in Section 19.6.2, “Generic Data Series”.

Plot Options

Area charts support stacking, so that multiple series are piled on top of each other. You enable stacking from the plot options with setStacking(). The Stacking.NORMAL stacking mode does a normal summative stacking, while the Stacking.PERCENT handles them as proportions.

The fill color for the area is defined with the fillColor property and its transparency with fillOpacity (the opposite of transparency) with a value between 0.0 and 1.0.

The color property in the line plot options defines the line color, lineWidth the line width, and dashStyle the dash pattern for the lines.

See Section 19.4.4, “Scatter Charts” for plot options regarding markers and other data point properties. The markers can also be configured for each data point.

19.4.3. Column and Bar Charts

Column and bar charts illustrate values as vertical or horizontal bars, respectively. The two chart types are essentially equivalent, just as if the orientation of the axes was inverted.

Multiple data series, that is, two-dimensional data, are shown with thinner bars or columns grouped by their category, as described in Section 19.3.1, “Displaying Multiple Series”. Enabling stacking with setStacking() in plot options stacks the columns or bars of different series on top of each other.

You can also have COLUMNRANGE charts that illustrate a range between a lower and an upper value, as described in Section 19.4.7, “Area and Column Range Charts”. They require the use of RangeSeries for defining the lower and upper values.

Table 19.3. Column and Bar Chart Subtypes

See the API documentation for details regarding the plot options.