Learning Highcharts 4 (2015)

Preface

Learning Highcharts 4 aims to be the missing manual for Highcharts from every angle. It is written for web developers who would like to learn about Highcharts. This book has the following features:

· It is a step-by-step guide on building presentable charts from basic looking ones

· There are plenty of examples with real data covering all the Highcharts series types—line/spline, column, pie, donut, scatter, bubble, area range, column range, gauge, solid gauge, pyramid, box plot, spider, waterfall, funnel, error bar, heatmaps, and 3D charts

· Subject areas are included that haven't yet been covered in online reference manuals and demos, such as chart layout structure, color shading, and in-depth explanations of some specific options such as sizeBy in the bubble series, groupZPadding in the column series, and how to modify or create plugins

· Applications demonstrating how to create dynamic and interactive charts using Highcharts APIs and events handling are covered

· Applications demonstrating how to integrate Highcharts with a mobile framework such as jQuery Mobile and a Rich Internet Application framework such as Ext JS are also covered

· Applications demonstrating how to run Highcharts on the server side for automating charts generation and exporting their graphical outputs are also covered

· Using the latest online service Highcharts Cloud, you'll learn to embed the graphs into documents

· You'll also learn the structure of Highcharts plugins and how to create plugins

This book is not a reference manual as the Highcharts team has already done an excellent job in providing a comprehensive online reference, and each configuration is coupled with jsFiddle demos. This book also does not aim to be a chart design guide nor a tutorial on programming design with Highcharts.

In short, this book shows you what you can do with Highcharts.

What this book covers

The second edition includes four new chapters, a rewritten chapter, and new sections in some of the existing chapters. All the contents from the previous edition have been technically revised. As a result, the new edition consists of about 50 percent new material.

As this book contains a myriad of examples, it would be impractical to include all the source code of each example. For step-by-step tutorials, the code is listed incrementally. If you want to experiment with the sample code, you are strongly recommended to download the code from the Packt Publishing website or visit http://joekuan.org/Learning_Highcharts for online demos.

Chapter 1, Web Charts, describes how web charts have been done since the birth of HTML to the latest HTML5 standard with SVG and canvas technologies. This chapter also provides a short survey of charting software on the market using the HTML5 standard and discusses why Highcharts is a better product than others.

Chapter 2, Highcharts Configurations, covers the common configuration options in chart components with plenty of examples and explains how the chart layout works.

Chapter 3, Line, Area, and Scatter Charts, demonstrates plotting a simple line, area charts, and scatter charts to plotting a poster-like chart including all three series types.

Chapter 4, Bar and Column Charts, demonstrates bar and column charts as well as various derived charts such as a stacked chart, percentage chart, mirror chart, group chart, overlap chart, mirror stacked chart, and horizontal gauge chart.

Chapter 5, Pie Charts, demonstrates how to build various charts, from a simple pie chart to a multiseries chart, such as multiple pies in a chart and a concentric rings pie chart, that is, a donut chart. The chapter also explores how to create an open donut chart with specific options.

Chapter 6, Gauge, Polar, and Range Charts, is a step-by-step guide on constructing a twin dial speedometer and the creation of a simple solid gauge chart. It also demonstrates the polar chart's characteristics and its similarity to a Cartesian chart. It also illustrates the use of range data on area and column range charts.

Chapter 7, Bubble, Box Plot, and Error Bar Charts, explains the characteristics of bubble charts and their specific options. The chapter establishes a gradual approach on creating a bubble chart similar to a real life sport chart, applies the same exercise to a box plot with environmental data, and provides a tutorial on error bar charts using racing data.

Chapter 8, Waterfall, Funnel, Pyramid, and Heatmap Charts, illustrates how to configure waterfall and funnel charts and uses the drilldown feature to link both charts. Then there is a tutorial on pyramid charts and reconstructing them from a financial brochure. Then, heatmap charts are introduced and different outputs are shown by experiencing a number of series options.

Chapter 9, 3D Charts, discusses what 3D charts in Highcharts really means and demonstrates the concept of 3D charts, such as column, pie, and scatter series. It illustrates specific 3D options with experiments and reconstructs a 3D chart from infographics. The chapter also covers how to create interactive 3D orientations with mouse actions.

Chapter 10, Highcharts APIs, explains the usage of Highcharts APIs and illustrates this by using a stock market demo to draw dynamic charts. The chapter discusses the use of different methods to update the series and analyzes the performance of each method on various browsers, as well as the scalability of Highcharts.

Chapter 11, Highcharts Events, explains Highcharts events and demonstrates them through various user interactions with charts from the portfolio application demos.

Chapter 12, Highcharts and jQuery Mobile, is a short tutorial on the jQuery Mobile framework and demonstrates how to integrate it with Highcharts by creating a mobile web application browsing an Olympic medals table. The chapter also covers the use of touch-based and rotate events with Highcharts.

Chapter 13, Highcharts and Ext JS, is a short introduction to Sencha's Ext JS and describes the components likely to be used in an application with Highcharts. It also shows how to use a module and a Highcharts extension in order to plot Highcharts graphs within an Ext JS application.

Chapter 14, Server-side Highcharts, discusses how Highcharts' server-side solution has evolved using PhantomJS. A quick introduction of PhantomJS is given and a step-by-step experiment is conducted to create a server-side solution using Highcharts. The chapter also demonstrates how to use the Highcharts official server-side script.

Chapter 15, Highcharts Online Services and Plugins, is a quick introduction to the export server service and discusses a recent significant cloud development: Highcharts Cloud. The chapter gives you a tour of what it offers and how to use it, from a basic level without any prior knowledge of Highcharts and JavaScript programming to an advanced user level. The chapter also demonstrates the structure of plugins and shows you how to combine multiple plugins to create a new user experience.

What you need for this book

Readers are expected to have basic knowledge of web development in the following areas:

· The structure of a HTML document and its syntax

· Ajax

As this book is all about Highcharts, which is developed in JavaScript, readers should be comfortable with the language at an intermediate level. Some of the examples use jQuery as a quick way to access document elements and bind methods to events. Hence, a basic knowledge of jQuery should be sufficient. Some knowledge of jQuery UI would also be an advantage, as it is lightly used in Chapter 10, Highcharts APIs and Chapter 11, Highcharts Events.

Who this book is for

This book is written for web developers who:

· Would like to learn how to incorporate graphical charts into their web applications

· Would like to migrate their Adobe Flash charts for an HTML5 JavaScript solution

· Want to learn more about Highcharts through examples

Conventions

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "The updatePie function is called at several places in this demo, such as to remove a series, when the legend checkbox is checked, and more."

A block of code is set as follows:

// Bring up the modify dialog box

click: function(evt) {

// Store the clicked pie slice

// detail into the dialog box

$('#updateName').text(evt.point.name);

$('#percentage').val(evt.point.y);

$('#dialog-form').dialog("option",

"pieSlice", evt.point);

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<li><a href="./gold.html"

data-ajax="false" >Top 10 countries by gold</a></li>

<li><a href="./medals.html"

data-ajax="false" >Top 10 countries by medals</a></li>

<li><a href="#">A-Z countries</a></li>

<li><a href="#">A-Z olympians</a></li>

</ul>

Any command-line input or output is written as follows:

java -jar batik-rasterizer.jar /tmp/chart.svg

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "The order is such that the values of the subcategories for the Nintendo category are before the subcategory data for Electronic Arts, and so on."

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.