Preface 1
Chapter 1：Web Charts 9
A short history of web charting 9
HTML image map(server-side technology) 9
Java applet(client-side)and servlet(server-side) 11
Adobe Shockwave Flash(client-side) 13
The rise of JavaScript and HTML5 14
HTML5(SVG and Canvas) 14
SVG 14
Canvas 16
JavaScript charts on the market 17
amCharts 18
Ext JS 5 charts 18
Data Driven Documents 19
FusionCharts 19
Rapha？l 20
Why Highcharts? 20
Highcharts and JavaScript frameworks 20
Presentation 21
License 22
Simple API model 23
Docu mentations 23
Openness(feature request with user voice) 24
Highcharts-a quick tutorial 24
Directory structure 24
Summary 32
Chapter 2：Highcharts Configurations 33
Configuration structure 33
Understanding Highcharts'layout 34
Chart margins and spacing settings 37
Chart label properties 38
Title and subtitle alignments 40
Legend alignment 41
Axis title alignment 42
Credits alignment 43
Experimenting with an automatic layout 44
Experimenting with a fixed layout 46
Framing the chart with axes 48
Accessing the axis data type 48
Adjusting intervals and background 52
Using plot lines and plot bands 56
Extending to multiple axes 60
Revisiting the series config 65
Exploring PlotOptions 66
Styling tooltips 72
Formatting tooltips in HTML 73
Using the callback handler 75
Applying a multiple-series tooltip 76
Animating charts 77
Expanding colors with gradients 79
Zooming data with the drilldown feature 83
Summary 91
Chapter3：Line,Area,and Scatter Charts 93
Introducing line charts 93
Extending to multiple-series line charts 95
Highlighting negative values and raising the base level 99
Sketching an area chart 102
Mixing line and area series 106
Simulating a projection chart 106
Contrasting a spline with a step line 108
Extending to the stacked area chart 110
Plotting charts with missing data 112
Combining the scatter and area series 115
Polishing a chart with an artistic style 117
Summary 122
Chapter 4：Bar and Column Charts 123
Introducing column charts 123
Overlapped column chart 126
Stacking and grouping a column chart 127
Mixing the stacked and single columns 129
Comparing the columns in stacked percentages 131
Adjusting column colors and data labels 132
Introducing bar charts 135
Giving the bar chart a simpler look 137
Constructing a mirror chart 139
Extending to a stacked mirror chart 142
Converting a single bar chart into a horizontal gauge chart 144
Sticking the charts together 146
Summary 148
Chapter 5：Pie Charts 149
Understanding the relationship between chart,pie,and series 149
Plotting simple pie charts-single series 150
Configuring the pie with sliced off sections 151
Applying a legend to a pie chart 154
Plotting multiple pies in a chart-multiple series 155
Preparing a donut chart-multiple series 157
Building a chart with multiple series types 160
Creating a stock picking wheel 164
Understanding startAngle and endAngle 166
Creating slices for share symbols 167
Creating shapes with Highcharts'renderer 169
Summary 172
Chapter 6：Gauge,Polar,and Range Charts 173
Loading gauge,polar,and range charts 173
Plotting a speedometer gauge chart 174
Plotting a twin dials chart-a Fiat 500 speedometer 174
Plotting a gauge chart pane 175
Setting pane backgrounds 176
Managing axes with different scales 178
Extending to multiple panes 180
Gauge series-dial and pivot 183
Polishing the chart with fonts and colors 185
Plotting the solid gauge chart 187
Converting a spline chart to a polar/radar chart 193
Plotting range charts with market index data 197
Using a radial gradient on a gauge chart 200
Summary 205
Chapter 7：Bubble,Box Plot,and Error Bar Charts 207
The bubble chart 208
Understanding how the bubble size is determined 208
Reproducing a real-life chart 210
Understanding the box plot chart 217
Plotting the box plot chart 218
Making sense with the box plot data 219
The box plot tooltip 221
The error bar chart 222
Summary 223
Chapter 8：Waterfall,Funnel,Pyramid,and Heatmap Charts 225
Constructing a waterfall chart 225
Making a horizontal waterfall chart 228
Constructing a funnel chart 230
Joining both waterfall and funnel charts 231
Plotting a commercial pyramid chart 233
Plotting an advanced pyramid chart 235
Exploring a heatmap chart with inflation data 238
Experimenting with dataClasses and nullColor options in a heatmap 242
Summary 246
Chapter 9：3D Charts 247
What a Highcharts 3D chart is and isn't 247
Experimenting with 3D chart orientation 248
Alpha and beta orientations 248
The depth and view distance 253
Configuring the 3D chart background 254
Plotting the column,pie,donut,and scatter series in 3D charts 255
3D columns in stacked and multiple series 256
Column depth and Z-padding 256
Plotting the infographic 3D columns chart 260
Plotting 3D pie and donut charts 262
The 3D scatter plot 265
Navigating with 3D charts 268
Drilldown 3D charts 268
Click and drag 3D charts 270
Mousewheel scroll and view distance 273
Summary 275
Chapter 10：Highcharts APIs 277
Understanding the Highcharts class model 278
Highcharts constructor--Highcharts.Chart 279
Navigating through Highcharts components 279
Using the object hierarchy 279
Using the Chart.get method 281
Using both the object hierarchy and the Chart.get method 281
Using the Highcharts APIs 282
Chart configurations 283
Getting data in Ajax and displaying a new series with Chart.addSeries 284
Displaying multiple series with simultaneous Ajax calls 288
Extracting SVG data with Chart.getSVG 291
Selecting data points and adding plot lines 295
Using Axis.getExtremes and Axis.addPlotLine 295
Using the Chart.getSelectedPoints and Chart.renderer methods 297
Exploring series update 298
Continuous series update 299
Testing the performance of various Highcharts methods 302
Applying a new set of data with Series.setData 303
Using Series.remove and Chart.addSeries to reinsert series with new data 304
Updating data points with Point.update 306
Removing and adding data points with Point.remove and Series.addPoint 308
Exploring SVG animation performance on browsers 310
Comparing Highcharts'performance on large datasets 312
Summary 315
Chapter 11：Highcharts Events 317
Introducing Highcharts events 317
Portfolio history example 319
The top-level chart 320
Constructing the series configuration for a top-level chart 322
Launching an Ajax query with the chart load event 323
Activating the user interface with the chart redraw event 324
Selecting and unselecting a data point with the point select and unselect events 324
Zooming the selected area with the chart selection event 325
The detail chart 328
Constructing the series configuration for the detail chart 329
Hovering over a data point with the mouseover and mouseout point events 330
Applying the chart click event 331
Changing the mouse cursor over plot lines with the mouseover event 337
Setting up a plot line action with the click event 337
Stock growth chart example 339
Plotting averaging series from displayed stock series 340
Launching a dialog with the series click event 345
Launching a pie chart with the series checkboxClick event 346
Editing the pie chart's slice with the data point's click,update,and remove events 347
Summary 349
Chapter 12：Highcharts and jQuery Mobile 351
A short introduction to iQuery Mobile 351
Understanding mobile page structure 352
Understanding page initialization 354
Linking between mobile pages 357
Highcharts in touch-screen environments 360
Integrating Highcharts and jQuery Mobile using an Olympic medals table application 360
Loading up the gold medals page 362
Detecting device properties 363
Plotting a Highcharts chart on a mobile device 363
Switching graph options with the jQuery Mobile dialog box 370
Changing the graph presentation with a swipeleft motion event 373
Switching the graph orientation with the o rientationchange event 374
Drilling down for data with the point click event 376
Building a dynamic content dialog with the point click event 377
Applying the gesturechange（pinch actions）event to a pie chart 379
Summary 382
Chapter 13：Highcharts and Ext JS 383
A short introduction to Sencha Ext JS 383
A quick tour of Ext JS components 385
Implementing and loading Ext JS code 385
Creating and accessing Ext JS components 386
Using layout and viewport 388
Panel 389
GridPanel 389
FormPanel 389
TabPanel 390
Window 390
Ajax 391
Store and JsonStore 391
Example of using JsonStore and GridPanel 392
The Highcharts extension 394
Step 1-removing some of the Highcharts options 394
Step 2-converting to a Highcharts extension configuration 395
Step 3-constructing a series option by mapping the JsonStore data model 395
Step 4-creating the Highcharts extension 396
Passing series-specific options in the Highcharts extension 398
Converting a data model into a Highcharts series 398
X-axis category data and y-axis numerical values 398
Numerical values for both x and y axes 399
Performing preprocessing from store data 399
Plotting pie charts 401
Plotting donut charts 402
Module APIs 403
addSeries 404
removeSerie and removeAllSeries 404
setTitle and setSubTitle 404
draw 405
Event handling and export modules 405
Extending the example with Highcharts 405
Displaying a context menu by clicking on a data point 412
A commercial RIA with Highcharts-Profiler 414
Summary 416
Chapter 14：Server-side Highcharts 417
Running Highcharts on the server side 417
Highcharts on the server side 418
Batik-an SVG toolkit 418
PhantomJS(headless webkit) 419
Creating a simple PhantomJS script 420
Creating our own server-side Highcharts script 421
Running the Highcharts server script 424
Server script usage 424
Running the script as a standalone command 424
Running the script as a listening server 426
Passing options to the listening server 427
Summary 427
Chapter 15：Highcharts Online Services and Plugins 429
Highcharts export server-export.highcharts.com 429
Highcharts Cloud Service 431
Highcharts plugins 437
The regression plot plugin 437
The draggable points plugin 438
Creating a new effect by combining plugins 440
Guidelines for creating a plugin 443
Implementing the plugin within a self-invoking anonymous function 444
Using Highcharts.wrap to extend existing functions 444
Using a prototype to expose a plugin method 445
Defining a new event handler 446
Summary 447
Index 449