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

Displaying multiple charts in one graph

We are not limited to displaying a single series in a chart, and likewise, we are not limited to displaying a single type of chart within the same chart. In some circumstances, we may want to display the same data using different types of charts.

Earlier, we saw that a series object can have data associated with it, such as name. Similarly, a series object can also have a type, which changes how the data is displayed in the rendered chart.

How to do it...

To get started, follow the ensuing instructions:

  1. Define our chart options as we did in the previous recipe, as shown in the following code:

    var options = {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Displaying multiple charts in one graph'
    },
    series: [{
        name: 'Bar #1',
        data: [1, 2, 3, 4]
    }, {
        name: 'Bar #2',
        data: [4, 3, 2, 1]
    }]

  2. Add a new series to our chart with the type pie using the following code:

    var options = {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Displaying multiple charts in one graph'
    },
    series: [{
        name: 'Bar #1',
        data: [1, 2, 3, 4]
    }, {
        name: 'Bar #2',
        data: [4, 3, 2, 1]
    }, { // add new series
        type: 'pie',
        data: [1,2,3,4],
        center: [0,0]
    }]
}

    The following is the rendered chart:

How it works...

By default, Highcharts will use the chart.type string to determine how the different series should be displayed. However, if a series has its own type provided, it will use that type when it is rendered in the chart.

There's more...

Just changing the type string of the series will probably result in something ugly or otherwise undesired, especially in the case of a pie chart where it will render on top of the existing chart. Fortunately, it is possible to adjust the positioning and style of a pie series by providing a center option.

If we wanted to enable the labels on the pie chart, we could set dataLabels.enabled to true, as shown in the following code:

    var options = {
        // ...
        series: [{
            type: 'pie',
            name: 'Bar #1',
            data: [1,2,3,4],
            dataLabels: {
                enabled: true
            }
        }]
    };

In fact, a series object can have any options that you would normally set inside plotOptions.<chartType>. For more details, visit http://api.highcharts.com/highcharts#plotOptions.

Previous Section
End of Section 6
Next Section