Sometimes a chart is worth a thousand words.
If you’re developing a business app with an administrative console, it’s likely that you’ll want to show your admins one or more charts. That way, they can get a quick overview of key metrics.
As a Spring Boot developer who’s focused heavily on back-end code, you might struggle to produce quality charts on the UI. That doesn’t have to be the case.
With Highcharts, you have a great way to add slick, even three-dimensional, charts to your app.
In this article, we’ll go over how to integrate Highcharts with Spring Boot. As is usually the case, you can view the complete source code on GitHub.
The Use Case
The use case for this tutorial is that you have a Spring Boot e-commerce app that sells saltwater fishing tackle online. You’ve just been given a requirement to add charts to the admin console.
In this case, you’re going to draw a couple of charts that show info about sales between May and July. Specifically, you need to draw two charts:
- A stacked column chart that breaks down sales by lure type (inshore, nearshore, and offshore) for each month
- A pie chart that breaks down sales by U.S. region (Northeast, South, Midwest, and West)
Get the Highcharts Code
Just copy and paste the contents of those files into your own local file of the same name. To follow the Metronic pattern, it’s best to put them in the
/static/assets/global/plugins/highcharts/js folder under
So you’re tree should look like this:
Create the Controller
As with most Spring Boot apps, you’re going to need a controller class that will not only forward the user to the correct HTML file, but also set up the data you want to display on the charts.
To make things simple here, just hardcode the data directly into the controller. In a real-life situation, of course, you’d grab the data from a database and maybe even do some number-crunching on the business logic side.
Here’s what your controller class should look like:
As you can see, the code begins by mapping the
/chart URL path to the
Then, the method starts off by hardcoding the sales figures per region and adding them to the Model object.
After that, the code creates three lists: one for inshore sales, one for nearshore sales, and one for offshore sales. Each list contains three integers that represent the sales for May, June, and July respectively.
Those lists are all added to the model with intuitive attribute names.
Finally, the method returns the string “chart.” In this case, that means the UI will display the contents of
chart.html in the templates folder under
Let’s look at that HTML file next.
The HTML File
Recall that your requirement is to draw two charts: one stacked column chart and a pie chart. With Highcharts, that means you need to create a <div> element that basically acts as a placeholder for each chart.
So the relevant HTML code will look something like this:
While there are several
<div> elements in that code block, you can clearly see the two that will hold the charts. The id of the first one is
salesByType and the id of the second one is
So how does Highcharts populate those
<div> elements with beautiful graphs? That magic happens with the help of jQuery.
More specifically: it happens with the help of jQuery and Thymeleaf.
The jQuery Code
Within your HTML file, add some jQuery code that will draw your graphs. In this case, you’ll need to add a function that executes when the DOM is ready.
The standard jQuery notation for that is this:
But wait. There’s more.
You’re going to do some shorthand Thymeleaf notation in this jQuery code. As a result, you need to “tell” Thymeleaf that you’re doing some script inlining.
Here’s what that looks like:
As with so many other third-party tools, Highcharts has some configuration options. You’ll need to set a couple of those options here.
That’s pretty self-explanatory. You’re telling Highcharts to use a period for a decimal point and to separate thousands with a comma. You’ll get a space between thousands by default if you don’t set that second option.
Draw the Stacked Column Chart
It’s finally time to write code that actually draws a chart. Start by creating a function that will draw the stacked column chart.
Remember, that’s the graph that shows sales by lure type for each of the three months. Here’s what the code looks like:
It’s beyond the scope of this article to go into too much detail about how to use Highcharts. If you want to know more about it, consult the documentation.
There are some important points to cover in the code block above, though.
First, pay particular attention to the
salesByType parameter in the
Highcharts.chart function call. That parameter must match the id of one of the
<div> elements you created above.
Happily enough, it does.
Also note that the code is specifying the options3d object. That’s going to give us a pretty, three-dimensional graph.
pointformat setting in the
tooltip object specifies what users will see in the tooltip when they hover over certain parts of the chart. That awkward syntax basically says “precede the value of the y coordinate with a dollar sign and don’t show any decimal points.”
Towards the bottom, you’ll see the
series array of
name/data pairs. That bizarre structure you see for the value of
data is actually grabbing info from the model.
Yes, it looks like it’s commented out, but it’s really doing some work.
/**/  is telling Thymeleaf to get the request attribute named “inshoreSales” and assign it to the value of
data on that line. In the event that there’s no request attribute named “inshoreSales,” the system will use the default setting of an empty array.
Draw the Pie Chart
Now that you’re done with the stacked column chart, it’s time to draw the pie chart. The code for that looks fairly similar.
As you can see, you once again need to specify the id of the
<div> element where the chart will appear.
Of course, the type of chart has also changed. You’re now drawing a pie chart instead of a column chart.
The series array uses the exact same kind of notation you used in the previous section.
Test It Out