Flot graph not working in Firefox or Internet Explorer, only Chrome

Question

I'm using the Flot jQuery plugin to render graphs on my website. It works perfectly in the latest versions of Chrome however seems to fail when in Firefox and Internet Explorer. I'm using version 21 of Firefox and 10 of Internet Explorer. Here's the relevant code:

$(document).ready(function() {

    var currentURL = window.location;

    // This will hold our plot data
    var playersPlots = [];
    var pingPlots = [];

    // Make an AJAX request to get the server stats
    $.get(currentURL + '/stats.json', function(data) {
        $.each(data.stats, function(index, value) {
            playersPlots.push([new Date(value.ServerStat.created).getTime(), value.ServerStat.players]);
            pingPlots.push([new Date(value.ServerStat.created).getTime(), value.ServerStat.ping]);
        });

        $.plot($('#server-stats'), [{label: 'Players', data: playersPlots}, {label: 'Ping (ms)', data: pingPlots}], {
            xaxis: {
                mode: 'time',
                timeformat: '%I:%M',
                'tickSize': [3, "hour"]
            }
        });
    }, 'json');

});

The graphs renders like this (correctly) under Chrome:

But like this under Firefox and Internet Explorer:

Has anyone ran into this issue before and knows the cause?

It's also worth mentioning that there are no console errors in either Firefox nor IE, and they're both making the AJAX request and getting back the correct data which I've confirmed by looking in the network tab of the developer tools.

Edit: Also worth saying that if I hardcode the values like so:

$.plot($('#server-stats'), [{label: 'Players', data: [[10, 10], [20, 20]]}, {label: 'Ping (ms)', data: [[30, 30], [40, 40]]}], {

it works in Firefox and IE and Chrome.

Answer 1

This was happening because of my date format. By default MySQL returns a DATETIME as YYYY-MM-DD HH:MM:SS , when it needed to be YYYY-MM-DDTHH:MM:SS

Answer 2

I also faced such type of problem , but in my case Datetime already was in "YYYY-MM-DD HH:MM:SS" format like this.

"2015-02-26T00:00:00"

But after that it not showing ok on firefox and IE.

Then I found the solutions , Just added ".000Z" into date, And its worked find for me.

     for (var i = 0; i < data.length; i++) {
            res.push([new Date(data[i].MONTH + '.000Z'), data[i].USEDUNIT]);
        }


min: new Date('2015-02-26T00:00:00.000Z'),
max: new Date('2015-03-04T00:00:00.000Z'),

for min max I also used moment.js () , because getDate() return 5 but I need 05 .

var minDate = new Date(moment().format('YYYY-MM-DD') + 'T00:00:00.000Z');
minDate.setDate(minDate.getDate() - 7);

var maxDate = new Date(moment().format('YYYY-MM-DD') + 'T00:00:00.000Z');
maxDate.setDate(maxDate.getDate() - 1);