Book Image

Instant Highcharts

By : Cyril Grandjean
Book Image

Instant Highcharts

By: Cyril Grandjean

Overview of this book

Nowadays, a lot of systems and tools are developed using web technologies. Customers need to analyze their data using charts on their computer or their mobile device. With the Highcharts library, it is possible to create highly customizable and interactive charts on any computer or a mobile device without installing any plugins. Instant Highcharts is a practical, hands-on guide that provides you with a step-by-step approach, which will help you to take advantage of the powerful features of Highcharts. With Instant Highcharts, you will learn everything you need to know to create your own dynamic charts with your own data inside your web application. Instant Highcharts will present you with different features available with Highcharts, and helps you to create your own chart. You will start with Highcharts installation and then learn to create your own customized column, bar, area, and pie charts with your data. You will learn to add some interactive functionality such as the zoom feature or to export your chart into a printable format. We will also give you tips that will help you to improve your skills with Highcharts.
Table of Contents (7 chapters)

Installation


In four easy steps, you can install Highcharts and get it set up on your web application.

Step 1 – what do I need?

Before you install Highcharts, you will need to check that you have all of the required elements, as shown in the following list:

  • Web browser: In order to work properly, you need to use at least the following versions or higher of these web browsers, Internet Explorer 6, Firefox 2, Chrome 1, Safari 4, Opera 9, iOS 3.0, Android 2 (Limited support).

  • IDE or Text Editor: You can use any text editor or Integrated Development Environment (IDE) in order to create your Highcharts charts, but it is recommended to have syntax highlighting for JavaScript. You can use Notepad++ for Windows or Fraise on Mac OS X, which are good free tools that include this feature.

  • JavaScript framework: It is recommended to use at least one the following versions or higher; jQuery 1.3, Mootools 1.2, Prototype 1.7, Ext-JS 3.

Step 2 – downloading Highcharts

The easiest way to download Highcharts is in a compressed package from the website at http://www.highcharts.com/download.

Download the most current stable build. The Version 3.0.2 of Highcharts has been used in book samples. After downloading and unpacking the archive, you will be left with a directory called Highcharts with the version number, containing a number of files and folders.

In the js directory, you will find two versions of Highcharts library, highcharts.js and highcharts.src.js. highcharts.js (131 Ko) is the minified version of highcharts.src.js (416 Ko).

Tip

Because the minified version is lighter, it is recommended to use this version when your application is deployed in production in order to improve the performances of your application. The non-minified version can be used during the development phase.

Step 3 – Highcharts installation

In order to use Highcharts, you need to include your Highcharts code in the head section of your HTML. You can put your JavaScript code directly into your web server, and use the path of your JavaScript files or include the code using an external URL. For each of the JavaScript frameworks, we will show you how to integrate Highcharts inside your application by using an external URL. For Mootools and Prototype libraries, an adapter script has to be included as well in order to work properly.

  • jQuery framework

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
  • Mootools framework

    <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
    <script src="http://code.highcharts.com/adapters/mootools-adapter.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
  • Prototype framework

    <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
    <script src="http://code.highcharts.com/adapters/prototype-
      adapter.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

    Tip

    If you want to follow JavaScript best practices, and improve the performances of your application in production, you can minify your own code into one JavaScript file, and include the JavaScript files before the end of the body section of your HTML.

If you want to use the optional export module, you will also need to include the following code inside the head section of your HTML.

<script src="http://code.highcharts.com/modules/exporting.js"></script>

If you want to render your printable images on your own web server, please follow the instructions available at http://www.highcharts.com/component/content/article/2-news/52-serverside-generated-chart.

Step 4 – your first chart

Now that you have imported Highcharts into your web application, we will create our first chart. Nevertheless, before creating any JavaScript code, you will have to create an HTML div element identified by a chosen HTML ID with a defined size.

<div id="myFirstChartContainer" style="width:600px; height:400px;"></div>

Then, you can create your chart in JavaScript inside the script element in the head section of your HTML. You need to include your own code after the inclusion of your framework and Highchart library as indicated in the previous step. For each of the previous frameworks, we will show you how to create your first chart.

  • jQuery framework

    $(function () { 
       var chart = new Highcharts.Chart({({
           chart: {
               type: 'column'
           },
           title: {
               text: 'Sales by city'
           },
           xAxis: {
               categories: ['London', 'Paris', 'Madrid']
           },
           yAxis: {
               title: {
                   text: 'Sales'
               }
           },
           series: [{
               name: 'Cities',
               data: [1000, 2500, 1500]
           }]
       });
    });
  • Mootools framework

    window.addEvent('domready', function() {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'myFirstChartContainer',
                type: 'column'
            },
            title: {
                text: 'Sales by city'
            },
            xAxis: {
                categories: ['London', 'Paris', 'Madrid']
            },
            yAxis: {
                title: {
                    text: 'Sales'
                }
            },
            series: [{
                name: 'Cities',
                data: [1000, 2500, 1500]
            }]
        });
    });
  • Prototype framework

    document.observe("dom:loaded", function() {
       var chart = new Highcharts.Chart({
           chart: {
               renderTo: 'myFirstChartContainer',
               type: 'column'
           },
           title: {
               text: 'Sales by city'
           },
           xAxis: {
               categories: ['London', 'Paris', 'Madrid']
           },
           yAxis: {
               title: {
                  text: 'Sales'
               }
           },
           series: [{
                name: 'Cities',
                data: [1000, 2500, 1500]
           }]
       });
    });

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.

Each of the JavaScript frameworks has its own constructor, and their own way to link to div element. For jQuery, the div ID will be included directly in the constructor, but you will have to use the renderTo element for Prototype and Mootools. Nevertheless, the code inside the constructor will be the same whatever framework you use. The code in the following sections will use jQuery, but you can easily reuse the code with other JavaScript frameworks.

And that's it

By this point, you should have your Highcharts working, free to play around and discover more about it.

Your first chart