Spring Boot – Part 9 – Adding Graphs and Charts

This is Part 9 of our complete application in Spring Boot – FleetMS version 2. In this part, you will learn how to setup various type so of charts in your application. This would be quite interesting and clear since we already have  the charts template in our application.

1. Line Bar and Radar Charts
2. Doughnut, Polar, Radar Charts
3. Getting Data Summary

1. Line, Bar and Radar Charts

In this tutorial, we would add a line chart using the data in the Transactions table. The data in the transactions table include a transaction amount and purpose. The same procedure applies to Radar and Bar charts as well.

Follow the steps below:

Step 1 – Open the reportsController and add the code to pass the list of transactions to the view using a model object

Step 2 – In the accounts.html page, create the transactions variable using the code below:

<script th:inline="javascript">
    var transactions = [[${transactions}]]
</script>

Step 3 – Open the  chartjs-custom.js file and add the following to create your x and y data for the line graph. The data is coming from the purpose and amount fields of the transactions array.

var transaction_x = expenses.map(x => x["amount"])
var transaction_y = expenses.map(x => x["purpose"])

Step 4 – In the lineChartData area, replace the labels with transaction_x and the data with transactions_y. Fire up the application and see the chart show up! You can also add new transaction to the transaction table and see it update in the chart.

2. Doughnut, Pie and Polar Chart

This three types of chart  works a bit different than the previous three.  In this case you need to specify individual values of the data points. For example, you need to change each value attribute of the chartData as well as the color. Follow the steps below:

Step 1 – For each value attribute of the chart, replace the value with transaction_y[0], transaction_y[1] etc

Step 2 – Test the application to see it works

There are a lot more that can be done to customize the charts, but this would be easier using libraries that can integrate with Angular. I’ll have to reserve that for FleetMS version 3 where we’ll be using Angular, Node and Postgres.

3. Getting Data Summary

Most times in chart reports, you would like to display some kind of summary. For example:

• How many employees were hired in a period
• The count of employees by country
• How much was spent by month  and so on

In this example, we would display the count of employee by country. This would require extending our JPA repository using SQL query. Follow the steps below:

Step 1 – Extend your EmployeeRepository using the following code that uses native SQL query to retrieve count of employees by city

@Query(value="SELECT city, count(*) FROM Employee GROUP BY city",
		nativeQuery=true)
List<Object> getCountByCountry();

Step 2 – In the ReportsController, send this data accross to the view same way you sent transactions. I call it employeeCount.

Step 3 – In the accounts.html, retrieve this variable and pass it accross to the custom-chart.js file

Step 4 – Get the employeeCount variable in the custom-chart.js file and the use it to set the charts as you wish.

I recommend you watch the video for a step by step tutorial.