Learning Highcharts 4电子书

Learning Highcharts 4

Table of Contents

Learning Highcharts 4

Credits

About the Author

Acknowledgments

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

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

Documentations

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