Book Image

Learning Highcharts

Book Image

Learning Highcharts

Overview of this book

Highcharts is a popular web charting software that produces stunning and smooth animated JavaScript and HTML5 SVG graphs. It is among the leading web charting software in the market and has been used in many different sectors ó from financial to social websites. Although it is built on top of jQuery, it is so simple to construct that you need little programming skill to create a simple web chart. Highcharts works on all modern browsers and is solely based on native browser technologies and doesn't require client side plugins like Flash or Java."Learning Highcharts" is a comprehensive tutorial with clear and practical examples. This book follows a step by step approach towards making artistic, presentable, or professional style charts and other types of charts that you won't find elsewhere. It also shows you how to integrate Highcharts with other popular frameworks, such as jQuery, jQuery Mobile, and ExtJS and even how to run it on the server side.The book starts off with an introduction to Highcharts and demonstrates usage of its rich set of options. This is followed by an introduction to each type of basic chart, beginning with simple illustrations and ending with more artistic and productive additions to the charts. The book then guides you how to use the Highcharts API and events handling which are important to build interactive applications. It then goes on to show you how to apply Highcharts onto a popular AJAX Framework or even jQuery, jQuery Mobile and Ext JS. Finally the book shows readers how to set up Highcharts running on server side. "Learning Highcharts" aims to teach you everything you need to know about Highcharts, and take the advanced leap from Flash to JavaScript, with this extremely productive and effective Charting software available, thus helping you build basic charts and even multiple series and axes charts. The book also shows you the flexibility of Highcharts and how to create other special charts. The programming side of APIs and event handling will benefit the readers in building advanced web applications with Highcharts. The book also guides readers on how to integrate Highcharts with popular frameworks such as jQuery Mobile and Ext JS. By the end of the book, you should be able to use Highcharts to suit your web page or application needs.
Table of Contents (19 chapters)
Learning Highcharts
About the Author
About the Reviewers

A short history of web charting

Before diving into Highcharts, it is worth mentioning how web charts evolved from pure HTML with server-side technology to the current client side.

HTML image map (server-side technology)

This technique has been used since the early days of HTML, when server-side operations were the main drive. Charts were only HTML images generated from the web server. Before there was any server-side scripting language such as PHP, one of the common approaches was to use Common Gateway Interface (CGI), which executes plotting programs (such as gnuplot) to output the images. Later, when PHP became popular, the GD graphic module was used for plotting. One product that uses this technique is JpGraph. The following is an example of how to include a chart image in an HTML page:

<img src="pie_chart.php" border=0 align="left"> 

The chart script file— pie_chart.php—is embedded inside an HTML img tag. When the page is loaded, the browser sees the img src attribute and sends an HTTP request for pie_chart.php. As far as the web browser is concerned, it has no knowledge whether the .php file is an image file or not. When the web server (with PHP support) receives the request, it recognizes the .php extension and executes the PHP scripts. The following is the cut down JpGraph example; the script outputs the image content and streams it back as an HTTP response, in the same way as normal image content would be sent back.

// Create new graph
$graph = new Graph(350, 250);
// Add data points in array of x-axis and y-axis values
$p1 = new LinePlot($datay,$datax);
// Output line chart in image format back to the client

Furthermore, this technology combines with an HTML map tag for chart navigation, so that when users click on a certain area of a graph, for example a slice in a pie chart, it can load a new page with another graph.

This technology has the following advantages:

  • Server-side technology, which means chart creation does not necessarily require user interaction to initiate.

  • Ideal for automation tasks, for example scheduled reports or e-mail alerts with the graph attached.

  • Doesn't require JavaScript. It is robust, pure HTML, and is light on the client.

It has the following disadvantages:

  • More workload on the server side

  • Pure HTML, a limited technology—little interactions can be put on the graphs and no animations

Java applet (client side) and servlet (server side)

