Using dates in jQuery Flot display

Question

I'm trying to use Flot to plot a graph with dates. I've followed the advice on this string: here but it doesn't seem to work for me. Here is my modified JavaScript (from that other question):

$(document).ready(function () {

    var d1 = [[1262818800,100],[1262732400,100],[1262646000,100]]; 

    var d2 = [[1262818800,23],[1262732400,23],[1262646000,23]];

    $.plot($("#placeholder"), [{data:d1,lines:{show: true},label:"Mountain"},{data:d2,lines:{show: true},label:"Valley"}],{yaxis: {label:"cm"}},
    {xaxis: 
      {mode:"time",
      timeformat: "%M:%S"
 }
    });

});

I get a graph, but it doesn't convert the x-axis into dates, and the values on the x-axis don't even line up with what I've got in the data variables. I've even tried multiplying each datapoint by 1000 to convert to Javascript timestamps, but that didn't help either. I've also tried the following timeformat variables, in case that was the problem:

"%M:%S", "%H:%S", "%y,%m,%d"

But no luck. Any ideas?

Answer 1

You should multiply to 1000 and use:

xaxis: {
      mode: "time"
  }

I tested this way. I can post the full code if you need.

This is a little italian post about using flot to measure my baby's height and weight:

• http://www.bits4beats.it/sviluppo-web/controllare-il-peso-del-bimbo-tramite-html-e-jquery/

The project code is downloadable from here.

Unzip it and open the file peso_giulia.html . Here you can find the d3 series.

You can replace the line

,[(new Date("2009/12/29")).getTime(),67]

with the timestamp version

,[(1282688250 * 1000), 100]