Vaadin Charts

The line, radius, and color properties are not applicable to image symbols.

19.4.5. Pie Charts

A pie chart illustrates data values as sectors of size proportionate to the sum of all values. The pie chart is enabled with ChartType.PIE and you can make type-specific settings in the PlotOptionsPie object as described later.

Chart chart = new Chart(ChartType.PIE); Configuration conf = chart.getConfiguration();

...

A ready pie chart is shown in Figure 19.5, “Pie Chart”.

Figure 19.5. Pie Chart

Plot Options

The chart-specific options of a pie chart are configured with a PlotOptionsPie.

PlotOptionsPie options = new PlotOptionsPie(); options.setInnerSize(0); // Non-0 results in a donut options.setSize("75%"); // Default options.setCenter("50%", "50%"); // Default conf.setPlotOptions(options);

innerSize

A pie with inner size greater than zero is a "donut". The inner size can be expressed either as number of pixels or as a relative percentage of the chart area with a string (such as "60%") See the section later on donuts.

size

The size of the pie can be expressed either as number of pixels or as a relative percentage of the chart area with a string (such as "80%"). The default size is 75%, to leave space for the labels.

Pie Charts

421

Vaadin Charts

center

The X and Y coordinates of the center of the pie can be expressed either as numbers of pixels or as a relative percentage of the chart sizes with a string. The default is "50%", "50%".

Data Model

The labels for the pie sectors are determined from the labels of the data points. The DataSeries or ContainerSeries, which allow labeling the data points, should be used for pie charts.

DataSeries series = new DataSeries(); series.add(new DataSeriesItem("Mercury", 4900)); series.add(new DataSeriesItem("Venus", 12100));

...

conf.addSeries(series);

If a data point, as defined as a DataSeriesItem in a DataSeries, has the sliced property enabled, it is shown as slightly cut away from the pie.

// Slice one sector out

DataSeriesItem earth = new DataSeriesItem("Earth", 12800); earth.setSliced(true);

series.add(earth);

Donut Charts

Setting the innerSize of the plot options of a pie chart to a larger than zero value results in an empty hole at the center of the pie.

PlotOptionsPie options = new PlotOptionsPie(); options.setInnerSize("60%"); conf.setPlotOptions(options);

As you can set the plot options also for each data series, you can put two pie charts on top of each other, with a smaller one fitted in the "hole" of the donut. This way, you can make pie charts with more details on the outer rim, as done in the example below:

// The inner pie

DataSeries innerSeries = new DataSeries(); innerSeries.setName("Browsers");

PlotOptionsPie innerOptions = new PlotOptionsPie(); innerPieOptions.setSize("60%"); innerSeries.setPlotOptions(innerPieOptions);

...

DataSeries outerSeries = new DataSeries(); outerSeries.setName("Versions");

PlotOptionsPie outerOptions = new PlotOptionsPie(); outerOptions.setInnerSize("60%"); outerSeries.setPlotOptions(outerSeriesOptions);

...

The result is illustrated in Figure 19.6, “Overlaid Pie and Donut Chart”.

422	Pie Charts