Advertisement
  1. Code
  2. Front-End
Code

Adding Charts to Your Site with Highcharts

by
Difficulty:IntermediateLength:MediumLanguages:

Everyone deals with data and very often it is presented in large data tables. Representing and reading through long tables on a website can be very cumbersome. Charts are good for letting people understand the change and tendency behind data. 

Recently, when I was trying to find an easy way to insert an interactive chart on a website, I found Highcharts and I have been using it in various projects ever since. 

Throughout this series of articles, we're going to take a survey of Highcharts, why it's great, and how we can implement it in our own web-based projects.

What Is Fascinating About Highcharts?

  • It's interactive. You can mouse over an item for more details and you can also click on items in the chart legend to turn them on and off. 
  • Compatibility. It's based on JavaScript, it renders in a web browser, so even IE 6 or an iPad can show you those beautiful charts. Highcharts utilizes other JS frameworks such as jQuery, MooTools, Prototype or Highcharts Standalone framework. You need one of the libraries and highcart.js to create charts.
  • Many-many chart types. Highcharts supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange and polar chart types. We'll see examples for the most commonly used ones: column, bar, line and pie charts.
  • Feeding Highcharts is easy. Highcharts can load data from local data, local files or even from a remote server. It can take parsed data from CSV, JSON, XML files or any other database.
  • Save or print your charts. One of the surprising feature I found is that you can print or export the chart you currently see. One can save a chart as PDF, JPG, PNG or SVG file.
  • Easy to set up, tuning is not a problem. Add a few lines of code and your data and charts will draw. With its well written user documentation and API reference, beginners won't get lost and experienced developers are welcome.
  • Flexible license. Using Highcharts is free for non-commercial sites and prices are flexible for commercial projects.
  • Theme-able. At the moment, there are four predefined modern-looking themes or you can make your very unique one with some taste and CSS-knowledge.

Before using Highcharts the first time, let's see which chart type to use in common tasks.

Which Chart to Use When?

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. 

In my simple example, I compare an imaginary web shop's sales by source in a monthly distribution (comparing each month's sale with each other). As you can see below, if you want to compare only a small amount of data, and the bar chart fits on the screen with which you're currently working, then your best bet is to go with the bar chart. 

In contrast, you should use column charts if you have vertical limitation such as with landscape-oriented screens. See comparison below.

Bar chart vs column chart

Line charts represent information with the series of data points and straight lines. They show particular data changes at equal intervals of time. It is often used to visualize trend in a time series. 

In my example, I use the same data table as I used below to compare multiple data sets. As you can see, it is easy to compare the sales source trending of the previous months.

Highcharts line chart example

Pie charts are circular charts divided into sectors where each sector shows the relative size of each value. They are useful when you want to compare data which are part of the whole. Each pie slice represents its numerical value of the sum. 

In my example, I show the distribution of different source type sales of a given period.

Highcharts pie chart example

Anatomy of Highcharts

In order to understand the following code examples, you need to know the basic concepts that make up Highcharts.

Highcharts anatomy

These are the primarily parts of a chart:

  • Title displays the name of a chart on top
  • Subtitles are placed right under the title
  • Series refers to one or more data series presented on a chart
  • Tooltips are descriptions of particular data displayed by hovering over part of a chart
  • Legend 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 let's users print or export the chart. 

Adding Your First Chart

In this example, we import some sample data from a CSV-file, process it, and present the data in a column chart within a HTML file. 

Let's see the basic setup: 

  • You need to create an HTML file with any name you want
  • In the same directory you need a CSV (comma-separated values) file

In my example, I use a text file where values are separated by comma and records are separated by new lines.

The content of the column-data.csv file that we're using: 

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.

As you can see, the first things to set are the type of chart and the container's name. Then we set title, subtitle, and the title of the y-axis with our custom text. The content of the categories for the x-axis and the series data are processed and associated later after successfully parsing the CSV data. 

Our JavaScript did these simple steps: 

  1. Set the options
  2. Parse the CSV
  3. Created the chart

It's three simple steps to a really good looking chart for our data.

Coming Up Next...

This was an introductory article for how to begin using Highcharts. 

In the next article, we're going to continue looking at the library and how we can use it to render information in other types of charts, as well.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.