Vaadin - Charts

Maven Dependency

Install Charts by adding the dependency (here as a Maven dependency in pom.xml) to the project:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-charts-flow</artifactId>
</dependency>

 

As long as you have vaadin-bom imported, you do not need to specify the version number. Otherwise you have to specify the version number as follows:

<version>6.0.0</version>

Change the version number to the one you need.

 

If it has not already been defined, you must also define the Vaadin add-ons repository:

<repository>
   <id>vaadin-addons</id>
   <url>https://maven.vaadin.com/vaadin-addons</url>
</repository>

Installing a License Key

To develop your application with Charts, you must have a valid license. After 24 hours of opening the application with Charts in a local browser, you will see a pop-up asking you to validate your subscription. 

This pop-up will open a new tab where you must log in with your Vaadin account. If the license is valid, it will be saved to the browser's local storage, and you will not see the pop-up again.

Basic Use of Charts

The Chart class is a standard component that can be added to a layout. The chart type can be specified in the function or later in the chart model.

Syntax:

Chart chart = new Chart(ChartType.COLUMN);

//or

Chart chart = new Chart();
chart.getConfiguration().getChart().setType(ChartType.COLUMN);
...
layout.add(chart);

To display something in a chart, you must typically configure the following aspects:

• Configuration of a basic chart
• Options for plotting the chart type
• Display one or more data series
• Axes

Plot options can be set individually for each data series or for different chart types in mixed-type charts.

Basic Chart Configuration

You must configure a chart after it has been created. In the configuration, you must, at the very least, specify the data series to be displayed.

The Chart object's basic component properties are handled by most of its methods. The chart's properties are stored in a separate Configuration object, which can be accessed using the getConfiguration() method.

Configuration conf = chart.getConfiguration();
conf.setTitle("Reindeer Kills by Predators");
conf.setSubTitle("Kills Grouped by Counties");

Plot Options

Many chart settings can be configured in the chart or data series plot options. Some options are chart-type specific, as explained further below for each chart type, while many are shared.

For example, you could disable point markers in line charts by doing the following:

// Disable markers from lines
PlotOptionsLine plotOptions = new PlotOptionsLine();
plotOptions.setMarker(new Marker(false));
conf.setPlotOptions(plotOptions);

Chart Data Series

The data displayed in a chart is saved as a list of Series objects in the chart configuration. The addSeries() method adds a new data series to a chart.

The data can be specified using a variety of series types, including DataSeries, ListSeries, HeatSeries, and TreeSeries.

The versatile DataSeries, which contains DataSeriesItem items, can be used to define data point features such as names and data labels. Special chart types, such as box plots and 3D scatter charts, necessitate the use of a unique data point type.

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

Axis Configuration

Customizing the axes is one of the most common chart tasks. You should usually set the axis titles as a minimum. Labels for data values in the axes are typically specified as well.

Category labels can be assigned to the items when an axis is categorical rather than numerical. They must be in the same order and count as the values in your data series.

XAxis xaxis = new XAxis();
xaxis.setCategories("Mercury", "Venus",   "Earth",
                    "Mars",    "Jupiter", "Saturn",
                    "Uranus",  "Neptune");
xaxis.setTitle("Planet");
conf.addxAxis(xaxis);

Displaying Multiple Series

The most basic data, as seen in the examples earlier in this chapter, is one-dimensional and can be represented by a single data series. Most chart types allow for multiple data series to be used to represent two-dimensional data. 

Line charts, for example, can have multiple lines, whereas column charts group the columns for different series by category. Various chart types, such as stacked columns, can provide alternative display modes. The symbols for each series are displayed in the legend.

String predators[] = {"Lion", "Tiger", "Crocodile", "Wolf"};
int kills[][] = {       
        {8,   0,  7, 0}, 
        {30,  1, 30, 2}, 
        {37,  0, 22, 2}, 
        {13, 23,  4, 1}, 
        {3,  10,  9, 0}, 
};

// Create a data series for each numeric column in the table
for (int predator = 0; predator < 4; predator++) {
    ListSeries series = new ListSeries();
    series.setName(predators[predator]);

    // The rows of the table
    for (int location = 0; location < kills.length; location++)
        series.addData(kills[location][predator]);
    conf.addSeries(series);
}

 

Output:

Mixed Type Charts

You can enable mixed charts by overriding the default chart type set in the Chart object by setting the chart type in the PlotOptions object for a data series. You can also control the animation and other series settings in the plot options.

For example, to create a line chart, use PlotOptionsLine.

// A data series as a column graph
DataSeries series1 = new DataSeries();
PlotOptionsColumn options1 = new PlotOptionsColumn();
series1.setPlotOptions(options1);
series1.setData(4900,  12100,  12800,
    6800,  143000, 125000, 51100, 49500);
conf.addSeries(series1);

// A data series as a line graph
ListSeries series2 = new ListSeries("Diameter");
PlotOptionsLine options2 = new PlotOptionsLine();
series2.setPlotOptions(options2);
series2.setData(4900,  12100,  12800,
    6800,  143000, 125000, 51100, 49500);
conf.addSeries(series2);

 

The overall chart type is irrelevant in this case because we set the chart type for each series.

Frequently Asked Questions

Is Vaadin capable of handling large applications?

Yes, the client JavaScript size is not dependent on the app size when using the server-side Flow framework, so a 100-view application loads just as quickly as a single-view application.

Client-side Hilla apps can delay loading views or parts of the app until they are required. You can ensure that your build automatically bundles code in an optimal way by using dynamic import() statements.

Can Vaadin be used to create PWAs?

Yes. By default, Vaadin applications are progressive web apps. The starters create a manifest file and a service worker for an offline fallback page. Colors, icons, and the offline page can all be customized.

How are Vaadin apps unit tested?

For unit testing, you can use JUnit or any other Java framework. Vaadin Test Bench can also be used to implement integration tests that interact with your application and allow you to verify conditions on these interactions.

Conclusion

In this article, we have extensively discussed the Vaadin basic layouts. We started by introducing the basics of the Vaadin charts. Afterward, we discussed installing Vaadin charts for Vaadin flow, the maven dependency, and installing a license key. 

We also discussed using vaadin charts by going through basic chart configuration, plot options, chart data series, and axis configuration. At last, we discussed how to display multiple series and mixed-type charts, concluding our discussion of Vaadin charts.

If you think this blog has helped you with Vaadin basic layouts, and if you want to learn more, check out our articles 

• Vaadin Combo Box, 
• Vaadin Context Menu, 
• Vaadin User Interface Component, and 
• Vaadin Layout Component
   

You can also refer to our guided path on the basics of java and many more on our Website.

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, JavaScript, System Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! 

But suppose you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problems, interview experiences, and interview bundle for placement preparations.

Nevertheless, you may consider our paid courses to give your career an edge over others!

Happy Learning!