Geek Answers Handbook

Fleet graph does not work in Firefox or Internet Explorer, only Chrome

I am using the Flot jQuery plugin to render graphs on my website. It works great in recent versions of Chrome, but doesn't seem to work in Firefox and Internet Explorer. I am using version 21 of Firefox and 10 of Internet Explorer. Here is 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'); });

Graphs are displayed as follows (correctly) in Chrome:

enter image description here

But, as in Firefox and Internet Explorer:

enter image description here

Has anyone encountered this problem before and knows the reason?

It's also worth mentioning that there are no console errors in Firefox or IE, and they both make an AJAX request and return the correct data, which I confirmed by looking at the network tab of the developer tools.

Edit: It’s also worth saying that if I rigidly set these values:

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

It works in Firefox, IE and Chrome.

+4
source share
2 answers

This was due to my date format. By default, MySQL returns DATETIME as YYYY-MM-DD HH:MM:SS when it needs to be YYYY-MM-DDTHH:MM:SS

+7
source

I also ran into such a problem, but in my case Datetime was already in the format “YYYY-MM-DD HH: MM: SS” like this.

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

But after that it does not show ok on firefox and IE.

Then I found solutions, just added “.000Z” to the date, and its a working 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 () returns 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);
0
source

More articles:


All Articles