Learning Highcharts 4

Joe Kuan

• Editorial: Packt Publishing
• Año: 2015
• ISBN:
  9781783287451
• Categoría: Ciencia de la computación
• Categoría: Modelado y diseño de datos

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 t...