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 https://start.spring.io 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 application.properties

application.properties

Next, create a Model class

Data.java

Next, create DAO class to access the database records,

DataDAO.java



Next, create a Controller class

HomeController.java

And here the main Class

HighchartsApplication.java

Next, create a JSP to display the chart



index.jsp

Next, create a JS script file for the chart

index.js

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.

Love this post?

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

Pay Now

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 *