0

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!

JMags1632
  • 59
  • 9

2 Answers2

2

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.

Marquizzo
  • 17,230
  • 9
  • 36
  • 59
  • Very nice! Thank you. That solved it on the desktop Firefox browser and I'm not getting any of that NAN issue anymore. I still am getting that display issue on mobile devices though (on iphone 8 with both chrome and firefox). The funny thing is this only happens on an iOS device. I tried it on a Samsung Galaxy 8 and it displays correctly. – JMags1632 Apr 24 '18 at 00:08
  • Glad I could help! I can't debug on iOS for you, but you should consider using `alert(Date.parse(...));`, to quickly see if parsing the dates is what's giving you problems. – Marquizzo Apr 24 '18 at 00:16
  • No problem at all! I'm glad that I found a solution to one of the major issues on the app and I understand it might not solve all of them. I'm still doing research and troubleshooting so eventually there'll be a fix to it. – JMags1632 Apr 24 '18 at 00:44
  • Going to mark this as the solution since it solved the first half of my problem. The other part of the solution to my problem is listed below. – JMags1632 Apr 24 '18 at 05:50
1

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

JMags1632
  • 59
  • 9
  • Why don't you avoid using date parsing altogether? You can set a numeric month with [`Date.setMonth()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMonth) and the exact year with [`Date.setFullYear()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setFullYear). That way you don't have to sniff for devices that don't support text parsing. – Marquizzo Apr 24 '18 at 18:14
  • Sorry, I updated the pen already just didnt update the link here: https://codepen.io/qwirkyrabbit/pen/JvGawg – JMags1632 Apr 24 '18 at 18:46