Learning Highcharts 4 Design eye catching and interactive JavaScript charts for your web page with Highcharts one of the leading tools in web charting 1st Edition by Joe Kuan 1783287462 9781783287468

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 Rise of JavaScript and HTML5
  • HTML5 (SVG and Canvas)
    • SVG
    • Canvas
  • JavaScript Charts on the Market
    • amCharts
    • Ext JS 5 Charts
    • Data Driven Documents
    • FusionCharts
    • Raphaël
• Why Highcharts?
  • Highcharts and JavaScript Frameworks
  • Presentation
  • License
  • Simple API Model
  • Documentation
  • Openness (Feature Request with User Voice)
• Highcharts – A Quick Tutorial
  • Directory Structure
• Summary

2. Highcharts Configurations

• Configuration Structure
• Understanding Highcharts’ Layout
• Chart Margins and Spacing Settings
• Chart Label Properties
• Title and Subtitle Alignments
• Legend Alignment
• Axis Title Alignment
• Credits Alignment
• Experimenting with an Automatic Layout
• Experimenting with a 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 Config
• Exploring PlotOptions
• Styling Tooltips
• Formatting Tooltips in HTML
• Using the Callback Handler
• Applying a Multiple-Series Tooltip
• Animating Charts
• Expanding Colors with Gradients
• Zooming Data with the Drilldown Feature
• Summary

3. Line, Area, and Scatter Charts

• Introducing Line Charts
• Extending to Multiple-Series Line Charts
• Highlighting Negative Values and Raising the Base Level
• Sketching an Area Chart
• Mixing Line and Area Series
• Simulating a Projection Chart
• Contrasting a Spline with a Step Line
• Extending to the Stacked Area Chart
• Plotting Charts with Missing Data
• Combining the Scatter and Area Series
• Polishing a Chart with an Artistic Style
• Summary

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

5. Pie Charts

• Understanding the Relationship Between 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
• Creating a Stock Picking Wheel
• Understanding startAngle and endAngle
• Creating Slices for Share Symbols
• Creating Shapes with Highcharts’ Renderer
• Summary

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
• Plotting the Solid Gauge Chart
• 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

7. Bubble, Box Plot, and Error Bar Charts

• The Bubble Chart
• Understanding How the Bubble Size is Determined
• Reproducing a Real-Life Chart
• Understanding the Box Plot Chart
• Plotting the Box Plot Chart
• Making Sense with the Box Plot Data
• The Box Plot Tooltip
• The Error Bar Chart
• Summary

8. Waterfall, Funnel, Pyramid, and Heatmap Charts

• Constructing a Waterfall Chart
• Making a Horizontal Waterfall Chart
• Constructing a Funnel Chart
• Joining Both Waterfall and Funnel Charts
• Plotting a Commercial Pyramid Chart
• Plotting an Advanced Pyramid Chart
• Exploring a Heatmap Chart with Inflation Data
• Experimenting with DataClasses and nullColor Options in a Heatmap
• Summary

9. 3D Charts

• What a Highcharts 3D Chart is and Isn’t
• Experimenting with 3D Chart Orientation
• Alpha and Beta Orientations
• The Depth and View Distance
• Configuring the 3D Chart Background
• Plotting the Column, Pie, Donut, and Scatter Series in 3D Charts
• 3D Columns in Stacked and Multiple Series
• Column Depth and Z-Padding
• Plotting the Infographic 3D Columns Chart
• Plotting 3D Pie and Donut Charts
• The 3D Scatter Plot
• Navigating with 3D Charts
• Drilldown 3D Charts
• Click and Drag 3D Charts
• Mousewheel Scroll and View Distance
• Summary

10. Highcharts APIs

• Understanding the Highcharts Class Model
• Highcharts Constructor – Highcharts.Chart
• Navigating Through Highcharts Components
• Using the Object Hierarchy
• Using the Chart.get Method
• Using Both the Object Hierarchy and the Chart.get Method
• Using the Highcharts APIs
• Chart Configurations
• Getting Data in Ajax and Displaying a 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 the Chart.getSelectedPoints and Chart.renderer Methods
• Exploring Series Update
• Continuous Series Update
• Testing the Performance of Various Highcharts Methods
• 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 Animation Performance on Browsers
• Comparing Highcharts’ Performance on Large Datasets
• Summary

11. Highcharts Events

• Introducing Highcharts Events
• Portfolio History Example
• The 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
• The 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 the Mouseover Event
• Setting Up a Plot Line Action with the Click Event
• Stock Growth Chart Example
• Plotting Averaging Series from Displayed Stock 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 Data Point’s Click, Update, and Remove Events
• Summary

12. Highcharts and jQuery Mobile

• A Short Introduction to jQuery Mobile
• Understanding 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 a Mobile Device
• Switching Graph Options with the jQuery Mobile Dialog Box
• Changing the Graph Presentation with a Swipeleft Motion Event
• Switching the 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

13. Highcharts and Ext JS

• A 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 a 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 Preprocessing 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 Commercial RIA with Highcharts – Profiler
• Summary

14. Server-Side Highcharts

• Running Highcharts on the Server Side
• Highcharts on the Server Side
• Batik – An SVG Toolkit
• PhantomJS (Headless Webkit)
• Creating a Simple PhantomJS Script
• Creating Our Own Server-Side Highcharts Script
• Running the Highcharts Server Script
• Server Script Usage
  • Running the Script as a Standalone Command
  • Running the Script as a Listening Server
  • Passing Options to the Listening Server
• Summary

15. Highcharts Online Services and Plugins

• Highcharts Export Server – export.highcharts.com
• Highcharts Cloud Service
• Highcharts Plugins
  • The Regression Plot Plugin
  • The Draggable Points Plugin
• Creating a New Effect by Combining Plugins
• Guidelines for Creating a Plugin
• Implementing the Plugin Within a Self-Invoking Anonymous Function
• Using Highcharts.wrap to Extend Existing Functions
• Using a Prototype to Expose a Plugin Method
• Defining a New Event Handler
• Summary

Index