javascript php mysql flot

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

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.

Answer 2

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;
                        }
                     }



         });