Flot Chart Tooltip Error - Tooltip Date is One Day Behind X-Axis Date

Question

I haven't been able to understand why the tooltip date is off by a single day. I believe the x-axis is correct, and I've been playing around with it, but this is killing me.

How can I fix this?

I'm passing in a JSON from a URL endpoint into variable jsonDataUrl. Here is an example datapoint: [{date: "2013-01-01", value: 50}]

And cssSelector is simply the placeholder.

Here's my code:

  $.getJSON(jsonDataUrl, function(res) {
   var data = [];
    $.each(res, function(i, entry){
      data.push( [new Date(entry["date"]), entry["value"]] );
    });

    var opts = { yaxis: { min: 0},
                 xaxis: { mode: "time", timeformat: "%m-%d"},

                 series: { lines: { show: true }, points: { show: true } },

                 grid: {hoverable: true, clickable: true}
    };

    $.plot($(cssSelector), [data], opts);

    $(cssSelector).bind("plotclick", function(event, pos, item) {
        if (item) {

            var x = parseInt(item.datapoint[0]),
                y = item.datapoint[1];
            var date = (new Date(x));
            var day = date.getDate();
            var month = date.getMonth() + 1;
            var formattedDate = month + "-" + day;

            $("#tooltip").remove();
            var label = "date: " + formattedDate + "<br/> count: " + y;
            showTooltip(item.pageX, item.pageY, label);
        }
    });
  });

Answer 1

I hope this is OK, but I would like to answer my own question. I'm happy that I discovered this silly mistake! I'm using Ruby on Rails to gather data and pass it to the Flot Chart via JSON url. Since the server records the data at UTC midnight, it was passing in the data to the tooltip at local timezone completely knocking it out of sync.

So, I basically changed the date.getDate() and date.getMonth() to date.getUTCDate() and date.getUTCMonth().