Highcharts Cookbook

Highcharts Cookbook

By : Nicholas Terwoord

Buy this Book

Highcharts Cookbook

By: Nicholas Terwoord

Buy this Book

Overview of this book

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

Highcharts Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

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

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

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

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

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

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

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

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

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

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

System Integration

Introduction

Exploring hard drive usage

Understanding CPU and memory usage graphs

Showing Git commits by contributor

Showing Git commits over time

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

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Creating custom tooltips

So far, we haven't done a lot with the behavior of charts. One common behavior in charts is the tooltip object, which can display useful information about a data point in the graph when a user hovers the mouse over that point. Tooltips are added by default to a graph, but it is useful to be able to extend this basic functionality.

How to do it...

To get started, perform the following instructions:

Create a function for our tooltip as follows:

var formatter = function () {
    var tooltipMessage = '';
                        
    tooltipMessage += 'X value: ' + this.x + '<br>';
    for (var i=0; i < this.points.length; i++) {
        tooltipMessage += 'Y[' + i + '] value: ' + this.points[i].y+ '<br>'
    }
                    
    return tooltipMessage;
}

Define options for our chart as follows:

var options = {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Creating custom tooltips'
    },
    series: [{
        name: 'Bar #1',
        data: [1,2,3,4]
    }, {
        name: 'Bar #2',
        data: [4,3,2,1]
    }]
};

Assign this function to our options as tooltip.formatter, as shown in the following code:

var options = {
    // ...
    tooltip: {
        formatter: formatter,
        borderColor: '#f00',
        backgroundColor: '#ccc',
        shared: true
    }
};

The following is the output chart:

Note

The formatter function will render any string within the tooltip window. The this keyword refers to the data point that we are hovering over, so we can access the x and y values of the current point via this.x or this.y.

We can also change the appearance of the tooltip via options such as changing the border with tooltip.borderColor or the background with tooltip.backgroundColor.

It is even possible to disable the tooltip entirely by setting tooltip.enabled to false.

More details on tooltip options can be found at http://api.highcharts.com/highcharts#tooltip or in the individual plot options for a chart at http://api.highcharts.com/highcharts#plotOptions.

There's more...

By default, tooltips are not shared—every series displays only the data for its own tooltip. If you want to have all the data to be available from a single tooltip, you can set tooltip.shared to true. In this case, if we are using tooltip.formatter, we need to change how we refer to our y values, that is, instead of this.y, we need to use this.points[i].y (where i is the series index). In fact, any value that we would normally access via this.<value> needs to be accessed via this.points[i].<value> when we have the shared Boolean value set to true. The one exception to this rule is this.x, which is always common.

If we wanted, we could also make our tooltips look better by adding HTML to our formatter function. The formatter function supports the , , , , and   tags, which gives us a bit more flexibility in how we design our tooltips. This is shown in the following code:

var options = {
    // ...
    tooltip: {
        formatter: function() {
            return 'The <b>value</b> at this point is <em>' + this.y +'</em>';
        }
    }
}

Highcharts Cookbook

By : Nicholas Terwoord

Highcharts Cookbook

By: Nicholas Terwoord

Overview of this book

Related Content you might be interested in

Current Title:

Highcharts Cookbook

Creating custom tooltips

How to do it...

Note

There's more...