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.

At the moment I’m building an online POS (Point Of Sale application) where i integrated a dashboard. The idea behind this dashboard was to give the manager of the POS an easy and fast way to understand his / her business. I found a JavaScript / jQuery solution called Highcharts and learned how to use it for showing line graphs. Below is an image of the result.

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.

How to add Charts to a web application using Highcharts 1
Responsive chart made with Highcharts

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.
  • Great compatibility – It’s based on JavaScript which makes it a great choise for web based applications. Highcharts utilizes other JS frameworks such as jQuery and MooTools. You will also need the Highcharts framework in your application, but it’s very easy to reference. You only need to add highcart.js in 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?

How to add Charts to a web application using Highcharts 2
Explanation of Highcharts

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.
  • Print and download –  allows the user to print or export the chart in a nice and easy way using JavaScript.

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, Highcarts.js, the optional export module, and our custom JavaScript that prepares and creates our chart. 

In the body, we need a container div where the chart can be drawn representing our sales data. Copy and paste my code below:

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>A Simple Highchart representing sales data using CSV</title>

        <!-- 1. Add jQuery and Highcharts JavaScript in the head of your page -->
        <!-- First adding the jQuery -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <!-- Then the Highchart from Highcharts official website -->
        <script src="http://code.highcharts.com/highcharts.js"></script>
         
        <!-- 2. Add this line if you wan't the user to be able to print the data -->
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
         
         
        <!-- 3. initialize the chart by adding JavaScript with the Highchart  -->
        <script type="text/javascript">
        jQuery(document).ready(function() { 
 
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'column'
                },
                title: {
                    text: 'Simple example showing sales data'                 
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'Sales'
                    }
                },
                series: []
            };

            // JQuery function to process the csv data
            $.get('column-data.csv', function(data) {

                // Split the lines
                var lines = data.split('\n');
                $.each(lines, function(lineNo, line) {
                    var items = line.split(',');
                     
                    // header line contains names of categories
                    if (lineNo == 0) {
                        $.each(items, function(itemNo, item) {

                            //skip first item of first line
                            if (itemNo > 0) options.xAxis.categories.push(item);
                        });
                    }
                     
                    // the rest of the lines contain data with their name in the first position
                    else {
                        var series = { 
                            data: []
                        };
                        $.each(items, function(itemNo, item) {
                            if (itemNo == 0) {
                                series.name = item;
                            } else {
                                series.data.push(parseFloat(item));
                            }
                        });
                         
                        options.series.push(series);
 
                    }
                     
                });

                // Create the chart by assembling it all
                var chart = new Highcharts.Chart(options);
            });         
             
        });
        </script>
         
    </head>
    <body>
         
        <!-- 3. Add the container -->
        <div id="container" style="width: 800px; height: 600px; margin: 0 auto"></div>      
                 
    </body>
</html>

The result of the simple example

How to add Charts to a web application using Highcharts 3
Simple example showing sales data

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.

Our JavaScript did these simple steps: 

  1. Set the options
  2. Parse the CSV
  3. 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.

Leave a Reply