Learning Highcharts电子书

Learning Highcharts

Table of Contents

Learning Highcharts

Credits

Foreword

About the Author

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 uprising of JavaScript and HTML5

HTML5 (SVG and canvas)

SVG (Scalable Vector Graphics)

Canvas

JavaScript charts on the market

jqPlot

amCharts

Ext JS 4 Charts

YUI 3 Charts

FusionCharts

JS Charts

Flot and Flotr

Why Highcharts?

Highcharts and JavaScript frameworks

Presentation

License

Simple API model

Documentations

Openness (feature request with user voice)

Highcharts – a quick tutorial

Directories structure

Summary

2. Highcharts Configurations

Configuration structure

Understanding Highcharts layouts

Chart margins and spacings

Chart label properties

Title and subtitle alignments

Legend alignment

Axis title alignment

Credits alignment

Experimenting with the automatic layout

Experimenting with the 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 configuration

Exploring PlotOptions

Styling the tooltips

Formatting the tooltips in HTML

Using the callback handler

Applying a multiple series tooltip

Animating charts

Expanding colors with gradients

Summary

3. Line, Area, and Scatter Charts

Introducing line charts

Extending to multiple series line charts

Sketching an area chart

Mixing line and area series

Simulating a projection chart

Contrasting spline with step line

Extending to a stacked area chart

Plotting charts with missing data

Combining 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 of 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

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

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. Highcharts APIs

Understanding the Highcharts class model

Highcharts constructor – Highcharts.Chart

Navigating through Highcharts components

Using object hierarchy

Using the Chart.get method

Using the object hierarchy and Chart.get method

Using Highcharts APIs

Chart configurations

Getting data in Ajax and displaying 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 Chart.getSelectedPoints and Chart.renderer methods

Exploring the series update

Continuous series update

Running the experiment

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 animations performance on browsers

Comparing Highcharts' performance on large datasets

Summary

8. Highcharts Events

Introducing Highcharts events

Portfolio history example

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

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 mouseover event

Setting up a plot line action with the click event

Stocks' growth chart example

Plot averaging series from displayed stocks 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 point click, update, and remove events

Summary

9. Highcharts and jQuery Mobile

A short introduction of jQuery Mobile

Understanding a 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 mobile device

Switching graph options with the jQuery Mobile dialog box

Changing the graph presentation with a swipeleft motion event

Switching 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

10. Highcharts and Ext JS

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 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 pre-processing 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 commercially Rich Internet Application with Highcharts – AppQoS

Summary

11. Running Highcharts on the Server Side

Running Highcharts on the server side

Highcharts on the server side

Using Xvfb and web browsers (Unix solution)

Setting up a Highcharts export example on the client side

Installing Xvfb and a web browser

Starting up the Xvfb server

Applying server-side change

Running the server task

Rhino and Batik (Java solution)

Node.js/Node and Node-Highcharts (JavaScript solution)

Installing Node and modules

Setting up the Node server

Running the Node-Highcharts module

Starting the Node server and issuing a URL query

PhantomJS (headless webkit)

Preparing the series data script

Preparing the PhantomJS script

Comparison between the approaches

Summary

Index