Book Image

Highcharts Cookbook

By : Nicholas Terwoord
Book Image

Highcharts Cookbook

By: Nicholas Terwoord

Overview of this book

<p>Highcharts is a JavaScript library that enables web developers to create a wide range of different, highly customized charts. Highcharts easily integrates with existing JavaScript frameworks and is simple enough to make a column chart in a few lines of code, but flexible enough to handle more complex charting scenarios such as viewing multiple chart types with different data sources on a multitude of devices and form-factors.</p> <p>"Highcharts Cookbook" is a practical guide that provides you with clear, step-by-step recipes to create dynamic, functional charts in your web applications using Highcharts. With "Highcharts Cookbook", you will create and design dynamic and versatile charts in different scenarios.</p> <p>"Highcharts Cookbook" through its wide array of recipes will walk you through everything you need to know about Highcharts and will enable you to unleash its full potential in your web applications quickly and easily.</p> <p>You will learn how to integrate Highcharts with different frontend and backend libraries such as ExtJS, jQuery, and the Yii framework with some examples in Python, PHP, and NodeJS. You will also cover how to handle user interactions like form input and mouse events, how to fetch remote data in CSV, XML, and JSON format, and how to render charts for offline usage. If you want to learn the different ways you can leverage the power of Highcharts to create, integrate and extend its features in your application, then this book is for you.</p>

Related Content you might be interested in

Current Title:

Small book image
Highcharts Cookbook
Nicholas Terwoord
Mar, 2014 | 332 pages
No titles found
Table of Contents (19 chapters)
Highcharts Cookbook
Highcharts Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started with Highcharts
Getting Started with Highcharts
Introduction
Finding documentation on Highcharts
Creating your first chart
Including multiple series in one chart
Displaying multiple charts in one graph
Using the same data in multiple charts
Creating spiderweb graphs for comparison
Creating custom tooltips
Adding extra content to tooltips
Making charts internationalizable/localizable
Creating a new theme
Creating reusable graphs
2
Processing Data
Processing Data
Introduction
Working with different data formats
Using AJAX for polling charts
Using WebSockets for real-time updates
Drilling down and filtering data
Using CSV, XML, or JSON with Highcharts
Handling cross-domain data
Handling dates
3
Handling User Interaction
Handling User Interaction
Introduction
Creating a simple poll
Making graphs zoomable
Creating master details graphs
Slicing and dicing time data
Annotating a chart
Developing dynamic tooltips
Taking actions on other events
Adding events after the chart is rendered
4
Sharing Charts on the Web
Sharing Charts on the Web
Introduction
Rendering charts on the server side
Exporting images to different formats
E-mailing static charts
E-mailing dynamic charts
Preparing charts for printing
5
Integrating with ExtJS
Integrating with ExtJS
Introduction
Setting up a simple ExtJS project
Using Highcharts in ExtJS
Connecting your chart using Ext.data.Store
Observing live data using other Store types
Connecting your chart to Ext.app.Controller
Creating charts that inherit from other charts
6
Integrating with jQuery
Integrating with jQuery
Introduction
Creating charts with jQuery
Using the data- attributes to load charts
Binding events using jQuery.on
Handling user interaction with jQuery
Updating a chart on the backend
Using jQuery UI tabs and Highcharts
Modifying charts using jQuery UI widgets
Putting charts in pages using jQuery Mobile
7
Integrating with the Yii Framework
Integrating with the Yii Framework
Introduction
Setting up a simple Yii project
Creating a chart from model data
Generating a chart with a Yii CLI command
Creating charts with a RESTful controller
Updating the model when the chart changes
8
Integrating with Other Frameworks
Integrating with Other Frameworks
Introduction
Using NodeJS as a data provider
Using Django as a data provider
Using Flask/Bottle as a data provider
Integrating with Backbone
Using AngularJS data bindings and controllers
Using NodeJS for chart rendering
9
Extending Highcharts
Extending Highcharts
Introduction
Wrapping existing functions
Creating new chart types
Creating your own Highcharts extension
Adding new functions to your extension
JSHinting your code
Unit testing your new extension
Packaging your extension
Minifying your code
10
Math and Statistics
Math and Statistics
Introduction
Graphing equations
Showing descriptive statistics with box plots
Plotting distributions with jStat
Displaying experimental data with scatter plots
Displaying percentiles with area range graphs
11
System Integration
System Integration
Introduction
Exploring hard drive usage
Understanding CPU and memory usage graphs
Showing Git commits by contributor
Showing Git commits over time
12
Other Inspirational Uses
Other Inspirational Uses
Introduction
Demonstrating time zones with gauge charts
Exploring a Highcharts stopwatch
Counting words per minute
Measuring the distance travelled
Plotting tweets per day
Creating a compass
Creating a weight-watching application
Index
Index

Finding documentation on Highcharts

Highcharts has a very well-documented Application Programming Interface (API), and while many of the examples we go through will include details of the various options and settings used, this book is by no means a complete reference.

How to do it...

To get started, follow the ensuing instructions:

  1. Visit http://docs.highcharts.com to find an introduction to core concepts in Highcharts, learn about chart features, and get an introduction to working with charts.

  2. Highcharts also has a searchable API document found at http://api.highcharts.com, which has details of every method, property, and configuration option available to set up a chart. Many of the configuration options in the API include links to examples where it is possible to see the option in action or modify an existing chart.

  3. Lastly, there are the demos that can be found either at http://www.highcharts.com/demo, or within the examples folder from the Highcharts ZIP file. Demos show a variety of examples used and configurations to give some idea of what Highcharts is capable of creating.

Previous Section
End of Section 3
Next Section