How to plot a date range on the x axis in fleet diagrams?

Question

I use fleet graphs to display data for a certain period (which will be selected by the user, for example, the last 30 days, last 7 days, from January 1, 2013 to March 3, 2013, etc.).

So, I want to display a line chart with the x axis as the date.

eg. if I have two days, startDate and endDate, how to make the X axis display something like this:

Jan 1, 2013 | January 2, 2013 March 3, 2013

My code is as follows: Data (they are currently static).

var mydata = [ [1, 2.4], [2, 3.4 ], [3, 4.5 ], [4, 5 ], [5, 5], [6, 5], [7, 2 ], [8, 1 ], [9, 1.5 ], [10, 2.5 ], [11, 3.5], [12, 4 ], [13, 4 ], [14, 2.4], [15, 3.4 ], [16, 4.5 ], [17, 5 ], [18, 5], [19, 5], [20, 2 ], [21, 1 ], [22, 1.5 ], [23, 2.5 ], [24, 3.5], [25, 4 ], [26, 4 ], [27, 2.5 ], [28, 3.5], [29, 4 ], [30, 4 ], ]; var plot = $.plot($("#mychart"), [{ data: mydata, label: "Y-axis label" }], { series: { lines: { show: true }, points: { show: true }, shadowSize: 2 }, grid: { hoverable: true, clickable: true }, colors: ["#37b7f3", "#d12610", "#52e136"], xaxis: { mode: "time", timeformat: "%d/%m/%y", minTickSize: [1, "day"] }, yaxis: { ticks: 11, tickDecimals: 0, min:0, max: 5 } }); 

I understand that I need to make mydata look like [date, value]. Will this work? I have data dynamically generated by the server in JSON in

[{date, value}, {date, value} ...]

format. Please guide.

Answer 1

You will need to change the numbers to UNIX timestamps multiplied by 1000. This is from the API if you are looking for Time Series data:

Flot time series support is based on Javascript timestamps, i.e. everywhere the time value is expected or transmitted, Javascript tag number is used. This is a number, not a Date object. Javascript timestamp is the number of milliseconds since January 1, 1970 00:00:00 UTC. This is almost the same as Unix timestamps, except in milliseconds, so remember to multiply by 1000!

There is an example in the API. Net:

 public static int GetJavascriptTimestamp(System.DateTime input) { System.TimeSpan span = new System.TimeSpan(System.DateTime.Parse("1/1/1970").Ticks); System.DateTime time = input.Subtract(span); return (long)(time.Ticks / 10000); } 

Here is an example - http://jsfiddle.net/zxtFc/4/