FCC Heatmap challenge issue on Mobile Devices

FCC Heatmap challenge issue on Mobile Devices
0.0 0

#1

Hey guys!

I’ve finished the FCC Heatmap challenge (https://www.freecodecamp.org/challenges/visualize-data-with-a-heat-map) just yesterday.

I was actually kind of happy with the work I put on my version of the heatmap, found here: https://s.codepen.io/qwirkyrabbit/debug/XqmPgo/bZAQWyXqGEBM

However, I’ve tried checking on mobile devices and came up disappointed (iphone 8 for example). 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.

I’ve tried some fixes I’ve found online like adding tags with utf, testing it on debug mode in codepen.io and removing unnecessary lines in the program to no avail. Has anyone experienced this issue on mobile and if so, how was it solved?


#2

First of all congratz, you definitely achieved the result! ( by the way the debug view expires, here’s the correct link: Codepen - FCC HeatMap Project ).
I’d also suggest to use the same number of fractional digits for the reference average temp and the deltas
That said, what browser you used on your phone and on your pc? I’m using Opera atm and I see no problem ( just checked with my phone using Chrome: no problem again even if you have to navigate because it’s not responsive ^^ )

EDIT:
I reopened it now with mozilla, and the result match with your description ^^
i put a console.log(xAxisData) after its declarations and this is what i obtained:

So, the problem seems to be in the Date.parse method as far as i can see, and docs seems to confirm this hypotesys ( MDN - Date.parse() )


#3

Ah. Thank you sir and thank you very much for helping me troubleshoot this! I think I will try manually parsing the string and implementing your suggestion as well.

I used Safari and Chrome on iOS. I’ve also tested it with chrome on a Samsung Galaxy 8 but it didn’t reproduce the issue. Apple devices, you know…


#4

I’ve found some more solutions to the FCC Heatmap challenge issues I’ve encountered. They can be found on: https://stackoverflow.com/questions/49990743/d3-js-heatmap-issue-on-mobile-browser-and-desktop-firefox-browser/49994047#49994047

Hope this is helpful to other devs that encounter this issue.