Line Chart Using Highcharts Javascript Library

Hello guys, Bushan here welcomes back to B2 Tech. Today in this article will discuss Charts. To draw charts so many libraries, API’s are available but we will be discussing Highcharts in this post and our upcoming posts.

In general,

  • A Chart is a graphical representation of data.
  • Charts allow users to see what the results of data to better understand and predict current and future data.
  • Charts are an excellent way to condense large amounts of information into easy-to-understand formats that highlight the points you’d like to make.

There are many different chart types available, and sometimes the hardest part is deciding which chart type is best for your need. I would like to use Highcharts most of the time because of the following reasons,

  • Compatibility: It is compatible with all modern browsers including the iPhone/iPad and Internet Explorer from version 6.
  • Pure JavaScript: Highcharts is based on innate browser technologies. It does not depend on any client-side plugins like Java or Flash. There is also no need to install anything on your server. No PHP or ASP.NET. It only requires two JS files to run: The highcharts.js core and each of the jQuery, MooTools or Prototype framework.
  • Export and print: After enabling the exporting module, users can export the chart to PDF, SVG, PNG or JPG format or can be printed directly from the web page.
  • Free for non-commercial: It is free for a personal website, a school site or a non-profit organization, there is no need for the author’s permission.
  • Open: This is the main feature of Highcharts that under any of the licenses, free or not, you are allowed to download the source code and make your edits. Also permits for personal modifications and ample flexibility.


And the list goes on and on… So in this post will discuss Line Chart using Highcharts Library.

Tools and Technologies,

  • Java 8
  • Spring Boot
  • JPA
  • jQuery
  • Highcharts
  • MySQL 
  • Eclipse Oxygen
  • Maven

First, let’s set up the Database

Next, select the Database

Next, create a Table

Next, add a few entries to newly created table

Next, create a Spring boot project in and import to Eclipse IDE,

Make sure to download the Highcharts and Jquery library from the respective websites and add it to the resources folder or you can use the CDN link directly,

HighchartsClick here

jQueryClick here

Now let’s start with

Next, create a Model class

Next, create DAO class to access the database records,

Next, create a Controller class

And here the main Class

Next, create a JSP to display the chart


Next, create a JS script file for the chart


When you run the application, the chart looks like this

That’s it for this post, I hope this post is helped you in some way or the other way if it did then please let me know in the comments section and as always share this post in all the social media platforms.

Thanks and Regards,
Bushan Sirgur

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 *