O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Highcharts 4

Book Description

Design eye-catching and interactive JavaScript charts for your web page with Highcharts, one of the leading tools in web charting

In Detail

Highcharts is a popular type of web charting software that produces stunning and smooth animated HTML5 SVG graphs.

Joe Kuan continues the Learning Highcharts series, with the second edition comprising of brand new content and revised chapters. The book covers all the graphs supported in Highcharts 4. Step-by-step tutorials demonstrate how to create presentable charts with real-life data. The book also explores how to replicate industry charts from a financial brochure, sports article, 3D infographics, and even a Fiat 500 speedometer.

The second part of the book focuses on the operational side; APIs, events, and framework integration. The third part of the book looks into the server side and online services, how Highcharts/PhantomJS works, and demonstrates the usage and reviews the latest exciting development, Highcharts Cloud-an online chart service without any prior Highcharts or JavaScript experience needed. You just need to insert the data and it does the rest.

In a nutshell, this book aims to be the most comprehensive Highcharts book in the market.

What You Will Learn

  • Use Highcharts to create a simple chart and all the graph series supported in Highcharts 4
  • Create presentable industry-scale charts with series-specific options
  • Get to grips with 3D charts and create special effects with 3D-specific options
  • Use the Highcharts APIs and events to produce interactive charts
  • Integrate Highcharts with jQuery Mobile and ExtJS's extensions
  • Discover how to use Highcharts on the server side and get to know about the Highcharts cloud service
  • Write and apply Highcharts plugins to come up with innovative charts

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

