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 /src/main/resources.

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.

As you can see, the code begins by mapping the /chart URL path to the chart() method.

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 /src/main/resources.

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.

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.

The 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.

For example, /*[[${inshoreSales}]]*/ [] 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.

By the way, recall that the “inshoreSales” request attribute is actually a List object. Thymeleaf is cool enough to format that object in a way that JavaScript understands.

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.