I'm using Flot charts to display data for a certain period (to be selected by the user, e.g. last 30 days, last 7 days, from 1st Jan 2013 to 3rd Mar 2013 etc)

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

E.g. if I've two days, startDate and endDate how do I make the X-axis display something like:

1 Jan 2013 | 2 Jan 2013........................3 Mar 2013

My code is as follows: The data (currently it's 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 realize that I need to make mydata look like [date, value]. Will that work? I've the data dynamically generated by the server in JSON in

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

format. Please guide.

I'm using Flot charts to display data for a certain period (to be selected by the user, e.g. last 30 days, last 7 days, from 1st Jan 2013 to 3rd Mar 2013 etc)

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

E.g. if I've two days, startDate and endDate how do I make the X-axis display something like:

1 Jan 2013 | 2 Jan 2013........................3 Mar 2013

My code is as follows: The data (currently it's 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 realize that I need to make mydata look like [date, value]. Will that work? I've the data dynamically generated by the server in JSON in

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

format. Please guide.

• javascript
• jquery
• charts
• flot

1 Answer 1

You will need to change the numbers to UNIX time stamps multiplied by 1000. This is from the API if you search Time Series Data:

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

There is a .Net example in the API:

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/zxtFc/4/