Google Charts Example With Spring Boot

We can use graphs and charts to represent the data in a user-friendly way. It also improves user engagement and makes the content easier to interpret. We can use the google charts library with the spring boot to implement charts.

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

Version details:

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

Table of Contents

Creating google charts with the spring boot application

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

Add the spring-boot-starter-web, and 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 controller 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 also 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 also have assigned the model data attribute(chartData) into a javascript variable(local_data).
  • On the page load, we arealso 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). Also, the HTML page load event will call these functions.

Time to run the application

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

Finally, we have successfully integrated Google charts into our spring MVC application.

Spring boot thymeleaf google charts example

Conclusion

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

Example code is available in GitHub.