Graphs are used to represent the data in a user-friendly way. It also improves user engagement and makes the content easier to interpret.

In this article, we will learn how to use google charts with spring boot and thymeleaf.

Technologies used in the article:

  • Google charts library.
  • Spring boot version: 2.2.6.RELEASE
  • Java version 1.8

Create a spring boot application

Create the spring boot application with the required dependencies. In this article, we will use the thymeleaf template for the UI screen.

Add spring-boot-starter-web, spring-boot-starter-thymeleaf maven dependencies to the application.

The below pom.xml shows the required dependencies.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.6.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.asbnotebook</groupId>
	<artifactId>spring-boot-google-charts-example</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>spring-boot-google-charts-example</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
		<maven-jar-plugin.version>3.1.1</maven-jar-plugin.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
</project>

Create the controller class

The backend service needs to pass the required data to draw the chart on the front-end UI screen.

Let’s create a controller class to pass the required data.

This class will have an HTTP GET endpoint, that adds some example data into the model attribute.

The “chartData model attribute contains the example data.

The method returns the name of the HTML page(google-charts) to be rendered.

package com.asbnotebook.controller;

import java.util.Map;
import java.util.TreeMap;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class GoogleChartsController {

	@GetMapping("/")
	public String getPieChart(Model model) {
		Map<String, Integer> graphData = new TreeMap<>();
		graphData.put("2016", 147);
		graphData.put("2017", 1256);
		graphData.put("2018", 3856);
		graphData.put("2019", 19807);
		model.addAttribute("chartData", graphData);
		return "google-charts";
	}
}

Create the Thymeleaf template page

We need to create the required UI screen to display the chart.

Create a google-charts.html page under /src/main/resources/templates/ directory. Add the below content to the created file.

The spring-boot-starter-thymeleaf starter dependency will automatically resolve the resource name returned from the controller class and loads the HTML page.

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Google Charts Example - Spring Boot</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script type="text/javascript"
	src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
	<div align="center" style="width: 1000px;">
		<h2>Spring Boot Google Charts Example</h2>
		<div id="chart_div"></div>
		<div id="piechart" style="width: 900px; height: 500px;"></div>
	</div>
	<script th:inline="javascript">
		var real_data = /*[[${chartData}]]*/'noValue';

		$(document).ready(function() {
			google.charts.load('current', {
				packages : [ 'corechart', 'bar' ]
			});
			google.charts.setOnLoadCallback(drawColumnChart);
			google.charts.setOnLoadCallback(drawPieChart);
		});

		function drawColumnChart() {
			var data = new google.visualization.DataTable();
			data.addColumn('string', 'Year');
			data.addColumn('number', 'Views');
			Object.keys(real_data).forEach(function(key) {
				data.addRow([ key, real_data[key] ]);
			});
			var options = {
				title : 'Blog stats',
				hAxis : {
					title : 'Years',
				},
				vAxis : {
					title : 'View Count'
				}
			};
			var chart = new google.visualization.ColumnChart(document
					.getElementById('chart_div'));
			chart.draw(data, options);
		}

		function drawPieChart() {
			var data = new google.visualization.DataTable();
			data.addColumn('string', 'Year');
			data.addColumn('number', 'Views');
			Object.keys(real_data).forEach(function(key) {
				data.addRow([ key, real_data[key] ]);
			});
			var options = {
				title : 'Blog stats'
			};
			var chart = new google.visualization.PieChart(document
					.getElementById('piechart'));
			chart.draw(data, options);
		}
	</script>
</body>
</html>

In the above HTML page, a few of the important parts to be noted are:

  • The header part of the HTML page contains the google chart javascript library import.
  • <script th:inline="javascript"> : This will enable the capability to assign a model attribute(from backend) to a javascript variable. We have assigned the model data attribute(chartData) into a javascript variable(local_data).
  • On the page load, we are calling jquery’s $(document).ready(), that initializes the google chart library.
  • The object of google chart DataTable class is created, before passing to draw the chart.
  • We have two javascript functions Column(drawColumnChart) and pie(drawPieChart). The HTML page load event will call these functions.

Time to run the application

Start the spring boot application. Navigate to http://localhost:8080.

We have successfully integrated Google charts into our spring MVC application !! 🙂

Spring boot thymeleaf google charts example

Conclusion

In this article, we learned how to use google charts with spring boot application with Thymeleaf.

Example code is available in the GitHub.

You may also be interested in