jQuery Flot Tick/Date Alignment

6
votes

Code

Example of my problem: http://jsfiddle.net/x46RQ/

Goal

I want the graph to be a bar graph like so: http://jsfiddle.net/Lbd85/ but obviously with dates as the x axis. If I add my data into that fiddle, it messes up like the one listed above as seen here: http://jsfiddle.net/73G7Z/

Questions

  • Why are all 3 days provided in the data variable not displaying?
  • Why are the bars not lined up with their appropriate x-axis ticks?
  • Why does changing the data and mode to time totally mess up what would otherwise be a functional and accurate bar graph?

Environment

  • jQuery 1.7.1
  • jQuery Mobile 1.0.1
  • Flot 0.7

Thanks

Let me know if any additional information is required.

1
javascriptjquery-pluginsflot

1 Answers

4
votes

Part #1, You specified a min y value of 0 in your flot options, and your data point #2 has a value of zero. So it's there but just very small, almost invisible.

Part #2, you have to offset your dates by the users timezone:

Something like this:

var tzOffset = new Date();
tzOffset = tzOffset.getTimezoneOffset()*60*1000;
data.push([(new Date("2012/02/20").getTime()-tzOffset), 1]);

Part #3, Your graph is a mess because you specified a width when in fact the option you were looking for is barWidth and you need to specify the width in terms of time, i.e. milliseconds. See here for how. Something like barWidth: 12*60*60*1000 looks OK.

So in summary, this is what it will look like: http://jsfiddle.net/ncTd3/