In the following example, we will plot a line chart for hourly temperature data for Pittsburgh, PA, for January 1, 2013.
Since we are dealing with the date/time series with regular time intervals, we will declare the type property of xAxis to be datetime, and while passing the pointStart and pointInterval properties to the series, we can easily plot the data mentioned.
Let's start with our basic HTML template containing the following code:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Highcharts Essentials</title> </head> <body> <div id="chart_container" style="width: 600px; height: 450px;"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/highcharts.js"></script> </body> </html>
Now, paste the following JavaScript code in the preceding HTML template to render the chart. We will examine it bit by bit in a moment:
(function() {
$( '#chart_container' ).highcharts({
chart: {
type: 'line'
},
title: {
text: 'Hourly Temperature Data for Pittsburgh, PA'
},
subtitle: {
text: 'Source: <a href="http://www.noaa.gov/"> National Weather Service Forecast Office</a>',
useHTML: true
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Temperature (°F)',
useHTML: true
}
},
series: [{
name: 'Temperature',
pointStart: Date.UTC(2013, 00, 01, 00, 00, 00),
pointInterval: 3600 * 1000,
data: [32, 32, 31, 31, 31, 31, 31, 31, 31, 31, 31, 31, 30, 30, 30, 30, 28, 27, 27, 26, 25, 24, 23, 22]
}]
});
})();In the preceding code, we first declared the type property of the xAxis to be datetime. This allows us to mention the number of milliseconds in order to set the starting point and the time interval. Highcharts then displays the appropriate format of the date/time on the axes.
The Date.UTC() method used in the series component is the native JavaScript method that takes in the date/time and returns the Unix timestamp, that is, the number of milliseconds elapsed since the midnight of January 1, 1970. The parameters passed are for year, month, day, hour, minutes, and seconds respectively.
Since we needed to plot the data on an hourly basis, we set pointInterval to 3600 * 1000, that is, the number of milliseconds in an hour.
The previous code will produce the following line chart:
In the next step, we will format the date/time on the x axis.
Currently, the chart is displaying the hours on the x axis with an interval of four hours. We can modify it by passing the number of milliseconds for x number of hours for the tickInterval property of the xAxis component:
xAxis: {
type: 'datetime',
tickInterval: 3600 * 1000 * 3
}Hence, we modified the tickInterval property to be 3 hours instead of 4:
Note
You can find more about the tickInterval property at http://api.highcharts.com/highcharts#xAxis.tickInterval.
You might have noticed that the first data label on the x axis is being interpreted as a day instead of an hour. We can fix it by overriding the default values of dateTimeLabelFormats. The dateTimeLabelFormats object allows us to format the date and time for a number of components of Highcharts. The default values are as follows:
{
millisecond:"%A, %b %e, %H:%M:%S.%L",
second:"%A, %b %e, %H:%M:%S",
minute:"%A, %b %e, %H:%M",
hour:"%A, %b %e, %H:%M",
day:"%A, %b %e, %Y",
week:"Week from %A, %b %e, %Y",
month:"%b'%y",
year:"%Y"
}We will change the day property to be the same as the hour property:
dateTimeLabelFormats: {
day: '%H:%M'
}Adding the preceding code to the xAxis component, we will get the following result:
We can also change the 24-hour time format to the 12-hour format by modifying the hour property:
dateTimeLabelFormats: {
day: '%I:%M',
hour: '%I:%M'
}Changing the format will give the following result:
It's more appropriate to show A.M. or P.M. with the 12-hour format. We can do it as shown in the following code:
dateTimeLabelFormats: {
day: '%I %p',
hour: '%I %p'
}The result of this modification will be as follows:
Currently, the tooltip is not very helpful when trying to understand the relation between time and temperature.
We need to modify the tooltip to say something like The temperature at 6 AM was 32 ºF.
We can achieve this result by using the formatter() method that Highcharts provides to format labels and tooltips.
Insert the following code for the tooltip component:
tooltip: {
formatter: function() {
return 'The temperature at ' + this.x + ' was ' + this.y + ' °F'
},
useHTML: true
}Here we referenced the date on xAxis by using this.x and the temperature by using this.y.
The tooltip is now formatted to display the following:
We still need to format the time to show the hour instead of the number of milliseconds. For this purpose, we will use the Highcharts.dateFormat() method that takes in the string format and the JavaScript date timestamp to produce a human-readable date format.
Modify the formatter() method to include the Highcharts.dateFormat() function:
formatter: function() {
return 'The temperature at ' + Highcharts.dateFormat('%I %p', this.x) + ' was ' + this.y + ' °F'
}The tooltip will now show the proper time of day:
So far, we have covered how to create line charts with regular time intervals, format the date/time with the help of various properties and methods that Highcharts provides, and finally format the tooltip to show data specific to our requirements. In the next example, we will look at creating line charts with irregular time intervals.