learning highcharts

www.it-ebooks.info Learning Highcharts Create rich, intuitive, and interactive JavaScript data visualization for your web and enterprise development needs using this powerful charting library — Highcharts Joe Kuan BIRMINGHAM - MUMBAI www.it-ebooks.info Learning Highcharts Copyright © 2012 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: December 2012 Production Reference: 1131212 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84951-908-3 www.packtpub.com Cover Image by Asher Wishkerman (wishkerman@hotmail.com) www.it-ebooks.info Credits Author Joe Kuan Reviewers Torstein Hønsi Tomasz Nurkiewicz Gert Vaartjes Acquisition Editor Kartikey Pandey Lead Technical Editor Ankita Shashi Technical Editors Devdutt Kulkarni Ankita Meshram Pooja Pande Copy Editors Aditya Nair Alda Paiva Project Coordinator Abhishek Kori Proofreader Maria Gould Indexer Monica Ajmera Mehta Graphics Aditi Gajjar Production Coordinator Nilesh R. Mohite Cover Work Nilesh R. Mohite www.it-ebooks.info www.it-ebooks.info Foreword Back in 2003, when I wanted to implement charts for my home page, Flash-based charting solutions were totally dominating the market. I resented the idea of meeting my nontechnical readers with a prompt to install a browser plugin just to view my content, so I went looking for other solutions. There were server-side libraries that produced a static chart image, but they didn't provide any form of interactivity. So I built a chart based on an image created dynamically on the server, overlaid with tool tips created in JavaScript. This still runs on my website and has survived the coming of the touch age without modication. But I still had an idea of something simpler. By 2006 all major browsers had support for vector graphics through either SVG or VML, so this seemed the way to go. I started working on Highcharts on weekends and vacations, and released it in 2009. It was an instant success. Today, three years later, it has grown to become the preferred web charting engine by many, perhaps most, developers. Our bootstrapper company has nine persons working full time on developing, marketing, and selling Highcharts, and we have sold more than 22,000 licenses. Our clients include more than half of the 100 greatest companies in the world. I was thrilled when Packt Publishing contacted me for reviewing this book. I soon realized that the author, Joe Kuan, has a tight grip on Highcharts, jQuery, and general JavaScript. He also does what I love the most to see from Highcharts users—he bends, tweaks, and congures the library, and creates charts that surpass what we even thought possible with our tool. All done step by step in increasingly complex examples. I can't wait to recommend this book to our users. Torstein Hønsi CTO, Founder Highsoft Solutions www.it-ebooks.info About the Author Joe Kuan was born in Hong Kong and continued his education in the UK from secondary school to university. He studied Computer Science at University of Southampton for B.Sc. and Ph.D. After his education, he worked with different technologies and industries in the UK for more than a decade. Currently, he is working for iTrinegy – a company specializing in network emulation and performance monitoring. Part of his role is to develop frontend and present complex network data into stylish and interactive charts. He has adopted Highcharts with iTrinegy for nearly three years. Since then, he has been contributing blogs and software on Highcharts and Highstocks. Apart from his busy family schedule and active outdoor lifestyle, he occasionally writes articles for his own blog site http://joekuan.wordpress.com and puts some demonstrations up at http://joekuan.org. You can contact him at learning.highcharts@gmail.com. I hope this book has its place in the web publishing market. This book is like all technical books; they are nurtured by two teams of people—technical and personal. For the technical people, I am grateful to Packt Publishing for asking me to write this book—an opportunity that has never come to my mind and a valuable journey I will look back on. To the team of reviewers; Tomasz Nurkiewicz for giving purposeful comments benecial to the readers, and Torstein Hønsi and Gert Vaartjes for making sure of technical correctness, and Kartikey Pandey and Ankita Shashi for improving the readability. For the people whom I care about the most, I am thankful to my loving parents for showing me the importance of kindness and hard work in life, and my wife, for continual unconditional support and patience in helping me get this book sitting on a shelf. Finally, for my big little boy, Ivan: "A thousand miles of journey, starts beneath the feet" – Lao Tzu www.it-ebooks.info About the Reviewers Torstein Hønsi is a programmer and entrepreneur who has a passion for frontend developing and user interface design. He is the creator and lead developer of the Highcharts JavaScript library, and the CTO of Highsoft Solutions, the software company founded to manage Highcharts. Apart from work, he enjoys spending time with his family, preferably in the great outdoors of Norway. Tomasz Nurkiewicz is a Java developer with six years of experience, typically working on the server side. He is also a Scala enthusiast. Currently, he is developing a track and trace system for Kezzler AS in Oslo, Norway. Tomasz strongly believes in the power of testing and automation. He claims that every functionality not tested automatically is not trustworthy and will eventually break. Tomasz happily implements monitoring and data visualization solutions, hence his interest in client-side JavaScript charting libraries. He is also a technical blogger and blogs at http://nurkiewicz.blogspot.com. Gert Vaartjes started as a specialist in geographical information systems. While customizing these programs, he was intrigued by what's actually under the hood. Here started his passion for programming. This programming journey led him through all kinds of programming languages. As a technical consultant, he worked for several governmental and nongovernmental companies. He has been developing software for more than 10 years. Now he's working as a programmer at Highsoft Solutions, focusing on backend integration of the Highcharts product. When he is not programming, you can nd him working on his small-scale farm in Norway, where he grows potatoes, chases sheep, chops wood, and does other basic stuff. www.it-ebooks.info www.PacktPub.com Support les, eBooks, discount offers and more You might want to visit www.PacktPub.com for support les and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub les available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@packtpub.com for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. TM http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. Why Subscribe? • Fully searchable across every book published by Packt • Copy and paste, print and bookmark content • On demand and accessible via web browser Free Access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access. www.it-ebooks.info Table of Contents Preface 1 Chapter 1: Web Charts 7 A short history of web charting 7 HTML image map (server-side technology) 8 Java applet (client side) and servlet (server side) 9 Adobe Shockwave Flash (client side) 11 The uprising of JavaScript and HTML5 12 HTML5 (SVG and canvas) 12 SVG (Scalable Vector Graphics) 12 Canvas 14 JavaScript charts on the market 15 jqPlot 15 amCharts 16 Ext JS 4 Charts 16 YUI 3 Charts 16 FusionCharts 17 JS Charts 17 Flot and Flotr 17 Why Highcharts? 18 Highcharts and JavaScript frameworks 18 Presentation 19 License 20 Simple API model 20 Documentations 20 Openness (feature request with user voice) 21 Highcharts – a quick tutorial 22 Directories structure 22 Summary 30 www.it-ebooks.info [...]... with Highcharts 302 302 addSeries removeSerie and removeAllSeries setTitle and setSubTitle draw Displaying a context menu by clicking on a data point A commercially Rich Internet Application with Highcharts – AppQoS Summary Chapter 11: Running Highcharts on the Server Side Running Highcharts on the server side Highcharts on the server side Using Xvfb and web browsers (Unix solution) Setting up a Highcharts. .. type="text/javascript" src= "Highcharts- 2.2.2/js /highcharts. js"> And to use Highcharts under Prototype, users need to do the following: ... column range charts Chapter 7, 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 analyses the performance of each method on various browsers, as well as the scalability of Highcharts Chapter 8, Highcharts Events, explains Highcharts events and demonstrates... on 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, Highcharts extension, in order to plot Highcharts graphs within an Ext JS application Chapter 11, Running Highcharts on the Server Side, describes different approaches for running Highcharts on the server side for automating chart generation and exporting the charts into... by Torstein Hønsi Highcharts is not their first product, but by far their best selling one Highcharts and JavaScript frameworks Although Highcharts is built with the JavaScript framework library, it is implemented in such a way that it doesn't totally rely on one particular framework Highcharts is packaged with adapters, to make its interfaces to framework, pluggable As a result, Highcharts can be... spline chart to a polar/radar chart Plotting range charts with market index data Using a radial gradient on a gauge chart Summary Chapter 7: Highcharts APIs Understanding the Highcharts class model Highcharts constructor – Highcharts. Chart Navigating through Highcharts components Using object hierarchy Using the Chart.get method Using the object hierarchy and Chart.get method [ iii ] www.it-ebooks.info... model Highcharts has a very simple API model For creating a chart, the constructor API expects an object specifier with all the necessary settings As for dynamically updating an existing chart, Highcharts comes with a small set of APIs The configuration properties are described in detail in Chapter 2, Highcharts Configurations The API calls are discussed in Chapter 7, Highcharts APIs Documentations Highcharts' ... 328 328 331 332 333 Preface Learning Highcharts aims to be the missing manual for Highcharts from every angle It is written for web developers who would like to learn about Highcharts using the following features included in the book: • A step-by-step guide on building presentable charts from basic looking ones • Plenty of examples with real data covering all the Highcharts series types—line/spline,... charts using Highcharts' APIs and events handling • Applications demonstrating how to integrate Highcharts with a mobile framework such as jQuery Mobile and a Rich Internet Application framework such as Ext JS • Applications demonstrating how to run Highcharts on the server side for automating charts generation and export their graphical outputs This book is not a reference manual as the Highcharts team... suited to their projects Highcharts uses jQuery as the default framework implementation, hence it only requires users to load the jQuery library before Highcharts To use Highcharts under the MooTools environment, users simply do the following: . chart 167 Summary 171 Chapter 7: Highcharts APIs 173 Understanding the Highcharts class model 174 Highcharts constructor – Highcharts. Chart 175 Navigating through Highcharts components 176 Using. 333 www.it-ebooks.info Preface Learning Highcharts aims to be the missing manual for Highcharts from every angle. It is written for web developers who would like to learn about Highcharts using the following. application with Highcharts. It also shows how to use a module, Highcharts extension, in order to plot Highcharts graphs within an Ext JS application. Chapter 11, Running Highcharts on the