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

DataSeries	series = new DataSeries();
for (int i=0; i<300; i++) {
double	lng = Math.random() * 2 * Math.PI;
double	lat	= Math.random() * Math.PI - Math.PI/2;
double	x	= Math.cos(lat) * Math.sin(lng);
double	y	= Math.sin(lat);
double	z	= Math.cos(lng) * Math.cos(lat);

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

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

}

conf.addSeries(series);

Scatter Charts

419

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

420	Scatter Charts