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

Vaadin Charts

Data points are associated with some visual representation parameters: marker style, selected state, legend index, and dial style (for gauges). Most of them can be configured at the level of individual data series items, the series, or in the overall plot options for the chart.The configuration options are described in Section 19.5, “Chart Configuration”. Some parameters, such as the sliced option for pie charts is only meaningful to configure at item level.

Adding and Removing Data Items

New DataSeriesItem items are added to a series with the add() method. The basic method takes just the data item, but the other method takes also two boolean parameters. If the updateChart parameter is false, the chart is not updated immediately. This is useful if you are adding many points in the same request.

The shift parameter, when true, causes removal of the first data point in the series in an optimized manner, thereby allowing an animated chart that moves to left as new points are added. This is most meaningful with data with even intervals.

You can remove data points with the remove() method in the series. Removal is generally not animated, unless a data point is added in the same change, as is caused by the shift parameter for the add().

Updating Data Items

If you update the properties of a DataSeriesItem object, you need to call update() method for the series with the item as the parameter. Changing the coordinates of a data point in this way causes animation of the change.

Range Data

Range charts expect the Y values to be specified as minimum-maximum value pairs. The DataSeriesItem provides setLow() and setHigh() methods to set the minimum and maximum values of a data point, as well as a number of constructors that accept the values.

RangeSeries series =

new RangeSeries("Temperature Extremes");

//Give low-high values in constructor series2.add(new DataSeriesItem(0, -51.5, 10.9)); series2.add(new DataSeriesItem(1, -49.0, 11.8));

//Set low-high values with setters DataSeriesItem point2 = new DataSeriesItem(); point2.setX(2);

point2.setLow(-44.3); point2.setHigh(17.5); series2.add(point2);

The RangeSeries offers a slightly simplified way of adding ranged data points, as described in Section 19.6.3, “Range Series”.

19.6.3. Range Series

The RangeSeries is a helper class that extends DataSeries to allow specifying interval data a bit easier, with a list of minimum-maximum value ranges in the Y axis. You can use the series in range charts, as described in Section 19.4.7, “Area and Column Range Charts”.

Vaadin Charts

For X axis, the coordinates are generated at fixed intervals starting from the value specified with the pointStart property (default is 0) at intervals specified with the pointInterval property (default is 1.0).

Setting the Data

The data in a RangeSeries is given as an array of minimum-maximum value pairs for the Y value axis. The pairs are also represented as arrays. You can pass the data using the ellipsis in the constructor or the setData():

RangeSeries series =

new RangeSeries("Temperature Ranges", new Double[]{-51.5,10.9},

new Double[]{-49.0,11.8},

...

new Double[]{-47.0,10.8}); conf.addSeries(series);

Or, as always with variable arguments, you can also pass them in an array, in the following for the setData():

series.setData(new Double[][] { new Double[]{-51.5,10.9}, new Double[]{-49.0,11.8},

...

new Double[]{-47.0,10.8}});

19.6.4. Container Data Series

The ContainerDataSeries is an adapter for binding Vaadin Container data sources to charts. The container needs to have properties that define the name, X-value, and Y-value of a data point. The default property IDs of the three properties are "name", "x", and "y", respectively. You can set the property IDs with setNamePropertyId(), setYPropertyId(), and setXPropertyId(), respectively. If the container has no x property, the data is assumed to be categorical.

In the following example, we have a BeanItemContainer with Planet items, which have a name and diameter property. We display the container data both in a Vaadin Table and a chart.

//The data BeanItemContainer<Planet> container =

new BeanItemContainer<Planet>(Planet.class); container.addBean(new Planet("Mercury", 4900)); container.addBean(new Planet("Venus", 12100)); container.addBean(new Planet("Earth", 12800));

...

//Display it in a table

Table table = new Table("Planets", container); table.setPageLength(container.size()); table.setVisibleColumns(new String[]{"name","diameter"}); layout.addComponent(table);

// Display it in a chart

Chart chart = new Chart(ChartType.COLUMN);

... Configure it ...

//Wrap the container in a data series ContainerDataSeries series =

new ContainerDataSeries(container);

//Set up the name and Y properties

Vaadin Charts

series.setNamePropertyId("name");

series.setYPropertyId("diameter");

conf.addSeries(series);

As the X axis holds categories rather than numeric values, we need to set up the category labels with an array of string. There are a few ways to do that, some more efficient than others, below is one way:

// Set the category labels on the axis correspondingly XAxis xaxis = new XAxis();

String names[] = new String[container.size()]; List<Planet> planets = container.getItemIds(); for (int i=0; i<planets.size(); i++)

names[i] = planets.get(i).getName(); xaxis.setCategories(names); xaxis.setTitle("Planet"); conf.addxAxis(xaxis);

The result can be seen in Figure 19.10, “Table and Chart Bound to a Container”.

Figure 19.10. Table and Chart Bound to a Container

19.7. Advanced Uses

19.7.1. Server-Side Rendering and Exporting

In addition to using charts in Vaadin UIs, you may also need to provide them as images or in downloadable documents. Vaadin Charts can be rendered on the server-side using a headless JavaScript execution environment, such as PhantomJS [http://phantomjs.org/].

Vaadin Charts supports a HighCharts remote export service, but the SVG Generator based on PhantomJS is almost as easy to use and allows much more powerful uses.

Using a Remote Export Service

HighCharts has a simple built-in export functionality that does the export in a remote export server. HighCharts provides a default export service, but you can also configure your own.

You can enable the built-in export function by setting setExporting(true) in the chart configuration.

chart.getConfiguration().setExporting(true);

Vaadin Charts

To configure it further, you can provide a Exporting object with custom settings.

//Create the export configuration Exporting exporting = new Exporting(true);

//Customize the file name of the download file exporting.setFilename("mychartfile.pdf");

//Enable export of raster images exporting.setEnableImages(true);

//Use the exporting configuration in the chart chart.getConfiguration().setExporting(exporting);

If you only want to enable download, you can disable the print button as follows:

ExportButton printButton = new ExportButton(); printButton.setEnabled(false); exporting.setPrintButton(printButton);

The functionality uses a HighCharts export service by default. To use your own, you need to set up one and then configure it in the exporting configuration as follows:

exporting.setUrl("http://my.own.server.com");

Using the SVG Generator

The SVGGenerator in Vaadin Charts provides an advanced way to render the Chart into SVG format on the server-side. SVG is well supported by many applications, can be converted to virtually any other graphics format, and can be passed to PDF report generators.

The generator uses PhantomJS to render the chart on the server-side.You need to install it from phantomjs.org [http://phantomjs.org/]. After installation, PhantomJS should be in your system path. If not, you can set the phantom.exec system property for the JRE to point to the PhantomJS binary.

To generate the SVG image content as a string (it's XML), simply call the generate() method in the SVGGenerator singleton and pass it the chart configuration.

String svg = SVGGenerator.getInstance()

.generate(chart.getConfiguration());

You can then use the SVG image as you like, for example, for download from a StreamResource, or include it in a HTML, PDF, or other document. You can use SVG tools such as the Batik [http://xmlgraphics.apache.org/batik/] or iText [http://itextpdf.com/] libraries to generate documents. For a complete example, you can check out the Charts Export Demo from the Subversion repository at http://dev.vaadin.com/svn/addons/vaadin-charts/chart-export-demo.