Highcharts Essentials

By Bilal Shahid
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Getting Started with Highcharts

About this book

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your website or web application. Highcharts makes the visualization of the data a breeze by providing more than 20 chart types and an increased level of control over the aesthetics and interactivity of these charts.

This book provides readers with the fundamental knowledge they need to get started with Highcharts development. We will have a look at the features that come packed with the Highcharts library including those of the latest version: 4. You will then start your coding journey by creating charts of different types while also looking at various techniques to ccomplish the tasks quickly and more efficiently. This book will prove to be an invaluable guide if you are just starting out with the web charting technology or are migrating from another library to Highcharts. Finally, you will learn about data preprocessing techniques and exporting your charts to different formats to be downloaded by the end user.

Publication date:
October 2014
Publisher
Packt
Pages
228
ISBN
9781783983964

 

Chapter 1. Getting Started with Highcharts

Highcharts is a JavaScript library that adds interactive charts to websites or web applications. It supports more than 20 chart types that can further be combined into different combinations to make data more meaningful. Highcharts comes with a plethora of features, and yet its API is simple enough to get beginners up and running.

In this chapter, we will present an overview of Highcharts and its various features. We will take a look at the advantages that Highcharts offers over its alternatives and how it can help us with visualizing data by providing deep browser support and extensibility. We will also learn how to install Highcharts and familiarize ourselves with the file structure and different modules. At the end of this chapter, we will construct a simple column chart to kick-start our coding journey and get hands-on experience with Highcharts configurations.

 

Why choose Highcharts?


While there are other charting libraries available in the market, and some of them come with really nice features, Highcharts has its own place in JavaScript charting. Here are some of the Highcharts features that make it stand out from its competitors.

Plenty of chart types

Highcharts supports more than 20 chart types, and these include common chart types such as column chart, bar chart, pie chart, and area chart as well as advanced chart types including angular gauges, scatter charts, and range charts. If that's not enough for plotting the data, Highcharts also supports combining these chart types into various combinations for a more meaningful representation of data.

Responsive

Highcharts looks great in any screen resolution or size. Be it a desktop or a handheld device, Highcharts adjusts itself according to the viewport.

Dynamic

Highcharts supports dynamic plotting of data. Series can be added or removed and axes can be modified at any time after the creation of the chart. Charts can be updated constantly with data streaming from the server or being supplied by the user.

Deep browser support

Highcharts works on all modern browsers including Chrome, Mozilla, Internet Explorer, Netscape, and Safari. Legacy versions of Internet Explorer including IE6 and 7 are also supported by Highcharts.

Highcharts takes full advantage of the Scalable Vector Graphics (SVG) feature in modern browsers in order to render charts. In older browsers, it makes use of Vector Markup Language (VML) to draw the graphics. For Android 2.x devices, it uses Canvas to render graphics. When talking about performance, SVG gives the best results followed by VML and then Canvas.

Data preprocessing

When working with a large amount of data, it is not viable to write it in the form of static code. So, the data in CSV, XML, or JSON can be preprocessed before it can be plotted by Highcharts. Highcharts can also take preprocessed data from a database.

Custom theming support

While Highcharts comes with eight predefined themes that can be easily modified, it can be completely rebranded. Custom themes can be created by merely defining a JavaScript object with colors and fonts passed as values to their respective elements.

Multilingual

Highcharts allows charts to be presented in any language. Since it uses SVG for plotting the charts, support for bidirectional text is built right into it.

Extensibility

Highcharts comes with a great many features to make charting much more intuitive and elegant, yet it provides a simple API model to extend the core to include more features and support according to one's needs.

 

Installing Highcharts


In order to use Highcharts, we first need to download it. Go to http://www.highcharts.com/download and click on the Highcharts 4.x.x download button at the center of the screen.

It will take you to the download page. There are two options for the download:

  • Download the full Highcharts package in .zip format

  • Build the custom package to be downloaded by the Highcharts download builder

Downloading the full package will get you all the chart types, modules, adapters, themes, and other extra features. The full package also includes examples for using Highcharts and setting up the export server with different platforms to export charts to various image formats. The full package is great for learning and development purposes as it combines all Highcharts' features in one place.

If you need to use only specific features of Highcharts, then it's recommended to include only those specific files in your production code. This is where the download builder comes in handy as it presents various options as to what to include in the final download package. For instance, if you only intend to use the line chart type, then you can check that option and leave the others blank. Similarly, if you don't wish to use the drilldown feature, you can leave it blank to keep the code clean and minimal; hence, only the features meant to be used will be selected and only that code will be compiled into a single file, which can then be included in the production code. The download builder also includes an option to minify the code. If you wish to know more about Highcharts' features, you can refer to the actual documentation on the official site at http://www.highcharts.com/docs.

Note

Please note that at the time of writing this book, the Highcharts download builder is still in an experimental state.

For the sake of learning, download the full Highcharts package from the first option.

Extract the Highcharts-4.x.x.zip file somewhere on your hard drive. You will see multiple directories inside the top-level directory.

