Been breaking my head for the past couple of hours to solve a tiny issue in my Highcharts chart with a timeline, so here is my solution. Use it to your benefit.
The issue is that you can't just use the timestamp from an MySQL database (format: Y-m-d H:i:s) in the Highchart script as the Javascript Date.UTC counts the months differently... minus 1 so from January = 0 to December = 11 *arrggg*
I've tried several proposed solutions for a conversion directly in the MySQL query but noticed that this resulted in incorrect results, so I abandoned that approach and went for a little PHP based function instead:
function format_as_jsDateUTC( $timestamp )
{
$dt = DateTime::createFromFormat( 'Y-m-d H:i:s', $timestamp );
$ret = $dt->format('Y, ');
$ret .= $dt->format('n')-1 == 0 ? 0 : $dt->format('n')-1;
$ret .= $dt->format(', j, G, i, s');
/**
* [Y] full numeric representation of a year, 4 digits
* [n] numeric representation of a month, without leading zero, minus 1 for usage in Javascript (from January = 0 to December = 11)
* [j] day of the month without leading zeros
* [G] 24-hour format of an hour without leading zeros
* [i] minutes with leading zeros
* [s] seconds with leading zeros
*/
return $ret;
}
echo format_as_jsDateUTC( '2017-01-05 09:08:07' );
// results in: 2017, 0, 5, 9, 08, 07
If anyone has any improvements or does know a correct way for achieving this in directly in my SELECT query then I'm always interested to hear as I can only learn from the feedback :)
Last but not least - in the jQuery code for my zoomable Highchart spline chart I used it as:
pointStart: Date.UTC(<?php echo format_as_jsDateUTC( $stats['date'] ); ?>)
See also the full Highcharts code (without the PHP as it's on JSFiddle) at: http://jsfiddle.net/golabs/hfj6mug1/