[英]How to plot a date range on X-axis in Flot Charts?
I'm using Flot charts to display data for a certain period (to be selected by the user, eg last 30 days, last 7 days, from 1st Jan 2013 to 3rd Mar 2013 etc) 我正在使用Flot图表显示特定时期的数据(由用户选择,例如最近30天,过去7天,从2013年1月1日到2013年3月3日等)
So I want to display a line chart with x-axis as the date. 所以我想显示一个以x轴为日期的折线图。
Eg if I've two days, startDate and endDate how do I make the X-axis display something like: 例如,如果我有两天,startDate和endDate如何使X轴显示如下:
1 Jan 2013 | 2013年1月1日| 2 Jan 2013........................3 Mar 2013
2013年1月2日........................ 2013年3月3日
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]. 我意识到我需要让mydata看起来像[date,value]。 Will that work?
那会有用吗? I've the data dynamically generated by the server in JSON in
我在JSON中用服务器动态生成数据
[{date, value}, {date, value}...]
[{date,value},{date,value} ...]
format. 格式。 Please guide.
请指导。
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: 您需要将数字更改为UNIX时间戳乘以1000.如果您搜索时间序列数据,则来自API:
The time series support in Flot is based on Javascript timestamps, ie everywhere a time value is expected or handed over, a Javascript timestamp number is used. Flot中的时间序列支持基于Javascript时间戳,即在预期或移交时间值的任何地方,使用Javascript时间戳编号。 This is a number, not a Date object.
这是一个数字,而不是Date对象。 A Javascript timestamp is the number of milliseconds since January 1, 1970 00:00:00 UTC.
Javascript时间戳是自1970年1月1日00:00:00 UTC以来的毫秒数。 This is almost the same as Unix timestamps, except it's in milliseconds, so remember to multiply by 1000!
这与Unix时间戳几乎相同,只是以毫秒为单位,所以请记住乘以1000!
There is a .Net example in the API: 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/ 这是一个例子 - http://jsfiddle.net/zxtFc/4/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.