navigation

Implementing basic report with input control using Highcharts, AngularJS and Spring Boot

Implementing basic report with input control using Highcharts, AngularJS and Spring Boot

by
February 7, 2017

dfas

As a sequel to my previous blog post, this time I will show you how to implement simple report with input control based on the same technology stack. The user will have the ability to select a car manufacturer from an input control and then execute report which represents the selected manufacturer quarter sales data.

How to Complete this Guide

You can start from scratch and create the described classes and resources independently or you can clone the project with:

git clone https://github.com/boykodimitroff/basic-report-with-input-control.git

Let’s begin!

Preparing the data base

For the purpose of this project we will use in-memory H2 database. Spring-boot provides database initialization out of the box. The only thing you should do is to create schema.sql file which contains the CREATE sql statements of your tables. If you want to populate the newly created tables you can create another file called data.sql which will defined the INSERT statements.

src/main/resources/schema.sql

src/main/resources/data.sql

Building the Back-end

My previous blog post can be used as a reference in case you don’t know how to create and import spring boot application.

First we will build REST Controller which will be used to retrieved the data displayed in the input control.

Our REST Controller will handle GET request at /input-control/data URL and will return 200 OK response with JSON object representing the input control values. The response looks like this :

 

Create the following Data Transfer Object class:The text field will be the visible part populated in a simple select html element. The value is an id which identifies particular car manufacturer id. This id will be then passed to the back-end when the report is executed. The fields are represented by the following back-end DTO object.

src/main/java/eu/dreamix/dto/InputControlDTO.java

src/main/java/eu/dreamix/rest/InputControlResource.java

Create the following REST Controller class:

 

Create the following DAO class:As you can see the REST Controller uses Data Access layer which returns the input controls data. Let’s build the Data Access Object which will make a SQL query to the in-memory database to retrieve the relevant information.

src/main/java/eu/dreamix/InputControlDAO.java


Now we need to create the relevant Rest Controller, DAO and DTO class for the report or respectively SalesDataResource, SalesDAO and ChartDTO.Run the application and check the result at
http://localhost:8080/input-control/data.

src/main/java/eu/dreamix/rest/SalesDataResource

src/main/java/eu/dreamix/dao/SalesDAO.java

In order the REST Controller to serve its purpose it needs a required parameter which is the car manufacturer id passed from the input control.

package eu.dreamix.dto;

src/main/java/eu/dreamix/dto/ChartDTO.java

Run the application and check the result at http://localhost:8080/sales/data?carManufacturerId=1The values populated in the ChartDTO is later passed to the Highcharts library which is responsible for drawing a responsive chart.

Building the Front-end

Now when we have the data, we need to visualize it.

Create the following file:

src/main/resources/static/index.html

Create the app.jsThe only thing I will mention here is that we include the AngularJS, Highcharts and application components(input control service, report service and chart service) separated in independent modules.

src/main/resources/static/app.js

Let’s build the input controls service which will call the previously build REST Controller which serves the /input-control/data URL.The controller injects all dependencies which are used to get the input controls data, the reports data and then to populate the chart. The executeReport function is called when the button defined in the index.html is clicked.

src/main/resources/static/input-control/input-control.service.js

src/main/resources/static/report/report.service.js

We need to create also the service which will call the REST Controller for the report’s data on /sales/data URL.

src/main/resources/static/chart/chart.service.js

The only thing which has left is to implement the chart service which will populate the defined div container in the index.html

Run the application and see the result at http://localhost:8080. Execute the report with different input controls values and see how the chart represents the data populated in the in-memory database
.

Boyko Dimitrov

Java Developer at Dreamix

More Posts - Website

Follow Me:
TwitterLinkedInGoogle Plus

Do you want more great blogs like this?

Subscribe for Dreamix Blog now!

  • Anonymous

    helpful blog to everyone.. this blog having clear explanation so easy to understand..thanks a lot for sharing