You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Overview · Vaadin
Vaadin Charts - Overview
 Edit This Page

Overview

Vaadin Charts is a feature-rich interactive charting library for Vaadin. It provides a Chart 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.

charts overview
Figure 1. Vaadin Charts

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 examples, which we study further in Basic Use (Java) and Basic Use (Web Components), we demonstrate how to display one-dimensional data in a column graph and customize the X and Y axis labels and titles.

Java:

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

Web Components:

<!DOCTYPE html>
<html>
<head>
  <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="bower_components/vaadin-charts/vaadin-bar-chart.html">
</head>
<body>
  <div style="width:400px;height:300px">
    <vaadin-bar-chart>
      <chart-title>Planets</chart-title>
      <subtitle>The bigger they are the harder they pull</subtitle>
      <legend>
        <enabled>false</enabled>
      </legend>
      <x-axis>
        <chart-title>Planet</chart-title>
        <categories>Mercury, Venus, Earth, Mars,
                    Jupiter, Saturn, Uranus, Neptune</categories>
      </x-axis>
      <y-axis>
        <chart-title>Diameter</chart-title>
        <labels formatter = "function () { return this.value / 1000 + 'Mm';}">
          <step>2</step>
        </labels>
      </y-axis>
      <data-series name="Diameter">
        <data>
          4900, 12100, 12800, 6800,
          143000, 125000, 51100, 49500
        </data>
      </data-series>
    </vaadin-bar-chart>
  </div>
</body>
</html>

The resulting chart is shown in Basic Chart Example.

charts basicexample
Figure 2. Basic Chart Example

Licensing

Vaadin Charts is a commercial product licensed under the CVAL License (Commercial Vaadin Add-On License). A license needs to be purchased for all use, including web deployments as well as intranet use.

The commercial licenses can be purchased from the Vaadin Directory, where you can also find the license details and download the Vaadin Charts.