timeline yAxis format with minutes:seconds only

问题:

I want to chart (line) a swimmer competition times over several meets.

For the series data I use the php code :

$datetime1=date('Y, m, d', strtotime($performances['PERF_DATE']."-1 month")); 
$datetime2='Date.UTC('.$datetime1.')';
$chrono=strtotime($performances['PERF_DATE']);
$data[] = "[$datetime2, $chrono]";

The xAxis timeline is for swim meet dates :

xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { 
        day: '%d/%m/%Y'}

The yAxis timeline is for the race times :

yAxis: {
         title : { text :'chronos'},
         type: 'datetime', //y-axis will be in milliseconds
         dateTimeLabelFormats: { //force all formats to be minute:second
         second: '%M:%S',
         minute: '%M:%S'
            },
            min: 0
             }

The xAxis timeline works perfectly. But I have a format issue with the yAxis: I cannot display the times in mm:ss format.

I'm using mysql 5.6.4 and the race times (PERF_TIME) are stored in type time(2) column , i.e. including 2 fractions of a second. Race dates (PERF_DATE) are stored in type datetime column.

For example, $performances['PERF_DATE'] in a php generated table will display : 00:01:33.91. But in Highcharts, on the yAxis, the value will be 16.Jan, and on the plot label it will show the value 1371333600. I guess those are microseconds. I assume I need to apply the correct time format function on $chrono=strtotime($performances['PERF_DATE']); Can someone help me with this ? Thanks a lot.

回答1:

Could you show your data output? For me it works fine, see: http://jsfiddle.net/Fusher/pQ5EC/12/ Make sure, your y-values are timestamps in milliseconds too.

    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        xAxis: {
            type: 'datetime'
        },

        yAxis: {
            type: 'datetime'
        },


        series: [{
            name: 'Temperatures',
            pointStart: new Date().getTime(),
            pointInterval: 24 * 3600 * 1000, 
            data: [1.5 * 60 * 1000,1.2 * 60 * 1000,2.5 * 60 * 1000,1.9 * 60 * 1000,],
        }]

    }); 

回答2:

Apologies, I did respond earlier but my answer was not saved by the system --- apparently there's an 8 hour black-out period where the author cannot answer his own question.

I figured it out: my times are formated hh:mm:ss.00 in mysql. I thgouht there was a function to easily convert mysql time format into milliseconds format, but apparently there's none. So I manually "explode" the time into milliseconds, using the code:

extract($performances); 
 //converts date from 2012-01-10 (mysql date format) to the format Highcharts understands 2012, 1, 10
$datetime1=date('Y, m, d', strtotime($performances['PERF_DATE']."-1 month"));

//getting the date into the required format for pushing the Data into the Series
$datetime2='Date.UTC('.$datetime1.')'; 

// value is in format hh:mm:ss.00
$chrono1=$performances['PERF_TIME']; 

// explodes value in mn, sec and microseconds
sscanf($chrono1,"%d:%d:%d.%d",$hours,$minutes,$seconds,$milliseconds);

// calculate total of milliseconds
$chrono=$seconds * 1000 + $minutes * 60 * 1000 + $milliseconds * 10;

$data[] = "[$datetime2, $chrono]";

Maybe there's a cleaner way? But I can now feed $data to Highcharts and it works perfectly.

Thanks.