Learning Highcharts

Learning Highcharts
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Step-by-step instructions with real-live data to create bar charts, column charts and pie charts, to easily create artistic and professional quality charts
  • Learn tips and tricks to create a variety of charts such as horizontal gauge charts, projection charts, and circular ratio charts
  • Use and integrate Highcharts with jQuery Mobile and ExtJS 4, and understand how to run Highcharts on the server-side
  • Add advanced reporting capabilities and understand how to select the right chart for your data

Book Details

Language : English
Paperback : 362 pages [ 235mm x 191mm ]
Release Date : December 2012
ISBN : 1849519080
ISBN 13 : 9781849519083
Author(s) : Joe Kuan
Topics and Technologies : All Books, Big Data and Business Intelligence, Data, Open Source

Table of Contents

Chapter 1: Web Charts
Chapter 2: Highcharts Configurations
Chapter 3: Line, Area, and Scatter Charts
Chapter 4: Bar and Column Charts
Chapter 5: Pie Charts
Chapter 6: Gauge, Polar, and Range Charts
Chapter 7: Highcharts APIs
Chapter 8: Highcharts Events
Chapter 9: Highcharts and jQuery Mobile
Chapter 10: Highcharts and Ext JS
Chapter 11: Running Highcharts on the Server Side
  • Chapter 1: Web Charts
    • A short history of web charting
      • HTML image map (server-side technology)
      • Java applet (client side) and servlet (server side)
      • Adobe Shockwave Flash (client side)
    • The uprising of JavaScript and HTML5
      • HTML5 (SVG and canvas)
        • SVG (Scalable Vector Graphics)
        • Canvas
    • JavaScript charts on the market
      • jqPlot
      • amCharts
      • Ext JS 4 Charts
      • YUI 3 Charts
      • FusionCharts
      • JS Charts
      • Flot and Flotr
    • Why Highcharts?
      • Highcharts and JavaScript frameworks
      • Presentation
      • License
      • Simple API model
      • Documentations
      • Openness (feature request with user voice)
    • Highcharts – a quick tutorial
      • Directories structure
    • Summary
    • Chapter 2: Highcharts Configurations
      • Configuration structure
      • Understanding Highcharts layouts
        • Chart margins and spacings
        • Chart label properties
          • Title and subtitle alignments
          • Legend alignment
          • Axis title alignment
          • Credits alignment
        • Experimenting with the automatic layout
        • Experimenting with the fixed layout
      • Framing the chart with axes
        • Accessing the axis data type
        • Adjusting intervals and background
        • Using plot lines and plot bands
        • Extending to multiple axes
      • Revisiting the series configuration
      • Exploring PlotOptions
      • Styling the tooltips
        • Formatting the tooltips in HTML
        • Using the callback handler
        • Applying a multiple series tooltip
      • Animating charts
      • Expanding colors with gradients
      • Summary
      • Chapter 3: Line, Area, and Scatter Charts
        • Introducing line charts
          • Extending to multiple series line charts
        • Sketching an area chart
        • Mixing line and area series
          • Simulating a projection chart
          • Contrasting spline with step line
          • Extending to a stacked area chart
          • Plotting charts with missing data
        • Combining scatter and area series
          • Polishing a chart with an artistic style
        • Summary
        • Chapter 4: Bar and Column Charts
          • Introducing column charts
            • Overlapped column chart
            • Stacking and grouping a column chart
              • Mixing the stacked and single columns
              • Comparing the columns in stacked percentages
            • Adjusting column colors and data labels
          • Introducing bar charts
            • Giving the bar chart a simpler look
          • Constructing a mirror chart
            • Extending to a stacked mirror chart
          • Converting a single bar chart into a horizontal gauge chart
          • Sticking the charts together
          • Summary
          • Chapter 5: Pie Charts
            • Understanding the relationship of chart, pie, and series
            • Plotting simple pie charts – single series
              • Configuring the pie with sliced off sections
              • Applying a legend to a pie chart
            • Plotting multiple pies in a chart – multiple series
            • Preparing a donut chart – multiple series
            • Building a chart with multiple series types
            • Summary
            • Chapter 6: Gauge, Polar, and Range Charts
              • Loading gauge, polar, and range charts
              • Plotting a speedometer gauge chart
                • Plotting a twin dials chart – a Fiat 500 speedometer
                • Plotting a gauge chart pane
                  • Setting pane backgrounds
                  • Managing axes with different scales
                  • Extending to multiple panes
                • Gauge series – dial and pivot
                • Polishing the chart with fonts and colors
              • Converting a 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
                • Using Highcharts APIs
                  • Chart configurations
                  • Getting data in Ajax and displaying new series with Chart.addSeries
                  • Displaying multiple series with simultaneous Ajax calls
                  • Extracting SVG data with Chart.getSVG
                  • Selecting data points and adding plot lines
                    • Using Axis.getExtremes and Axis.addPlotLine
                    • Using Chart.getSelectedPoints and Chart.renderer methods
                  • Exploring the series update
                    • Continuous series update
                  • Running the experiment
                    • Applying a new set of data with Series.setData
                    • Using Series.remove and Chart.addSeries to reinsert series with new data
                    • Updating data points with Point.update
                    • Removing and adding data points with Point.remove and Series.addPoint
                    • Exploring SVG animations performance on browsers
                  • Comparing Highcharts' performance on large datasets
                • Summary
                • Chapter 8: Highcharts Events
                  • Introducing Highcharts events
                  • Portfolio history example
                    • Top-level chart
                      • Constructing the series configuration for a top-level chart
                      • Launching an Ajax query with the chart load event
                      • Activating the user interface with the chart redraw event
                      • Selecting and unselecting a data point with the point select and unselect events
                      • Zooming the selected area with the chart selection event
                    • Detail chart
                      • Constructing the series configuration for the detail chart
                      • Hovering over a data point with the mouseOver and mouseOut point events
                      • Applying the chart click event
                      • Changing the mouse cursor over plot lines with mouseover event
                      • Setting up a plot line action with the click event
                  • Stocks' growth chart example
                    • Plot averaging series from displayed stocks series
                    • Launching a dialog with the series click event
                    • Launching a pie chart with the series checkboxClick event
                    • Editing the pie chart's slice with the point click, update, and remove events
                  • Summary
                  • Chapter 9: Highcharts and jQuery Mobile
                    • A short introduction of jQuery Mobile
                    • Understanding a mobile page structure
                    • Understanding page initialization
                    • Linking between mobile pages
                    • Highcharts in touch screen environments
                    • Integrating Highcharts and jQuery Mobile using an Olympic medals table application
                      • Loading up the gold medals page
                      • Detecting device properties
                      • Plotting a Highcharts chart on mobile device
                      • Switching graph options with the jQuery Mobile dialog box
                      • Changing the graph presentation with a swipeleft motion event
                      • Switching graph orientation with the orientationchange event
                    • Drilling down for data with the point click event
                    • Building a dynamic content dialog with the point click event
                    • Applying the gesturechange (pinch actions) event to a pie chart
                    • Summary
                    • Chapter 10: Highcharts and Ext JS
                      • Short introduction to Sencha Ext JS
                      • A quick tour of Ext JS components
                        • Implementing and loading Ext JS code
                        • Creating and accessing Ext JS components
                        • Using layout and viewport
                        • Panel
                          • GridPanel
                          • FormPanel
                          • TabPanel
                        • Window
                        • Ajax
                        • Store and JsonStore
                          • Example of using JsonStore and GridPanel
                      • The Highcharts extension
                        • Step 1 – removing some of the Highcharts options
                        • Step 2 – converting to Highcharts extension configuration
                        • Step 3 – constructing a series option by mapping the JsonStore data model
                        • Step 4 – creating the Highcharts extension
                          • Passing series specific options in the Highcharts extension
                        • Converting a data model into a Highcharts series
                          • X-axis category data and y-axis numerical values
                          • Numerical values for both x and y axes
                          • Performing pre-processing from store data
                        • Plotting pie charts
                          • Plotting donut charts
                        • Module APIs
                          • addSeries
                          • removeSerie and removeAllSeries
                          • setTitle and setSubTitle
                          • draw
                        • Event handling and export modules
                        • Extending the example with Highcharts
                          • 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 export example on the client side
                            • Installing Xvfb and a web browser
                            • Starting up the Xvfb server
                            • Applying server-side change
                            • Running the server task
                          • Rhino and Batik (Java solution)
                          • Node.js/Node and Node-Highcharts (JavaScript solution)
                            • Installing Node and modules
                            • Setting up the Node server
                            • Running the Node-Highcharts module
                            • Starting the Node server and issuing a URL query
                          • PhantomJS (headless webkit)
                            • Preparing the series data script
                            • Preparing the PhantomJS script
                        • Comparison between the approaches
                        • Summary

                        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 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.
                        Sorry, we don't have any reviews for this title yet.

                        Code Downloads

                        Download the code and support files for this book.

                        Submit Errata

                        Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                        - 1 submitted: last submission 30 Aug 2013

                        Errata type: code | 9083OS_CodeBundle

                        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

                        Should be:

                        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

                        The examples cannot be run by loading directly from disk to a Browser (they assume they’re being run from a server).

                        Sample chapters

                        You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                        Frequently bought together

                        Learning Highcharts +    Learning Laravel 4 Application Development =
                        50% Off
                        the second eBook
                        Price for both: $39.00

                        Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                        What you will learn from this book

                        • Learning the basics—line, column, and pie charts and getting to grips with the latest features of Highcharts
                        • Producing artistic, professional and funky charts with examples
                        • Using the Highcharts APIs to produce interactive charts
                        • Creating horizontal gauge chart and projection charts
                        • Using Highcharts event handlers
                        • Using Highcharts with jQuery Mobile
                        • Using Highcharts with Ext JS 4
                        • Running Highcharts on the server side

                        In Detail

                        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.


                        A complete practical and comprehensive tutorial with clear and step-by-step instructions along with many examples. It's packed with examples, code samples and practical tips in a no-nonsense way.

                        Who this book is for

                        This book is both for beginners and advanced web developers who need to create interactive charts for their web applications. It primarily targets JavaScript Web developers who want to use the Highcharts library to prepare interactive and professional-quality charts and graphs for their applications quickly and easily. Prior experience with JavaScript is assumed.

                        Code Download and Errata
                        Packt Anytime, Anywhere
                        Register Books
                        Print Upgrades
                        eBook Downloads
                        Video Support
                        Contact Us
                        Awards Voting Nominations Previous Winners
                        Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                        Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software