If you have ever developed a web application or just an application – you know that at some point the database will gather a lot of data. What to do with these data? Often we will see them presented in large data tables but the main problem with these long tables is that, it can be quiet cumbersome. This is where the charts come in, they are good for letting people like you and me understand the data in an easy way.
In this article i will be talking a bit about Highcharts and why i find them a good solution for every project and also teach you how to implement a chart on your own project.
What’s up with Highcharts?
- A lot of different chart types – Highcharts supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, columnrange, areasplinerange, and polar chart types. Above you can see the line chart.
- It’s easy to give it data – Highcharts allows you to load data from local storage like local files or even from a remote server. It can take parsed data from CSV, JSON, XML files or any other database and use them.
highcart.jsin your files, to create charts.
- It’s interactive for users – Just hover your mouse over the line for more details for seeing data. You can also click on items in the chart to turn them on off. This makes it easy for users to interact with and gather information quickly.
What type of chart should you use?
I experienced with several types of their charts and for my project the line chart was a perfect fit. Bar charts and column charts are similar in a way that each uses long rectangles to compare multiple values, but their difference lies in the orientation of their graph. Bar charts are horizontally oriented and column charts are vertical ( obviously 🙂 ).
In my example above, you can see that i gather information about the past seven days sales in the POS. I made implementation for the last 30 days and last year too, but the look is the same, just a lot more data. As you can see it’s a great way to tell the store owner how the sales are going and how much revenue he / she made the past week.
From working with the line charts i learned that they are a great way of representing data with series of data points and straight lines. They are a great tool if you need to show particular data at equal intervals. Image i made two lines, one representing this week and one representing the same week last year. Often it’s used to visualize data in a time series is my experience.
How are they made?
In order to understand my simple example below, I will give you a short introduction on how the chart is made up.
These are the primary parts of a Highchart.
- Title – displays the name of a chart on top of the chart.
- Subtitles – (not shown in the example above) this one is normally placed right under the title.
- Series / Data – refers to one or more data series presented on a Highchart.
- Legend / Name of the data – displays the name and/or the symbol of each series on a chart. By clicking on the name of the series in a legend, one can enable or disable the series.
How to add your own Highchart
In my example, we are going to import sample data from a plain CSV file. We will process it and present the data in a column chart on an HTML webpage.
What you need to do in order to accomplish this simple task:
- Create an HTML file called index.html
- In the same directory you need a CSV file (comma-separated values) with some test data.
Below is an example on how you can setup the CSV file. It will be a plain text file and you are free to copy it for your own project if you like. You can name the file sales-data.csv
Sales by source,January,February,March,April,May,June,July POS,60,64,57,61,54,58,61 Takeaway,30,39,32,40,37,33,41 Online Orders,20,18,23,27,19,23,27
In the HTML’s
head, we need to include the latest version of jQuery,
In the body, we need a container
div where the chart can be drawn representing our sales data. Copy and paste my code below:
The result of the simple example
If you want to, you can download the example here:
As you probably already have seen in the example, we have to set the type of chart and the containers name in the beginning. Then we can set data as the title and title of our Y-Axis. The X-Axis will get its name from the categories in the CSV file. These data will be processed and associated like a key -> value pair.
- Set the options
- Parse the CSV
- Created the chart
It’s three simple steps to create a really good looking chart for your data. It’s easy to get started with Highcharts and make nice graphs from data within the application.