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
- HTML5 (SVG and Canvas)
- 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
