What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Black & white paperback book shipped to your address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Buy Now

Highcharts Essentials

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.

What you will learn

Create various chart types including line, column, bar, area, and pie Use best practices and techniques to efficiently visualize the data Customize Highcharts aesthetics with web fonts, different fill types, and jQuery UI for animations Utilize the Highcharts API and events to programmatically accomplish various tasks Preprocess data from various sources to dynamically plot the chart Export your charts to different formats including .pdf, .png, .jpeg, or .svg

What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Black & white paperback book shipped to your address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Buy Now

Highcharts Essentials: Create interactive data visualization charts with the Highcharts JavaScript library

What do you get with Print?

Product Details

Highcharts Essentials

Chapter 1. Getting Started with Highcharts

Why choose Highcharts?

Plenty of chart types

Responsive

Dynamic

Deep browser support

Data preprocessing

Custom theming support

Multilingual

Extensibility

Installing Highcharts

Note

A simple Highcharts example

Tip

Summary

Page 1 of 5

Key benefits

What you will learn

What do you get with Print?

Product Details

Table of Contents

Recommendations for you

Customer reviews

Filter reviews by

People who bought this also bought

Authors (1)

FAQs

Highcharts Essentials: Create interactive data visualization charts with the Highcharts JavaScript library

What do you get with Print?

Product Details

Key benefits

What you will learn

What do you get with Print?

Product Details

Packt Subscriptions

Table of Contents

Recommendations for you

Customer reviews

Filter reviews by

People who bought this also bought

Authors (1)

FAQs