Table of Contents

  1. Learning Highcharts 4
    1. Table of Contents
    2. Learning Highcharts 4
    3. Credits
    4. About the Author
    5. Acknowledgments
    6. About the Reviewers
    7. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    9. 1. Web Charts
      1. A short history of web charting
        1. HTML image map (server-side technology)
        2. Java applet (client-side) and servlet (server-side)
        3. Adobe Shockwave Flash (client-side)
      2. The rise of JavaScript and HTML5
        1. HTML5 (SVG and Canvas)
          1. SVG
          2. Canvas
      3. JavaScript charts on the market
        1. amCharts
        2. Ext JS 5 charts
          1. Data Driven Documents
        3. FusionCharts
        4. Raphaël
      4. Why Highcharts?
        1. Highcharts and JavaScript frameworks
        2. Presentation
        3. License
        4. Simple API model
        5. Documentations
        6. Openness (feature request with user voice)
      5. Highcharts – a quick tutorial
        1. Directory structure
      6. Summary
    10. 2. Highcharts Configurations
      1. Configuration structure
      2. Understanding Highcharts' layout
        1. Chart margins and spacing settings
        2. Chart label properties
          1. Title and subtitle alignments
          2. Legend alignment
          3. Axis title alignment
          4. Credits alignment
        3. Experimenting with an automatic layout
        4. Experimenting with a fixed layout
      3. Framing the chart with axes
        1. Accessing the axis data type
        2. Adjusting intervals and background
        3. Using plot lines and plot bands
        4. Extending to multiple axes
      4. Revisiting the series config
      5. Exploring PlotOptions
      6. Styling tooltips
        1. Formatting tooltips in HTML
        2. Using the callback handler
        3. Applying a multiple-series tooltip
      7. Animating charts
      8. Expanding colors with gradients
      9. Zooming data with the drilldown feature
      10. Summary
    11. 3. Line, Area, and Scatter Charts
      1. Introducing line charts
        1. Extending to multiple-series line charts
      2. Highlighting negative values and raising the base level
      3. Sketching an area chart
      4. Mixing line and area series
        1. Simulating a projection chart
        2. Contrasting a spline with a step line
        3. Extending to the stacked area chart
        4. Plotting charts with missing data
      5. Combining the scatter and area series
        1. Polishing a chart with an artistic style
      6. Summary
    12. 4. Bar and Column Charts
      1. Introducing column charts
        1. Overlapped column chart
        2. Stacking and grouping a column chart
          1. Mixing the stacked and single columns
          2. Comparing the columns in stacked percentages
        3. Adjusting column colors and data labels
      2. Introducing bar charts
        1. Giving the bar chart a simpler look
      3. Constructing a mirror chart
        1. Extending to a stacked mirror chart
      4. Converting a single bar chart into a horizontal gauge chart
      5. Sticking the charts together
      6. Summary
    13. 5. Pie Charts
      1. Understanding the relationship between chart, pie, and series
      2. Plotting simple pie charts – single series
        1. Configuring the pie with sliced off sections
        2. Applying a legend to a pie chart
      3. Plotting multiple pies in a chart – multiple series
      4. Preparing a donut chart – multiple series
      5. Building a chart with multiple series types
        1. Creating a stock picking wheel
        2. Understanding startAngle and endAngle
        3. Creating slices for share symbols
        4. Creating shapes with Highcharts' renderer
      6. Summary
    14. 6. Gauge, Polar, and Range Charts
      1. Loading gauge, polar, and range charts
      2. Plotting a speedometer gauge chart
        1. Plotting a twin dials chart – a Fiat 500 speedometer
        2. Plotting a gauge chart pane
          1. Setting pane backgrounds
          2. Managing axes with different scales
          3. Extending to multiple panes
        3. Gauge series – dial and pivot
        4. Polishing the chart with fonts and colors
      3. Plotting the solid gauge chart
      4. Converting a spline chart to a polar/radar chart
      5. Plotting range charts with market index data
      6. Using a radial gradient on a gauge chart
      7. Summary
    15. 7. Bubble, Box Plot, and Error Bar Charts
      1. The bubble chart
        1. Understanding how the bubble size is determined
        2. Reproducing a real-life chart
      2. Understanding the box plot chart
        1. Plotting the box plot chart
        2. Making sense with the box plot data
        3. The box plot tooltip
      3. The error bar chart
      4. Summary
    16. 8. Waterfall, Funnel, Pyramid, and Heatmap Charts
      1. Constructing a waterfall chart
        1. Making a horizontal waterfall chart
      2. Constructing a funnel chart
      3. Joining both waterfall and funnel charts
      4. Plotting a commercial pyramid chart
        1. Plotting an advanced pyramid chart
      5. Exploring a heatmap chart with inflation data
      6. Experimenting with dataClasses and nullColor options in a heatmap
      7. Summary
    17. 9. 3D Charts
      1. What a Highcharts 3D chart is and isn't
      2. Experimenting with 3D chart orientation
        1. Alpha and beta orientations
        2. The depth and view distance
      3. Configuring the 3D chart background
      4. Plotting the column, pie, donut, and scatter series in 3D charts
        1. 3D columns in stacked and multiple series
          1. Column depth and Z-padding
        2. Plotting the infographic 3D columns chart
        3. Plotting 3D pie and donut charts
        4. The 3D scatter plot
      5. Navigating with 3D charts
        1. Drilldown 3D charts
        2. Click and drag 3D charts
        3. Mousewheel scroll and view distance
      6. Summary
    18. 10. Highcharts APIs
      1. Understanding the Highcharts class model
        1. Highcharts constructor – Highcharts.Chart
        2. Navigating through Highcharts components
          1. Using the object hierarchy
          2. Using the Chart.get method
          3. Using both the object hierarchy and the Chart.get method
      2. Using the Highcharts APIs
        1. Chart configurations
        2. Getting data in Ajax and displaying a new series with Chart.addSeries
        3. Displaying multiple series with simultaneous Ajax calls
        4. Extracting SVG data with Chart.getSVG
        5. Selecting data points and adding plot lines
          1. Using Axis.getExtremes and Axis.addPlotLine
          2. Using the Chart.getSelectedPoints and Chart.renderer methods
        6. Exploring series update
          1. Continuous series update
        7. Testing the performance of various Highcharts methods
          1. Applying a new set of data with Series.setData
          2. Using Series.remove and Chart.addSeries to reinsert series with new data
          3. Updating data points with Point.update
          4. Removing and adding data points with Point.remove and Series.addPoint
          5. Exploring SVG animation performance on browsers
        8. Comparing Highcharts' performance on large datasets
      3. Summary
    19. 11. Highcharts Events
      1. Introducing Highcharts events
      2. Portfolio history example
        1. The top-level chart
          1. Constructing the series configuration for a top-level chart
          2. Launching an Ajax query with the chart load event
          3. Activating the user interface with the chart redraw event
          4. Selecting and unselecting a data point with the point select and unselect events
          5. Zooming the selected area with the chart selection event
        2. The detail chart
          1. Constructing the series configuration for the detail chart
          2. Hovering over a data point with the mouseover and mouseout point events
          3. Applying the chart click event
          4. Changing the mouse cursor over plot lines with the mouseover event
          5. Setting up a plot line action with the click event
      3. Stock growth chart example
        1. Plotting averaging series from displayed stock series
        2. Launching a dialog with the series click event
        3. Launching a pie chart with the series checkboxClick event
        4. Editing the pie chart's slice with the data point's click, update, and remove events
      4. Summary
    20. 12. Highcharts and jQuery Mobile
      1. A short introduction to jQuery Mobile
      2. Understanding mobile page structure
      3. Understanding page initialization
      4. Linking between mobile pages
      5. Highcharts in touch-screen environments
      6. Integrating Highcharts and jQuery Mobile using an Olympic medals table application
        1. Loading up the gold medals page
        2. Detecting device properties
        3. Plotting a Highcharts chart on a mobile device
        4. Switching graph options with the jQuery Mobile dialog box
        5. Changing the graph presentation with a swipeleft motion event
        6. Switching the graph orientation with the orientationchange event
      7. Drilling down for data with the point click event
      8. Building a dynamic content dialog with the point click event
      9. Applying the gesturechange (pinch actions) event to a pie chart
      10. Summary
    21. 13. Highcharts and Ext JS
      1. A short introduction to Sencha Ext JS
      2. A quick tour of Ext JS components
        1. Implementing and loading Ext JS code
        2. Creating and accessing Ext JS components
        3. Using layout and viewport
        4. Panel
          1. GridPanel
          2. FormPanel
          3. TabPanel
        5. Window
        6. Ajax
        7. Store and JsonStore
          1. Example of using JsonStore and GridPanel
      3. The Highcharts extension
        1. Step 1 – removing some of the Highcharts options
        2. Step 2 – converting to a Highcharts extension configuration
        3. Step 3 – constructing a series option by mapping the JsonStore data model
        4. Step 4 – creating the Highcharts extension
          1. Passing series-specific options in the Highcharts extension
        5. Converting a data model into a Highcharts series
          1. X-axis category data and y-axis numerical values
          2. Numerical values for both x and y axes
          3. Performing preprocessing from store data
        6. Plotting pie charts
          1. Plotting donut charts
        7. Module APIs
          1. addSeries
          2. removeSerie and removeAllSeries
          3. setTitle and setSubTitle
          4. draw
        8. Event handling and export modules
        9. Extending the example with Highcharts
          1. Displaying a context menu by clicking on a data point
      4. A commercial RIA with Highcharts – Profiler
      5. Summary
    22. 14. Server-side Highcharts
      1. Running Highcharts on the server side
      2. Highcharts on the server side
        1. Batik – an SVG toolkit
        2. PhantomJS (headless webkit)
        3. Creating a simple PhantomJS script
          1. Creating our own server-side Highcharts script
      3. Running the Highcharts server script
        1. Server script usage
          1. Running the script as a standalone command
          2. Running the script as a listening server
          3. Passing options to the listening server
      4. Summary
    23. 15. Highcharts Online Services and Plugins
      1. Highcharts export server – export.highcharts.com
      2. Highcharts Cloud Service
      3. Highcharts plugins
        1. The regression plot plugin
        2. The draggable points plugin
        3. Creating a new effect by combining plugins
        4. Guidelines for creating a plugin
          1. Implementing the plugin within a self-invoking anonymous function
          2. Using Highcharts.wrap to extend existing functions
          3. Using a prototype to expose a plugin method
          4. Defining a new event handler
      4. Summary
    24. Index