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
.zipformatBuild 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.htmlfile 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.svgformats. The examples included in this directory contain code to set up the exporting server in PHP, Java, or PhantomJS environments.gfxandgraphics: 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.jsand.jsextensions. The.src.jsfiles contain the full code with comments, while the.jsfiles contain a minified version of the code. You might want to use.jsfiles 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.