Java applet enables the web browser to execute multiplatform Java Byte Code to achieve what HTML cannot do, such as graphics display, animations, and advanced user interactions. This was the first technology to extend traditional server-based work to the client side. To include a Java applet in an HTML page, HTML applet (deprecated) or object tags are used and require a Java plugin to be installed for the browser.

The following is an example of including a Java applet inside an object tag. As Java does not run on the same environment in Internet Explorer as other browsers, the conditional comments for IE were used:

<!--[if !IE]> Non Internet Explorer way of loading applet -->
<object classid="Java:chart.class" type="application/x-java-applet"
 height="300" width="550" >
<!--<![endif] Internet way of loading applet -->
  <object classid="clsid:8AD9C840..." codebase="/classes/">
  <param name="code" value="chart.class" />
<!--[if !IE]> -->

Generally, the Java 2D chart products are built from the java.awt.Graphics2D class and the java.awt.geom package from Java Abstract Window Toolkit (AWT). Then, the main chart library allows the users to have the option of using it on a browser extending from the Applet class or running it on the server side extending from the Servlet class.

An example of a Java product is JFreeChart. It comes with 2D and 3D solutions and is free for nonprofit use. JFreeChart can be run as an applet, servlet, or standalone application. The following shows part of the code used to plot data points within an applet:

public class AppletGraph extends JApplet {
  // Create X and Y axis plot dataset and populate
  // with data.
  XYPlot xyPlot = new XYPlot(); 
  CombinedDomainXYPlot combinedDomainXYPlot = 
    new CombinedDomainXYPlot();
  // Create a jFreeChart object with the dataset 
  JFreeChart jFreeChart = new JFreeChart(combinedDomainXYPlot);
  // Put the jFreeChart in a chartPanel 
  ChartPanel chartPanel = new ChartPanel(jFreeChart);
  chartPanel.setPreferredSize(new Dimension(900,600));
  // Add the chart panel into the display

To run a chart application on the server side, a servlet container is needed, for example Apache Tomcat. The standard web.xml file is defined to bind a URL to a servlet:

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="server_charts" version="2.4" xmlns="..." xmlns:xsi="..."

When the servlet container, such as Tomcat, receives an HTTP request with the URL http://localhost/servlets/piechart, it resolves the request into a servlet application. The web server then executes the chart servlet, formats the output into an image, and returns the image content as an HTTP response.

This technology has the following advantages:

  • Advanced graphics, animations, and user interfaces

  • Reusable core code for different deployment options—client side, server side, or standalone applications

It has the following disadvantages:

  • Applet security issues

  • If the plugin crashes, it can hang or crash the browser

  • Very CPU intensive

  • Requires Java plugin

  • Long startup time

  • Standardization problem

Adobe Shockwave Flash (client side)

Flash is widely used because it offers audio, graphics, animation, and video capabilities on web browsers. Browsers are required to have the Adobe Flash Player plugin installed. As for plotting graphs, this technique is the common choice (because there weren't many other options) before the HTML5 standard became popular.

Graphing software adopting this technology basically ship with their own exported Shockwave Flash (SWF) files. These SWF files contain compressed vector-based graphics and compiled ActionScript instructions to create a chart. In order for the Flash Player to display the graphs, the SWF file is needed to be loaded from an HTML page. To do that, an HTML object tag is needed. The tag is internally created and injected into the document's DOM by the software's own JavaScript routines.

Inside this object tag, it contains dimension and SWF path information for plotting the graph, and the graph variable data is also passed inside this tag. So, as soon as the browser sees an object tag with specific parameters, it calls the installed Flash Player to process both the SWF file and the parameters. To pass the graph's plot data from the server side to the client side's Flash Player, flashVars is embedded inside a param tag with the data type. The following is an example from Yahoo YUI 2:

<object id="yuiswf1" type="..." data="charts.swf" width="100%" height="100%">
<param name="allowscriptaccess" value="always">
<param name="flashVars" value="param1=value1&param2=value2">

This technology has the following advantage:

  • Pretty graphics and animations with rich user interactions

It has the following disadvantage:

  • Similar to applets