Logo Questions Linux Laravel Mysql Ubuntu Git Menu

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

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:

enter image description here

But like this under Firefox and Internet Explorer:

enter image description here

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.

like image 966
John Dorean Avatar asked Mar 22 '23 08:03

John Dorean

1 Answers

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

like image 113
John Dorean Avatar answered Apr 25 '23 15:04

John Dorean