Reader small image

You're reading from  Learning Highcharts 4

Product typeBook
Published inJan 2015
Reading LevelIntermediate
PublisherPackt
ISBN-139781783287451
Edition1st Edition
Languages
Right arrow
Author (1)
Joe Kuan
Joe Kuan
author image
Joe Kuan

Joe Kuan was born in Hong Kong and continued his education in the UK from secondary school to university. He studied computer science at the University of Southampton for his BSc and PhD. After finishing his education, he worked with different technologies and industries in the UK. Currently, he is working for iTrinegy—a company specializing in network emulation, profiling, and performance monitoring. He enjoys working on a variety of projects and applying different programming languages. Part of his role is to develop frontend data and present complex network data in stylish and interactive charts. He has adopted Highcharts in his company products since the early version 2. Since then, he has been contributing blogs (joekuan.wordpress.com) and software (joekuan.org) on Highcharts, Highstocks, and Highmaps. In December 2012, he published his first book, Learning Highcharts, Packt Publishing, which is a comprehensive book on Highcharts covering tutorials, examples, tricks, and tips.
Read more about Joe Kuan

Right arrow

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:

     <div data-role="content">
         <ul data-role="listview" data-inset="true">
             <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.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail , and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. 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.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this book, you can contact us at , and we will do our best to address the problem.

lock icon
The rest of the chapter is locked
You have been reading a chapter from
Learning Highcharts 4
Published in: Jan 2015Publisher: PacktISBN-13: 9781783287451
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
undefined
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $15.99/month. Cancel anytime

Author (1)

author image
Joe Kuan

Joe Kuan was born in Hong Kong and continued his education in the UK from secondary school to university. He studied computer science at the University of Southampton for his BSc and PhD. After finishing his education, he worked with different technologies and industries in the UK. Currently, he is working for iTrinegy—a company specializing in network emulation, profiling, and performance monitoring. He enjoys working on a variety of projects and applying different programming languages. Part of his role is to develop frontend data and present complex network data in stylish and interactive charts. He has adopted Highcharts in his company products since the early version 2. Since then, he has been contributing blogs (joekuan.wordpress.com) and software (joekuan.org) on Highcharts, Highstocks, and Highmaps. In December 2012, he published his first book, Learning Highcharts, Packt Publishing, which is a comprehensive book on Highcharts covering tutorials, examples, tricks, and tips.
Read more about Joe Kuan