Time Graph in Flot issue?

Question

I am trying to graph a month out in flot (per day) or possibly every other day, have a tick.

To get my time values, i am doing this:

$date = strtotime($rowData[0]); // 2013-01-01
$myData = json_encode(array($date*1000, 1234));
// I Then echo it out as an array into the javascript var.

For some reason, i can change the line: minTickSize: [1, day] to 2 (label every other tick i think) and nothing will change. Also, the time values are not showing up as well? What am i doing wrong?

Here is a JSFIDDLE

Here is an update with every two days...is there a rendering issue? Also, why is Oct 10, the only date shown? : JSFIDDLE UPDATE

Here is what i have as far as the javascript goes:

var myData = [[1380603600000,0],[1380690000000,0],[1380776400000,0],[1380862800000,0],[1380949200000,0],[1381035600000,0],[1381122000000,0],[1381208400000,0],[1381294800000,0],[1381381200000,0],[1381467600000,0],[1381554000000,0],[1381640400000,1],[1381726800000,0],[1381813200000,0],[1381899600000,0],[1381986000000,0],[1382072400000,0],[1382158800000,0],[1382245200000,0],[1382331600000,0],[1382418000000,0],[1382504400000,0],[1382590800000,0],[1382677200000,0],[1382763600000,0],[1382850000000,0],[1382936400000,0],[1383022800000,0],[1383109200000,0],[1383195600000,0]];

var plot = $.plot($(".subsChart"),
   [ { data: myData, label: "myData"} ], {
   series: {
       lines: { show: true,
                lineWidth: 2,
                fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.2 } ] }
             },
       points: { show: true, 
                 lineWidth: 2 
             },
       grow: { active: true,
                 steps: 30
             },
       shadowSize: 0
   },
   grid: { hoverable: true, 
           clickable: true, 
           tickColor: "#DDD",
           borderWidth: 1,
           borderColor: "#DDD"
         },
   colors: ["#FF0000"],
    xaxis: {mode: "time", timeformat: "%b %m", ticks: myData, minTickSize: [5, "day"]}, 
    yaxis: {ticks:3, tickDecimals: 0},
    tooltip: true,
 });

UPDATE

When i remove the ticks: myData option, the labels do show up, but all of them are on the same date? Also, none of the points even land on the dates.

Answer 1

As @Smokie suggested, you need to remove the ticks option. When you provide ticks, Flot skips any tick generation that it would normally do and uses what you provided instead, which in this case is invalid.

Once you do that, you'll notice that you have labels, but they all show Oct. 10. That's because your date format is %b (short month name) %m (month number). I'd guess that what you actually want is %b %d.

Note that you probably won't get a tick for every day because, depending on the size of your window, they wouldn't all fit. That's why minTickSize is a minimum rather than an exact value; Flot will ensure that at least one day (or however many you specify) separates the ticks, but may choose to spread them out further to ensure that they all fit.