Highcharts

Exclusive offer: get 50% off this eBook here
Instant Highcharts [Instant]

Instant Highcharts [Instant] — Save 50%

Learn to create dynamic and customized charts instantly using Highcharts with this book and ebook

£8.99    £4.50
by Cyril Grandjean | August 2013 | Content Management Open Source

In this article created by Cyril Grandjean, the author of Instant Highcharts, we will create a line chart with a time axis and two Y axes. We will also customize the chart by customizing the tool tip and by adding the possibility to zoom inside the chart.

(For more resources related to this topic, see here.)

Creating a line chart with a time axis and two Y axes

We will now create the code for this chart:

  1. You start the creation of your chart by implementing the constructor of your Highcharts' chart:

    var chart = $('#myFirstChartContainer').highcharts({
    });

  2. We will now set the different sections inside the constructor. We start by the chart section. Since we'll be creating a line chart, we define the type element with the value line. Then, we implement the zoom feature by setting the zoomType element. You can set the value to x, y, or xy depending on which axes you want to be able to zoom.

    For our chart, we will implement the possibility to zoom on the x-axis:

    chart: {
    type: 'line',
    zoomType: 'x'
    },

  3. We define the title of our chart:

    title: {
    text: 'Energy consumption linked to the temperature'
    },

  4. Now, we create the x axis. We set the type to datetime because we are using time data, and we remove the title by setting the text to null. You need to set a null value in order to disable the title of the xAxis:

    xAxis: {
    type: 'datetime',
    title: {
    text: null
    }
    },

  5. We then configure the Y axes. As defined, we add two Y axes with the titles Temperature and Electricity consumed (in KWh), which we override with a minimum value of 0. We set the opposite parameter to true for the second axis in order to have the second y axis on the right side:

    yAxis: [
    {
    title: {
    text: 'Temperature'
    },
    min:0
    },
    {
    title: {
    text: 'Energy consumed (in KWh)'
    },
    opposite:true,
    min:0
    }
    ],

  6. We will now customize the tooltip section. We use the crosshairs option in order to have a line for our tooltip that we will use to follow values of both series. Then, we set the shared value to true in order to have values of both series on the same tooltip.

    tooltip: {
    crosshairs: true,
    shared: true
    },

  7. Further, we set the series section. For the datetime axes, you can set your series section by using two different ways. You can use the first way when your data follow a regular time interval and the second way when your data don't necessarily follow a regular time interval. We will use both the ways by setting the two series with two different options. The first series follows a regular interval. For this series, we set the pointInterval parameter where we define the data interval in milliseconds. For our chart, we set an interval of one day. We set the pointStart parameter with the date of the first value. We then set the data section with our values. The tooltip section is set with the valueSuffix element, where we define the suffix to be added after the value inside our tool tip. We set our yAxis element with the axis we want to associate with our series. Because we want to set this series to the first axis, we set the value to 0(zero). For the second series, we will use the second way because our data is not necessarily following the regular intervals. But you can also use this way, even if your data follows a regular interval. We set our data by couple, where the first element represents the date and the second element represents the value. We also override the tooltip section of the second series. We then set the yAxis element with the value 1 because we want to associate this series to the second axis. For your chart, you can also set your date values with a timestamp value instead of using the JavaScript function Date.UTC.

    series: [
    {
    name: 'Temperature',
    pointInterval: 24 * 3600 * 1000,
    pointStart: Date.UTC(2013, 0, 01),
    data: [17.5, 16.2, 16.1, 16.1, 15.9, 15.8, 16.2],
    tooltip: {
    valueSuffix: ' °C'
    },
    yAxis: 0
    },
    {
    name: 'Electricity consumption',
    data: [
    [Date.UTC(2013, 0, 01), 8.1],
    [Date.UTC(2013, 0, 02), 6.2],
    [Date.UTC(2013, 0, 03), 7.3],
    [Date.UTC(2013, 0, 05), 7.1],
    [Date.UTC(2013, 0, 06), 12.3],
    [Date.UTC(2013, 0, 07), 10.2]
    ],
    tooltip: {
    valueSuffix: ' KWh'
    },
    yAxis: 1
    }
    ]

  8. You should have this as the final code:

    $(function () {
    var chart = $(‘#myFirstChartContainer’).highcharts({
    chart: {
    type: ‘line’,
    zoomType: ‘x’
    },
    title: {
    text: ‘Energy consumption linked to the temperature’
    },
    xAxis: {
    type: ‘datetime’,
    title: {
    text: null
    }
    },
    yAxis: [
    {
    title: {
    text: ‘Temperature’
    },
    min:0
    },
    {
    title: {
    text: ‘Electricity consumed’
    },
    opposite:true,
    min:0
    }
    ],
    tooltip: {
    crosshairs: true,
    shared: true
    },
    series: [
    {
    name: ‘Temperature’,
    pointInterval: 24 * 3600 * 1000,
    pointStart: Date.UTC(2013, 0, 01),
    data: [17.5, 16.2, 16.1, 16.1, 15.9, 15.8, 16.2],
    tooltip: {
    valueSuffix: ‘ °C’
    },
    yAxis: 0
    },
    {
    name: ‘Electricity consumption’,
    data: [
    [Date.UTC(2013, 0, 01), 8.1],
    [Date.UTC(2013, 0, 02), 6.2],
    [Date.UTC(2013, 0, 03), 7.3],
    [Date.UTC(2013, 0, 05), 7.1],
    [Date.UTC(2013, 0, 06), 12.3],
    [Date.UTC(2013, 0, 07), 10.2]
    ],
    tooltip: {
    valueSuffix: ‘ KWh’
    },
    yAxis: 1
    }
    ]
    });
    });

  9. You should have the expected result as shown in the following screenshot:

Summary

In this article, we learned how to perform a task with the most important features of Highcharts. We created a line chart with a time axis and two Y-axes and realized that there are a wide variety of things that you can do with it. Also, we learned about the most commonly performed tasks and most commonly used features in Highcharts.

Resources for Article :


Further resources on this subject:


Instant Highcharts [Instant] Learn to create dynamic and customized charts instantly using Highcharts with this book and ebook
Published: July 2013
eBook Price: £8.99
See more
Select your format and quantity:

About the Author :


Cyril Grandjean

Cyril Grandjean is graduated from the school Supinfo (France) and from Oxford Brookes University (United Kingdom). He is currently working for the company Ausy as a software engineer. During his professional experience, he has mainly developed web projects in PHP and Java. He also spends some of his spare time developing applications in C# or mobile applications. On his website http://www.cyril-grandjean.co.uk

He also writes some articles about software development. During his past job for the company Distrame, he participated in the development of a solution called Efficacenergie, which measures the energy consumption (electricity, water, gas, and so on) of a building. By accessing a web interface developed with the Ext-JS library, customers can analyze their own energy consumption through customizable charts developed with the Highcharts library.

Books From Packt


Learning Highcharts
Learning Highcharts

Google Visualization API Essentials
Google Visualization API Essentials

Data Visualization: a successful design process
Data Visualization: a successful design process

Vaadin 7 Cookbook
Vaadin 7 Cookbook

ActionScript Graphing Cookbook
ActionScript Graphing Cookbook

MATLAB Graphics and Data Visualization Cookbook
MATLAB Graphics and Data Visualization Cookbook

Learning Qlikview Data Visualization
Learning Qlikview Data Visualization

FusionCharts Beginner’s Guide: The Official Guide for FusionCharts Suite
FusionCharts Beginner’s Guide: The Official Guide for FusionCharts Suite


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software