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

Vaadin Charts

19.4.4. Scatter Charts

Scatter charts display a set of unconnected data points. The name refers to freely given X and Y coordinates, so the DataSeries or ContainerSeries are usually the most meaningful data series types for scatter charts.

Figure 19.4. Scatter Chart

The chart type of a scatter chart is ChartType.SCATTER. Its options can be configured in a PlotOptionsScatter object, although it does not have any chart-type specific options.

Chart chart = new Chart(ChartType.SCATTER); chart.setWidth("500px"); chart.setHeight("500px");

// Modify the default configuration a bit Configuration conf = chart.getConfiguration(); conf.setTitle("Random Sphere"); conf.getLegend().setEnabled(false); // Disable legend

PlotOptionsScatter options = new PlotOptionsScatter(); // ... Give overall plot options here ...

conf.setPlotOptions(options);

DataSeriesItem point = new DataSeriesItem(x,y); Marker marker = new Marker();

// Make settings as described later point.setMarker(marker); series.add(point);

}

conf.addSeries(series);

Vaadin Charts

The result was shown in Figure 19.4, “Scatter Chart”.

Data Point Markers

Scatter charts and other charts that display data points, such as line and spline charts, visualize the points with markers.The markers can be configured with the Marker property objects available from the plot options of the relevant chart types, as well as at the level of each data point, in the DataSeriesItem. You need to create the marker and apply it with the setMarker() method in the plot options or the data series item.

For example, to set the marker for an individual data point:

DataSeriesItem point = new DataSeriesItem(x,y); Marker marker = new Marker();

// ... Make any settings ...

point.setMarker(marker);

series.add(point);

Marker Shape Properties

A marker has a lineColor and a fillColor, which are set using a Color object. Both solid colors and gradients are supported.You can use a SolidColor to specify a solid fill color by RGB values or choose from a selection of predefined colors in the class.

//Set line width and color marker.setLineWidth(1); // Normally zero width marker.setLineColor(SolidColor.BLACK);

//Set RGB fill color

int level = (int) Math.round((1-z)*127); marker.setFillColor(

new SolidColor(255-level, 0, level)); point.setMarker(marker);

series.add(point);

You can also use a color gradient with GradientColor. Both linear and radial gradients are supported, with multiple color stops.

Marker size is determined by the radius parameter, which is given in pixels. The actual visual radius includes also the line width.

marker.setRadius((z+1)*5);

Marker Symbols

Markers are visualized either with a shape or an image symbol. You can choose the shape from a number of built-in shapes defined in the MarkerSymbolEnum enum (CIRCLE, SQUARE, DIAMOND, TRIANGLE, or TRIANGLE_DOWN). These shapes are drawn with a line and fill, which you can set as described above.

marker.setSymbol(MarkerSymbolEnum.DIAMOND);

You can also use any image accessible by a URL by using a MarkerSymbolUrl symbol. If the image is deployed with your application, such as in a theme folder, you can determine its URL as follows:

String url = VaadinServlet.getCurrent().getServletContext()

.getContextPath() + "/VAADIN/themes/mytheme/img/smiley.png"; marker.setSymbol(new MarkerSymbolUrl(url));

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.

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

Vaadin Charts

Figure 19.6. Overlaid Pie and Donut Chart

19.4.6. Gauges

A gauge is an one-dimensional chart with a circular Y-axis, where a rotating pointer points to a value on the axis. A gauge can, in fact, have multiple Y-axes to display multiple scales.

Let us consider the following gauge:

Chart chart = new Chart(ChartType.GAUGE); chart.setWidth("400px"); chart.setHeight("400px");

After the settings done in the subsequent sections, it will show as in Figure 19.7, “A Gauge”.

Figure 19.7. A Gauge

Gauge Configuration

The start and end angles of the gauge can be configured in the Pane object of the chart configuration. The angles can be given as -360 to 360 degrees, with 0 at the top of the circle.