9. 3D Charts | Learning Highcharts 4

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Learning Highcharts 4 - Second Edition

By : Joe Kuan

4.5 (2)

Learning Highcharts 4

4.5 (2)

By: Joe Kuan

Overview of this book

The book is aimed at all levels of readers. Beginners can learn the basic configurations and step-by-step approaches in creating charts or Highcharts cloud. For intermediate and advanced readers, the book explores the APIs, events, server-side operations and plugins.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Web Charts

1. Web Charts

A short history of web charting

The rise of JavaScript and HTML5

JavaScript charts on the market

Why Highcharts?

Highcharts – a quick tutorial

Summary

2. Highcharts Configurations

2. Highcharts Configurations

Configuration structure

Understanding Highcharts' layout

Framing the chart with axes

Revisiting the series config

Exploring PlotOptions

Styling tooltips

Animating charts

Expanding colors with gradients

Zooming data with the drilldown feature

Summary

3. Line, Area, and Scatter Charts

3. Line, Area, and Scatter Charts

Introducing line charts

Highlighting negative values and raising the base level

Sketching an area chart

Mixing line and area series

Combining the scatter and area series

Summary

4. Bar and Column Charts

4. Bar and Column Charts

Introducing column charts

Introducing bar charts

Constructing a mirror chart

Converting a single bar chart into a horizontal gauge chart

Sticking the charts together

Summary

5. Pie Charts

5. Pie Charts

Understanding the relationship between chart, pie, and series

Plotting simple pie charts – single series

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

6. Gauge, Polar, and Range Charts

Loading gauge, polar, and range charts

Plotting a speedometer gauge chart

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

7. Bubble, Box Plot, and Error Bar Charts

The bubble chart

Understanding the box plot chart

The error bar chart

Summary

8. Waterfall, Funnel, Pyramid, and Heatmap Charts

8. Waterfall, Funnel, Pyramid, and Heatmap Charts

Constructing a waterfall chart

Constructing a funnel chart

Joining both waterfall and funnel charts

Plotting a commercial pyramid chart

Exploring a heatmap chart with inflation data

Experimenting with dataClasses and nullColor options in a heatmap

Summary

9. 3D Charts

9. 3D Charts

What a Highcharts 3D chart is and isn't

Experimenting with 3D chart orientation

Configuring the 3D chart background

Plotting the column, pie, donut, and scatter series in 3D charts

Navigating with 3D charts

Summary

10. Highcharts APIs

10. Highcharts APIs

Understanding the Highcharts class model

Using the Highcharts APIs

Summary

11. Highcharts Events

11. Highcharts Events

Introducing Highcharts events

Portfolio history example

Stock growth chart example

Summary

12. Highcharts and jQuery Mobile

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

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

13. Highcharts and Ext JS

A short introduction to Sencha Ext JS

A quick tour of Ext JS components

The Highcharts extension

A commercial RIA with Highcharts – Profiler

Summary

14. Server-side Highcharts

14. Server-side Highcharts

Running Highcharts on the server side

Highcharts on the server side

Running the Highcharts server script

Summary

15. Highcharts Online Services and Plugins

15. Highcharts Online Services and Plugins

Highcharts export server – export.highcharts.com

Highcharts Cloud Service

Highcharts plugins

Summary

Index

Index

Experimenting with 3D chart orientation

To enable the 3D feature, we first need to include the extension as follows:

<script 
 src="http://code.highcharts.com/highcharts-3d.js"></script>

In Highcharts, there are two levels of 3D options: chart and series. The chart level options are located in chart.options3d, which mainly deals with the orientation and the frame around the plotting area, whereas the 3D options for the series remain in the usual plotOptions area, such as plotOptions.column.depth.

Currently, Highcharts supports 2 axles of rotation: horizontal and vertical, which are the alpha and beta options in chart.options3d respectively. The values for these options are in degrees. The following diagram illustrates with arrows the direction of chart rotation as the degree value increases and decreases:

Alpha and beta orientations

In the previous diagram, we showed the direction of orientation. Let's experiment with a column chart. We are going to use a chart from Chapter 4, Bar...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning Highcharts 4

Search

Your notes and bookmarks