Question

100

How to plot a date range on X-axis in Flot Charts?

rated 0 times [ 107] [ 7] / answers: 1 / hits: 18993 / 11 Years ago, mon, march 4, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

analiseb

Add To Favorites

Follow

Total Points: 252

Total Questions: 96

Total Answers: 106

Location: Singapore

Member since Sat, Jul 25, 2020

4 Years ago

analiseb questions

1 Cypress Best Practice - Store and compare two values

Tue, Sep 28, 21, 00:00, 3 Years ago

1 Cannot set property '' of undefined angular

Tue, Oct 6, 20, 00:00, 4 Years ago

1 Refresh page on this.props.history.push with same url

Tue, Jun 30, 20, 00:00, 4 Years ago

1 VUE - data object is passed as a reference always or sometimes it is copied?

Fri, May 8, 20, 00:00, 4 Years ago

1 Can Javascript spread operator include undefined fields of an object?

Wed, Jan 16, 19, 00:00, 5 Years ago

View All

answered 11 Years ago kaylinshayd · Accepted Answer

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