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:
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' }
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.