javascript php mysql flot - php

Question

I encountered a new problem regarding my x-axis. My intention was to output a x-axis which indicates the time, while the y axis indicates the power. I decided to use time[i] and using graph.push([time[i], power[i]). However,my graph remains empty. I did an alert to output function and this was the result I got:
({1:"14:36", 2:"14:39", 3:"14:42", 4:"14:45", 5:"14:48", 6:"14:51", 7:"14:54", 8:"14:57"})
It's in hour: mins. What should I change to obtain a time X-axis?
$(function () {
var graph = [];
var power = <?php echo json_encode($data);?>;
var time = <?php echo json_encode($times);?>;
var row = <?php echo json_encode($nrow);?>;
//alert(time.toSource());
for (var i = 1; i < row; i += 1) {
//var test = time[i];
//alert(test);
graph.push([time[i], power[i]]);
}
var plot = $.plot($("#placeholder"),
[ { data: graph, label: "Power" } ], {
series: {
lines: { show: true },
points: { show: true }
},
grid: { hoverable: true, clickable: true },
yaxis: { min: 0, max: 25 }
});

Answer 1

You have to convert time from hour:mins to number
for (var i = 1; i < row; i += 1) {
//var test = time[i];
//alert(test);
var hhmm = time[i].split(":");
var hh = parseInt(hhmm[0]);
var mm = parseInt(hhmm[1])/60;
var tt = hh + mm;
graph.push([tt, power[i]]);
}
EDIT ( Eugene Wong) :
//var options = {
// xaxis: { ticks:[[1,time[1]],[2,time[2]],[3,time[3]],[4,time[4]],[5,time[5]],[6,time[6]],[7,time[7]],[8,time[8]]]}
//};
//alert(options.toSource());
var plot = $.plot($("#placeholder"),
[ { data: graph, label: "Power" } ], {
series: {
lines: { show: true },
points: { show: true }
},
grid: { hoverable: true, clickable: true },
yaxis: { min: 0, max: 25 },
xaxis: { mode: "time", timeformat:"%hh:%mm" }
//xaxis: { ticks:[[1,time[1]],[2,time[2]],[3,time[3]],[4,time[4]],[5,time[5]],[6,time[6]],[7,time[7]],[8,time[8]]]}
});
EDIT(Diode):
Even though I have created time charts before, this time setting x-axis configuration didn't work. Anyway I have fixed this by adding a tick formatter function. See the code below. 'graph' is the sample data array I used.
var graph = [[14.5, 10], [16.45, 15], [18.45, 20]];
var plot = $.plot($("#placeholder"),
[ { data: graph, label: "Power" } ], {
series: {
lines: { show: true },
points: { show: true }
},
grid: { hoverable: true, clickable: true },
yaxis: { min: 0, max: 25 },
xaxis: {
min:14,
max:20,
tickSize:0.5,
tickFormatter: function(value){
var hours = Math.floor(value);
hours = (hours < 10)?"0"+hours:hours;
var minutes = (value - hours) * 60;
minutes = (minutes < 10)?"0"+minutes:minutes;
return hours + ":" + minutes;
}
}
});

Answer 2

Have PHP output a Javascript timestamp instead of the already formatted date/time. Just remember a few caveats about timestamps:
PHP timestamps are seconds, whereas javascript ones are milliseconds, so multiply by 1000
flot plots in UTC time, so you may need to convert your timestamp to UTC before outputting
There is a good example of time series data on the flot website.
Remember to specify xaxis: { mode: "time" } in your flot options.