Google Chart in Spring MVC Framework

This project will demonstrate how to Build Google Chart in Spring MVC Framework

  • SpringMVCFramework
    • src/main/java
      • com.demo
        • SpringMVCFramework.java
      • com.demo.controllers
        • DemoController.java
      • com.demo.entities
        • Product.java
      • com.demo.models
        • ProductModel.java
    • src/main/resources
      • static
      • templates
      • application.properties
    • src
      • main
        • webapp
          • WEB-INF
            • views
              • demo
                • index.jsp
    • pom.xml
package com.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringMVCFramework {

    public static void main(String[] args) {
        SpringApplication.run(SpringMVCFramework.class, args);
    }
}
package com.demo.controllers;

import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.demo.entities.Product;
import com.demo.models.ProductModel;

@Controller
@RequestMapping(value = { "", "chart" })
public class ChartController {

    @RequestMapping(method = RequestMethod.GET)
    public String index() {
        return "chart/index";
    }

    @RequestMapping(value = "data", method = RequestMethod.GET)
    @ResponseBody
    public List<Product> data() {
        ProductModel productModel = new ProductModel();
        return productModel.findAll();
    }

}
package com.demo.entities;

public class Product {

    private String id;
    private String name;
    private double price;
    private int quantity;

    public int getQuantity() {
        return quantity;
    }

    public void setQuantity(int quantity) {
        this.quantity = quantity;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public Product(String id, String name, double price, int quantity) {
        this.id = id;
        this.name = name;
        this.price = price;
        this.quantity = quantity;
    }

    public Product() {
    }

}
package com.demo.models;

import java.util.ArrayList;
import java.util.List;

import com.demo.entities.Product;

public class ProductModel {

    public List<Product> findAll() {
        List<Product> products = new ArrayList<Product>();
        products.add(new Product("p01", "Product 1", 20, 5));
        products.add(new Product("p02", "Product 2", 21, 16));
        products.add(new Product("p03", "Product 3", 22, 3));
        products.add(new Product("p04", "Product 4", 23, 20));
        products.add(new Product("p05", "Product 5", 24, 8));
        return products;
    }

}
spring.mvc.view.prefix = /WEB-INF/views/
spring.mvc.view.suffix = .jsp
spring.mvc.static-path-pattern=/resources/**

server.port=9596
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
            pageEncoding="ISO-8859-1" isELIgnored="false"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Google Chart in JSP-Servlet</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
    $(document).ready(function() {

        $.ajax({
            type : 'GET',
            headers : {
                Accept : "application/json; charset=utf-8",
                "Content-Type" : "application/json; charset=utf-8"
            },
            url : '${pageContext.request.contextPath}/chart/data',
            success : function(result) {
                google.charts.load('current', {
                    'packages' : [ 'corechart' ]
                });
                google.charts.setOnLoadCallback(function() {
                    drawChart(result);
                });
            }
        });

        function drawChart(result) {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('number', 'Quantity');
            var dataArray = [];
            $.each(result, function(i, obj) {
                dataArray.push([ obj.name, obj.quantity ]);
            });

            data.addRows(dataArray);

            var piechart_options = {
                title : 'Pie Chart: How Much Products Sold By Last Night',
                width : 400,
                height : 300
            };
            var piechart = new google.visualization.PieChart(document
                    .getElementById('piechart_div'));
            piechart.draw(data, piechart_options);

            var barchart_options = {
                title : 'Barchart: How Much Products Sold By Last Night',
                width : 400,
                height : 300,
                legend : 'none'
            };
            var barchart = new google.visualization.BarChart(document
                    .getElementById('barchart_div'));
            barchart.draw(data, barchart_options);
        }

    });
</script>

</head>
<body>

    <table class="columns">
        <tr>
            <td><div id="piechart_div" style="border: 1px solid #ccc"></div></td>
            <td><div id="barchart_div" style="border: 1px solid #ccc"></div></td>
        </tr>
    </table>

</body>
</html>
<?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
                                    http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>com.demo</groupId>
<artifactId>LearnSpringMVCWithRealApps</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>

<name>LearnSpringMVCWithRealApps</name>
<description>Learn Spring MVC with Real Apps</description>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.2.RELEASE</version>
    <relativePath /> <!-- lookup parent from repository -->
</parent>

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
</properties>

<dependencies>

    <!-- Spring MVC  -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- JSTL tag lib -->
    <dependency>
        <groupId>javax.servlet.jsp.jstl</groupId>
        <artifactId>javax.servlet.jsp.jstl-api</artifactId>
        <version>1.2.1</version>
    </dependency>

    <dependency>
        <groupId>taglibs</groupId>
        <artifactId>standard</artifactId>
        <version>1.1.2</version>
    </dependency>

    <!-- Tomcat for JSP rendering -->
    <dependency>
        <groupId>org.apache.tomcat.embed</groupId>
        <artifactId>tomcat-embed-jasper</artifactId>
        <scope>provided</scope>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

</project>

Screenshots