(For more resources related to this topic, see here.)
We will now create the code for this chart:
var chart = $('#myFirstChartContainer').highcharts({
});
For our chart, we will implement the possibility to zoom on the x-axis:
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: 'Energy consumed (in KWh)'
},
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
}
]
$(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
}
]
});
});
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.
Further resources on this subject:
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…