Automatic timezone conversion in JavaScript

Last week we pushed out our new graphing engine rewritten in JavaScript. It is very similar to the old Flash based graphs but included a few extra features such as the ability to toggle line series and a revamped server view with tabs for each metric. This is the first release of several – we wrote our own graphing because we have need for some additional functionality that was not possible with the Flash charts, plus it allows us to customise the experience to fit our own design.

Timezones are always a pain to work with. Full support for user preferences with timezones was added to Server Density, our server monitoring application, back in March 2009. We do all the timezone calculations server side and pass the Javascript graphs the data in JSON, with the timestamps for each point already converted.

However, it turns out that the JavaScript Date object does its own client-side timezone conversion based on the user’s system timezone settings. This means if the default date on the graph is 10:00 GMT and your local system timezone is Paris, JavaScript will automatically convert that 10:00 to 11:00.

This only works when the timestamp passed is always in GMT and so presents a problem when we have already done the timezone conversion server-side: the conversion will be calculated twice – first on the server, then again on the client.

We could let the JavaScript handle this but for every data point we pass a URL so you can click and be taken to the snapshot. This is provided in Unix timestamp format so even when the JS does the conversion, the snapshot timestamp would still be incorrect. To completely remove the server side conversion and rely only on the JS would require more changes and a lot more JS within the interface.

As such, we modified our getDate function to return the values in UTC, at least it is UTC as far as the JS is concerned but in reality we have already done the conversion on the server. This effectively disables the JavaScript timezone conversion.

This converts the Unix timestamp in JavaScript provided by the server into a date representation that we can use to display in the charts:

getDate: function(timestamp)
{
	// Multiply by 1000 because JS works in milliseconds instead of the UNIX seconds
	var date = new Date(timestamp * 1000);

	var year 	= date.getUTCFullYear();
	var month 	= date.getUTCMonth() + 1; // getMonth() is zero-indexed, so we'll increment to get the correct month number
	var day		= date.getUTCDate();
	var hours 	= date.getUTCHours();
	var minutes = date.getUTCMinutes();
	var seconds = date.getUTCSeconds();

	month	= (month < 10) ? '0' + month : month;
	day		= (day < 10) ? '0' + day : day;
	hours	= (hours < 10) ? '0' + hours : hours;
	minutes = (minutes < 10) ? '0' + minutes : minutes;
	seconds	= (seconds < 10) ? '0' + seconds: seconds;

	return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
},