Each directory and its contents are defined as follows:

  • index.html: This is the main demo file where you get to view various Highcharts demos. The demos of all chart types currently supported by Highcharts are listed on this page in the form of links preceded by the heading that specifies the chart type. You can quickly familiarize yourself with various chart types and how they look in the browser.

  • examples: This is the directory where all the example files reside further in their respective directories. You can view the code of each example by going into the respective folder and opening the .html file in your code editor. Feel free to modify the code to see how it impacts the demo chart.

  • exporting-server: This directory contains examples for setting up your own server to export Highcharts to various image formats. Currently, Highcharts supports export to .png, .jpeg, .pdf, and .svg formats. The examples included in this directory contain code to set up the exporting server in PHP, Java, or PhantomJS environments.

  • gfx and graphics: These directories contain image files used by Highcharts examples.

  • js: This is the main directory where all the Highcharts code resides. Here you will find JavaScript files with .src.js and .js extensions. The .src.js files contain the full code with comments, while the .js files contain a minified version of the code. You might want to use .js files in your production environment. Besides these JavaScript files, this directory contains three more directories:

    • adapters: This directory contains files to use Highcharts with frameworks other than jQuery, such as Prototype or MooTools.

    • modules: This directory contains several modules to add more features to Highcharts. These include the canvas module to support SVG on Android 2.x, the data module to make working with CSV or table data easier, drilldown to drill down the chart, and the exporting module for client-side exporting and printing of charts. Other modules included are the funnel, heatmap, solid gauge, and no-data modules.

    • themes: These are predefined themes with different settings of colors, fonts, borders, and shadows. Currently, eight themes are included in this directory, which you can use to quickly style your charts.

In order to use Highcharts, we need to include the jQuery library and the Highcharts-4.x.x/js/Highcharts.js file in our HTML code.

At the time of writing this book, Highcharts supports adapters for libraries that include jQuery, MooTools, and Prototype. In addition to these libraries, Highcharts also offers a standalone version for Vanilla JavaScript that can be downloaded via the download builder. The standalone adapter is the slimmest of all and is intended to be used with sites with limited bandwidth or in cases where the code is required to be as minimal as possible. Since every other site uses jQuery these days, we will use the jQuery adapter for our examples in the rest of this book. After having taken a good look at the important directories and files the package includes, let's get our hands dirty with the first working example of Highcharts.

 

A simple Highcharts example


In this example, we will create a basic column chart to show the GDP of the European Union from the year 2009 through 2013.

Let's start by creating a blank HTML file and then including jQuery and highcharts.js in the footer:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Highcharts Essentials</title>
</head>
<body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
</body>
</html>

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

We have included Version 1.11.1 of jQuery from the Google CDN.

In the next step, we will create a container for our chart with id set to highcharts_01:

<div id="highchart_01" style="width: 600px; height: 450px;"></div>

We also gave the container element some basic CSS styles.

Having included the required JavaScript files and created the container element, we can now initialize Highcharts in a self-executing anonymous function, as shown in the following code:

(function() {

  $( '#highchart_01' ).highcharts({
    title: {
      text: 'GDP of European Union'
    },
    chart: {
      type: 'column'
    },
    xAxis: {
      title: {
        text: 'Years'
      },
      categories: ['2009', '2010', '2011', '2012', '2013']
    },
    yAxis: {
      title: {
        text: 'GDP'
      }
    },
    series: [
      {
        name: 'GDP',
        data: [-4.5, 2.0, 1.6, -0.4, 0.1]
      }
    ]
  });
})();

Refresh the page and you will be presented with a clean column chart, as shown in the following screenshot:

We first referenced our container element with jQuery, $('#highcharts_01'), and invoked the Highcharts function passed with a configuration object. The hierarchy of this configuration object is pretty simple. Each component of the configuration object corresponds to the structure of the chart.

We first set the title by setting the text property of title to GDP of European Union, and it appeared at the top of the chart. Then, we specified the type of chart we are rendering by passing column as the value to the type property of the chart.

The next two properties correspond to the axes of the chart, that is, the x axis and y axis. We specified the title of both axes the same way we did for the chart title. The years from 2009 through 2013 were specified as an array of categories on the x axis. These years appear at the bottom of the chart below the x axis.

Finally, the data to be plotted was passed to the series component. This data was passed in the form of an array with each element corresponding to the categories element as passed for the x axis.

 

Summary


In this very first chapter, we took a look at Highcharts and the features it provides to make JavaScript charting more intuitive and interactive. We also took a brief look at the options available when downloading Highcharts. After downloading the full Highcharts package, we familiarized ourselves with the included files and their purpose. At the end, we built a simple Highcharts to get started with this wonderful charting library.

In the next chapter, we will look more closely at column and bar charts. We will learn about configuring column/bar charts to enable the drilldown features that allow us to zoom in to the data. We will also learn how to stack column charts and create charts with negative stacks.

About the Author

  • Bilal Shahid

    Bilal Shahid is a web developer from Karachi, Pakistan. He has several years of experience with HTML, CSS, JavaScript, and PHP, and he also knows how to program in C and C++. He is passionate about the open source movement, and his interests include data-driven UIs, the real-time Web, and code optimization.

    He was introduced to Highcharts while working on a big project dedicated to social media page management and analytics, and since then he has used it in several web projects.

    He works for Traffic Group Ltd., the largest independent digital services provider in the Middle East, where he works as a senior UI developer. He likes to read books in his spare time.

    Browse publications by this author