Vaadin

Vaadin Charts is a feature-rich interactive charting library for Vaadin. It provides a Chart and a Timeline component. The Chart can visualize one- and two-dimensional numeric data in many available chart types. The charts allow flexible configuration of all the chart elements as well as the visual style. The library includes a number of built-in visual themes, which you can extend further. The basic functionalities allow the user to interact with the chart elements in various ways, and you can define custom interaction with click events. The Timeline is a specialized component for visualizing time series, and is described in Section 18.8, “Timeline”.

The data displayed in a chart can be one- or two dimensional tabular data, or scatter data with free X and Y values. Data displayed in range charts has minimum and maximum values instead of singular values.

This chapter covers the basic use of Vaadin Charts and the chart configuration. For detailed documentation of the configuration parameters and classes, please refer to the JavaDoc API documentation of the library.

In the following basic example, which we study further in Section 18.3, “Basic Use”, we demonstrate how to display one-dimensional data in a column graph and customize the X and Y axis labels and titles.

Chart chart = new Chart(ChartType.BAR);
chart.setWidth("400px");
chart.setHeight("300px");
        
// Modify the default configuration a bit
Configuration conf = chart.getConfiguration();
conf.setTitle("Planets");
conf.setSubTitle("The bigger they are the harder they pull");
conf.getLegend().setEnabled(false); // Disable legend

// The data
ListSeries series = new ListSeries("Diameter");
series.setData(4900,  12100,  12800,
               6800,  143000, 125000,
               51100, 49500);
conf.addSeries(series);

// Set the category labels on the axis correspondingly
XAxis xaxis = new XAxis();
xaxis.setCategories("Mercury", "Venus",   "Earth",
                    "Mars",    "Jupiter", "Saturn",
                    "Uranus",  "Neptune");
xaxis.setTitle("Planet");
conf.addxAxis(xaxis);

// 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);
        
layout.addComponent(chart);

The resulting chart is shown in Figure 18.2, “Basic Chart Example”.

Vaadin Charts is based on Highcharts JS, a charting library written in JavaScript.