In four easy steps, you can install Highcharts and get it set up on your web application.
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.
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
).
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>
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.
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.