CODEWITHSUNDEEP
javascriptd3.jsheatmap
JMags1632
JMags1632

Reputation: 69

D3.js Heatmap Issue on Mobile Browser and Desktop Firefox browser

I'm getting an error on a d3.js heatmap app that I worked on in here: 

https://codepen.io/qwirkyrabbit/pen/XqmPgo

It's working well on google chrome and opera in the desktop device (imac) and I'm seeing the heatmap activity in the way that I expect it to be but when I check on any other browser like Firefox and in a web browser in mobile devices (Safari, Chrome), I'm getting unexpected results.

The x-axis was not showing the ticks or tick labels and the datapoints for the heatmap is limited to the leftmost part of the y-axis (not showing anything over the other year spans). Also, it’s not showing for previews on the codepen profile page in mobile as well.

A friend helped me troubleshoot it and he found an issue on firefox where I declared the datapoints mapped to a variable and he got an array full of Invalid Dates: Array [Invalid Date, Invalid Date, ...].

I tested this on Firefox of which I didn't see this particular issue. However, I tried his suggestion of testing to resolve the issue by using a manual implementation of Date.parse(), to no avail.

I also noticed this error on Firefox on the console: 

[15:09:45.168] Unexpected value NaN parsing x attribute. @ https://d3js.org/d3.v3.js:670

At this point, I'm not sure if it's coming from my my settings on d3 domain for x-axis, or the datapoints I'm returning for the x-axis for which I'm plotting in the heatmap. Halp!

Upvotes: 0

Views: 220

Answers (2)

JMags1632
JMags1632

Reputation: 69

I was able to find a solution for the issue surrounding mobile devices. After I turned on debugging for the iphone, I found the invalid dates array my friend was mentioning and rectified this situation by adding a conditional if statement when running in a mobile device taken from this link (What is the best way to detect a mobile device in jQuery?): 

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 return x(Date.UTC(d['year'], d['year'], 1))
}
else {
 return x(new Date(d['month'] + ' 01 ' + d['year']))
}

Turns out parsing dates for mobile devices required a little change in setting it as a date object. This currently helped me get the correct behavior on mobile devices - Date.UTC(): http://objjob.phrogz.net/js/method/777

Upvotes: 1

M -
M -

Reputation: 28482

Firefox isn't liking the way you're asking it to parse the date.

Simply change all instances of this:

new Date(Date.parse(d['month'] + '-01-' + d['year'])));

To this:

new Date(Date.parse(d['month'] + ' 01 ' + d['year'])));

Removing the - should fix it for you.

See the MDN Date.parse() specification for acceptable parameter formats.

Upvotes: 2

Related Questions