Line chart with Multiple series using Highcharts and Spring boot

Hello everyone, welcome back to my blog. This is the part-2 of the Highcharts and Spring boot series, where we will implement different charts using Highcharts library. If you missed the part-1 then you can check here.



In part-1, we have discussed the line chart of a single series/line but in this post, we will discuss the line chart with multiple series/lines.

Let’s say we have a dataset of different youtube channels subscribes count on a yearly basis from 2011 – till this year 2019

Now we have to represent this in visually/graphically. So we are going to use the Line chart from the Highcharts library. Let’s see how we can achieve this using Highchart and Spring boot. I will use the same project which we have used in the part-1



Following query is to create the table in MySQL database

Make sure to add entries/records to the table which we have created above.

Next step is to create a respective model class inside the model package

MultipleData.java

Next step is to create a repository/interface inside the dao package to access the data from the database



MultipleDataDAO.java

Next step is to autowire the dao interface inside the controller and create a handler method to map the data

HomeController.java

The next step is to call the handler method using ajax from javascript. Once the ajax call is done, call a method to draw a chart inside the success callback function.

index.js

Next step is to run the main class and open up the browser, enter the URL http://localhost:8080 you will see the chart as shown in the below.



That’s it for this post, i hope this post helped you in someway or the otherway, if it did then please share this post with your friends and colleges. If you have any queries regarding this post then please leave your questions in the comment section down below or you can email me to [email protected] and i am happy to assist you.

Love this post?


Help me to buy a cup of coffee/Support us by donating.
All the donations will be going to the website maintenance/improvement.

Pay Now



Thank you! Happy coding! 🙂

 

About the author

Bushan Sirgur

Well, I am Bushan Sirgur from Banglore, India. Currently, I am working as a Software Developer in a Service Base Company. I am interested in JAVA/J2EE, Angular 2, JavaScript, jQuery, MongoDB.

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *