9. Going Further with Highcharts | Highcharts Essentials

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Highcharts Essentials

By : Shahid

4 (2)

Highcharts Essentials

4 (2)

By: Shahid

Overview of this book

If you are a web developer with a basic knowledge of HTML, CSS, and JavaScript and want to quickly get started with this web charting technology, this is the book for you. This book will also serve as an essential guide to those who have probably used a similar library and are now looking at migrating to Highcharts.

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. Getting Started with Highcharts

1. Getting Started with Highcharts

Why choose Highcharts?

Installing Highcharts

A simple Highcharts example

Summary

2. Column and Bar Charts

2. Column and Bar Charts

Introducing column charts

Including multiple data series

Stacking column charts

Excluding a series from stacking

Drilling down the chart

Adjusting ticks and other chart elements

Introducing bar charts

Negatively stacked bar charts

Creating 3D column charts

Summary

3. Line and Spline Charts

3. Line and Spline Charts

Introducing line charts

Creating line charts with regular time intervals

Creating line charts with irregular time intervals

Creating line charts with multiple series

Loading data from an HTML table

Creating spline charts

Combining line and column charts

Summary

4. Area, Scatter, and Bubble Charts

4. Area, Scatter, and Bubble Charts

Introducing area charts

Stacking charts with multiple series

Area charts with percentage values

Area-spline charts

Introducing scatter charts

Scatter charts with multiple series

Creating bubble charts

Summary

5. Pie, Polar, and Spider Web Charts

5. Pie, Polar, and Spider Web Charts

Introducing pie charts

Slicing off a pie chart

Drilling down the pie chart

Creating pie charts with multiple series

Creating a donut chart

Configuring a semicircle donut

Combining pie charts with line and column charts

Introducing a polar chart

Polar charts with different series types

Converting other chart types to the polar chart

Introducing the spider web chart

Creating a wind rose chart

Summary

6. Other Chart Types

6. Other Chart Types

Creating an angular gauge chart

Creating a VU meter

Creating a solid gauge

Plotting a waterfall chart

Plotting a pyramid chart

Drawing a funnel chart

Creating a heat map

Summary

7. Theming with Highcharts

7. Theming with Highcharts

Basic theming concepts

Formatting the tooltip with HTML

Altering borders, shadows, and backgrounds

Gradient fill types

Using Google Fonts with Highcharts

Using jQuery UI easing for series animation

Creating a global theme for our charts

Configuring our charts for internationalization

Summary

8. Exploring Highcharts APIs and Events

8. Exploring Highcharts APIs and Events

An overview of Highcharts APIs and class model

Getting values with the Chart.get() method

Adding series and points

Accomplishing various tasks programmatically

Highcharts events

Extending Highcharts

Summary

9. Going Further with Highcharts

9. Going Further with Highcharts

Preprocessing data from different file types

Preprocessing data from a database using PHP's PDO class

Updating charts using Ajax

Exporting Highcharts into other formats

Summary

Index

Index

Exporting Highcharts into other formats

Highcharts provides a module to export charts into various image formats. There can be two possibilities when considering the export server, that is, to use Highcharts' official exporting server or set up your own server. We will use the export module to export our charts into various formats using the Highcharts CDN.

To enable exporting, the exporting.js file must be included after the highcharts.js file. It can be found in the Highcharts-4.x.x/js/modules folder and can also be included directly from http://code.highcharts.com/modules/exporting.js.

To enable simple exporting, we need to set exporting.enabled to true in our chart configuration object:

$( '...' ).highcharts({
  ...
  exporting: {
    enabled: true
  },
  ...
});

By doing so, a button with a drop-down menu appears at the top-right corner of the chart:

The drop-down menu contains various options to export charts into formats including PNG, JPEG, PDF, and SVG.

You can alter various properties...

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.

Highcharts Essentials

Search

Your notes and bookmarks