What do you get with Print?

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

Paperback book shipped to your preferred 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

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.

Description

If you are a web developer with a basic knowledge of HTML, CSS, and JavaScript and want to quickly get started with this web charting technology, this is the book for you. This book will also serve as an essential guide to those who have probably used a similar library and are now looking at migrating to Highcharts.

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

Paperback book shipped to your preferred 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

Frequently bought together

$48.99

$48.99

$48.99

Total $ 146.97

destinyawaits758 Dec 29, 2014

Book: Highcharts EssentialsAuthor: Bilal ShahidOnline: Amazon, Packt PublishingISBN-13: 9781783983964Pages: 228Disclaimer: I served as a technical reviewer for this book and received a free digital and print copy but this did not influence my evaluation in any way.Highcharts Essentials is a concise 228-page step-by-step guide for creating interactive data visualization charts with the Highcharts JavaScript Library. The book's target audience is developers who are just starting out with Highcharts or others who may have knowledge of similar JavaScript libraries and are looking to migrate to Highcharts. It does assume familiarity with JavaScript, HTML and CSS so please be prepared to hit the ground running and don't expect any hand-holding in that department. Barring this prerequisite knowledge, readers can feel like they are being thrown into the deep end with all the references to programming jargon like anonymous functions, objects and arrays.Highcharts Essentials covers the basics on how to get up to speed quickly with Highcharts and provides very easy to follow code examples accompanied by downloadable samples. The writing is very lucid and the content is quite logically organized moving from the very simple to the moderately complex towards the end of the book. The code examples are great but what is even greater is allowing the reader to make the link between this code and the actual Highcharts API resource. The author does a great job at enabling the reader to see the code examples in proper context rather than just isolated pieces code that they just need to include in their projects.As with most technical books of this nature, the treatment of the topics are somewhat clinical. While I do appreciate the author's attempt to use real-life examples, it does feel a little wearisome at times but I'm not sure if anything can be done to make the chapters more interesting. I did appreciate the fact that the reader is presented with enough digestible material in each chapter and is not overwhelmed with too much information especially for an "essentials" book.What I wanted to see more of was greater reader engagement for example, directing the reader to perform certain guided tasks based on information already shared. This would really help solidify concepts in their minds and present an element of challenge which would in turn make reading this book more exciting. (E.g. invite the reader to create a drilldown donut chart.)I found the last three chapters of the book most valuable particularly because I am a more advanced user of Highcharts and so naturally topics such as theming, exploring the Highcharts API and preprocessing data from various sources appeals to me most. I think some time could have been spent on exploring some of the built-in themes that comes out the box with Highcharts but I'm sure that the fact that the author demonstrated how to build our own custom themes is of far greater value. I particularly enjoyed the section on the usage of third-party library Papa Parse (http://papaparse.com/) and actually found use for it on a side project I was working on while reading Highcharts Essentials.If you are a novice Highcharts user looking to learn the basics of Highcharts through a somewhat instructor-led format, then I would highly recommend to read this book to get you up and running quickly.

Amazon Verified review

Robert Blomdalen Feb 05, 2015

This is an introductory book with lots of examples making you familiar to the charting library of Highcharts. The book is easy to follow along with using a pragmatic programming approach.

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

What do you get with Print?

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

Description

What you will learn

Product Details

What do you get with Print?

Product Details

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs

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

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Plenty of chart types

Responsive

Dynamic

Deep browser support

Data preprocessing

Custom theming support

Multilingual

Extensibility

Description

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs