Info

Open Website

Testing and Issues

You can test this app and submit issues during the testing period of the JavaScript Chart contest.

Entries with serious issues will not be able to win the contest, but even minor issues might be important for overall results.

Voting

2443
by rating

Issues

Fair Mammoth May 8, 2019 at 10:23
Overall speed slightly below average.

— Parts of expected animations are missing (e.g. filtering).
— The app is slow when scrolling and scaling.
— Y-scale doesn't disappear after filtering.
— Bonus goal is implemented, curious animations. However zoomed graphs ignore filters.
iPhone 5S, iOS 12.1; LG Nexus 5X, Android 8.1
30
Fancy Hare May 20, 2019 at 22:13
Thanks for review.

Not sure how the performance was measured, but I tested on very low-end devices and the performance seemed pretty decent, comparing to other works on the same devices. (Samsung Grand Duos GT-I9080 2013, Huawei TA-1021 2017). I measured fps, memory usage and CPU, but maybe it was necessary to measure something else. I even didn't switch to using canvas and kept using svg only because the performance measurements seemed very competitive. 

Would be nice to know the performance testing criteria for the future. 

Thanks for the contest. Good experience.

But somewhat unfair results. Some poor performance works and works with no bonus tasks got rewarded leaving out couple better works including this one. It is a bit subjective, I know, but I think there are some grounds for my disagreement.
D
Deleted Account Apr 21, 2019 at 15:48
Error in 3 graph
Windows 8, opera
23
Fancy Hare Apr 24, 2019 at 07:18
Yes, I agree with the video.

But this is not an error in the code or implementation. This issue has already been reported before and I replied.
The problem here is that the zoomed mode has all elements switched on by default even if you have deselected some in standard mode. I agree that this is not ideal UX, but I thought about it too late to implement.
The functionality itself works correctly and there are no breaks or errors though.
In chart#2 I can see right axis Y even after disable yellow line
22
Fancy Hare Apr 20, 2019 at 16:01
Yes, I agree. Unfortunately I forgot to sort it out and focused on other things. It's especially disappointing, because sorting it is a matter of 10-15 minutes.
Jittery animation on line chart
Macbook Pro 2018 15, Mojave, Chrome
21
Fancy Hare Apr 18, 2019 at 08:10
Yes, agree. But there is no animation for that actually. I used to have the same animation that you can see when selecting/deselecting lines for example, but it seemed very annoying to me and I decided that this part of the app works better without any animation. I might be wrong, of course.
D
Deleted Account Apr 17, 2019 at 12:35
the scale does not match the values
20
Fancy Hare Apr 18, 2019 at 08:12
Yes, I agree with the screenshot. But the problem here is not in wrong values of the lines, but rather in not ideal rounding of the y-axis legend values.
Buttons dance after several clicks (do you see spaces between buttons?)

If I enter in zoom, checkboxes change position and checked (should checked same at normal and zoom mode)

Also pie changed position, check screen
iPhone6 safari
10
Fancy Hare Apr 20, 2019 at 16:20
I agree with the issue with buttons (this one has already been reported before and I answered to it),
 
But I can not reproduce the issue with pie chart. I don't want to think that this is another fake, but let me attach some screenshots for pie chart for the same date and the same sectors selection.
No animations in X-axis and buttons not working in IE11 (ES5) but interesting approach to zoom navigation and all bonus targets completed. Good luck in contest. Voted
Windows 8/Chrome 73/IE11
3
Fancy Hare Apr 21, 2019 at 20:57
Yes, I agree. I decided to leave ES6 code as is for the contest purposes. Putting it through babel ( e.g. with webpack) makes it compatible with browsers that don't support ES6.

Thanks for the vote.
Positions for labels on X asix is fixed
Fancy Hare Apr 20, 2019 at 16:02
Yes, agree. I decided to concentrate on the main functionality and nice look. The date labels are positioned nicely and correctly anyways. There is a commented out piece of code in my .js file with the animation of the date labels, but I didn't like the result and decided to switch it off.
test zooming. wrong proportions in layout
Fancy Hare Apr 17, 2019 at 15:11
Disagree. The proportions (i.e. relative dimensions of the elements) are correct. This is not a bug. The functionality or layout is not broken. The tester just demonstrates more than 100% browser scale.
y-axis value not visible
Fancy Hare Apr 20, 2019 at 14:49
The y-axis colors are exactly as per the design specs at https://telegra.ph/JS-Design-Specification-04-07, but I agree that on some bright colors the labels would rather have more contrasted color.
In general, not bad, but as a solution it is better not to use. Because the monolithic code.
Fancy Hare Apr 17, 2019 at 15:21
Overruled as personal opinion :) The code btw is functional and pretty light-weight. No 3d party libs are used.
Tooltip doesn't hide after mouseleave (on all charts)
Fancy Hare Apr 17, 2019 at 15:23
It is the intended functionality. The tooltip should not be hidden on mouse leave in my opinion. I think that is more correct from the UX point of view.
"A long tap on any data filter should uncheck all other filters."
This requirement hasn't been implemented
Fancy Hare Apr 20, 2019 at 14:55
Disagree. The attached video demonstrates the long touch click for both mouse click and touch events.
use Ctrl + Shift + I
Fancy Hare Apr 20, 2019 at 15:10
Yes, that opens developer tools in Chrome. And by the way, my app is responsive and opening the tools doesn't effect the functionality and usability of it.
I'm getting freezes on 6x cpu slowdown (without animations as I understood)
Proc: Core i7-7700HQ
Fancy Hare Apr 20, 2019 at 15:09
The attached video demonstrates the 6x CPU slowdown. You can see that the animations are working, the resize/search and zoom in or any other functionality is not stopped, frozen or broken. Though I'm not sure that having 6x CPU slowdown in dev tools is a legit way of qualifying apps for performance, to be honest.

I've also tested on low-end device (Samsung Galaxy grand duos gt-i9082 of 2013) and it works absolutely flawless there.
According to the functional code. You have a monolith. Entities are mixed into one. Different entities.
eg:
getJSON("data/big/" + initialCharts[i] + "/overview.json", i, i, true);
Fancy Hare Apr 20, 2019 at 15:15
I don't see any issue in this report, to be honest.

If you are trying to make a code review, I would agree that my code has lots of things that could be improved, and I know that. But in limited time for development I had to concentrate on priorities first.
How will you expand further? If you just need to request data without further processing. Define another getJSON function?
These are the problems of the current implementation. This was discussed. It is impossible to reuse.
You can begin to rewrite the current graphs.

For the contest, the work is excellent, but not for general use. The animations are great.
Fancy Hare Apr 20, 2019 at 15:19
Thanks for saying that my work is excellent and for liking the animations.

As for the getJSON function in my code - it is actually used for both initial data fetch and for the zoom in functionality. In real-world scenario I would assume that the charts were implemented into some sort of ecosystem that already has its own function(s) for dealing with ajax. I would use such functions. Or write a wrapper function around my getJSON.

No need to be so radical saying that my code is impossible to be reused - that is far from the truth.
Dots stop working on the graphs. After navigating through the browser tabs.
Fancy Hare Apr 20, 2019 at 15:31
Can't reproduce.
The attached video demonstrates the correct work of 'dots' (a.k.a. circles) for line charts after navigating trough browser tabs.
Chrome 73
Not exact edges of the pie chart. Loops the event if you hover the mouse over certain edges of the pie chart items.
Fancy Hare Apr 20, 2019 at 15:39
Not sure what you mean by 'exact edges', but I don't see any problem with it in my work. The attached screenshot demonstrates how the pie chart looks.

Not sure what you mean by event loop. The sectors of the pie chart get separated and show tooltip on hover. If you hover over a sector - it works. Hover over another - it works too. The functionality is not broken in any way.

Might be that you are trying to pick on me and find some position of mouse cursor which would be exactly between two sectors to make jumpy hovering, but that is a bit irrelevant and even if considered an issue, then a very small one.
Probably poor testing. Watch video reviews.
Fancy Hare Apr 20, 2019 at 15:58
1. In the first video you clearly demonstrate that you try to pick on. I can see that the size of cursor compared to the size of the pie chart indicates some huge browser zoom. And in that zoom you are trying pretty hard to find that position between the sectors to make jumpy hover effect.
I would overrule such a report.

2. I attached a video, where you can see the correct url and the first thing is page refresh. In your video I'm not sure what has been done before - I can even assume you played with console or css a bit, taking into account previous picks. (Btw note the fonts and font weight of the texts in your video and in mine, and compare to the real work)

Really sorry that such things take place in coding contest. It's really demotivating. But I'm sure the telegram admins will understand that your comments here are just a kind of bulling.

I assume that a bunch of down-votes my work has received were by you and your friends out of hate and anger.
For some reason, squeezed graphics as well as in the canvas do ... Show the full power of SVG, expand to the full width of the screen.
Fancy Hare Apr 17, 2019 at 17:57
I disagree with this report.

Looks like this tester tries to pick on me.

The reports by Little Swan seem very biased and far from the truth.
There is also a pinpoint error when scaling. Selected point does not match selected. The outer space of the points with the inner svg of the canvas is poorly synchronized.
Fancy Hare Apr 17, 2019 at 17:58
I disagree with this report.

Looks like this tester tries to pick on me.

The reports by Little Swan seem very biased and far from the truth.
Fancy Hare Apr 20, 2019 at 16:06
I disagree with this report.

Looks like this tester tries to pick on me.

The reports by Little Swan seem very biased and far from the truth.

Probably the screenshot was faked. Please see the video attached.
Fancy Hare Apr 20, 2019 at 16:09
Probably a fake video report.
Please see attached a video with real work.
You first try to play. Before making such a conclusion. To play you need to squeeze and expand the schedule.
Enough bugs for today :)

All videos are real and this is all related to the mixing of entities about which I wrote earlier.
Fancy Hare Apr 20, 2019 at 16:10
I 'played' and can not reproduce. Please see a video attached to the previous report
Fancy Hare Apr 20, 2019 at 16:12
Disagree. 

I don't know how you do such screenshots. Taking into account your previous comments I would assume you just fake it. 

I can not reproduce the same issue.
Please see the _real_ video attached.
Fancy Hare Apr 17, 2019 at 18:47
Agree. Small css issue.
I think you're kidding :)) Points are not 100% synchronized. Check it by code.
Fancy Hare Apr 17, 2019 at 19:24
I disagree with this report.

Looks like this tester tries to pick on me.

The reports by Little Swan seem very biased and far from the truth.

Code checked. The points sync fine.
Video. Browser zoom 500.
Fancy Hare Apr 17, 2019 at 19:23
I tested myself just now with 500% zoom - everything works as it should.

Anyways, I think you testing my work on 500% zoom demonstrates your intentions to pick on me. That's why your reports should be considered as biased and not valid.
Test more. At different resolutions.
- night-mode doesn't change buttons colors

- page zooming allowed on mobiles

- left and right parts of a title are not on the same line

- too small hitboxes of draggable edges of mimimap-view, hard to hit

- no animations when line toggle on fruit-related charts

- after zooming-in on pie-chart and zooming-out mini-map colors glitched (see screenshot)
Fancy Hare Apr 17, 2019 at 21:45
- don't think there was a requirement to change button colors at night mode. The colors are coming from the data.

- best practices suggest to not disable standard browser features

- agree - non-critical small css issue

- the hitboxex have pseudo elements near them for better touch point, but I agree that subjectively it might be small for some fingers

- agree - percentage chart select/deselect doesn't have animations, the bar stacked chart has animations which are not very visible on small top Y value change.

- agree, I could reproduce this problem for situations when you go into zoom in state from 100% date range selection and then back.
Enter to Zoom mode on any chart, uncheck any boxes in zoomed mode (better to leave only 1 or 2 for understand issue). After that click on Zoom Out. The main graph must represent actual checked lines (from zoomed mode), but it show previous state.
Fancy Hare Apr 18, 2019 at 07:45
Yes, I agree with this. But the problem is not that code doesn't work, I just initially thought that I need to keep separate states of selected elements for standard and zoommed modes. After deadline I realized that having the same state of selected elements between modes is much better UX, but was too late :(
Would be nice to have a loader while the data is loading. Right now it freezes if the connection is slow.
Fancy Hare Apr 18, 2019 at 11:55
Yes, absolutely agree. Thought about it, but was too late to implement.
Yuriy Reznik Apr 18, 2019 at 11:37
No animation on stacked chart 3 on change line visible
Fancy Hare Apr 20, 2019 at 16:14
Even in this video sample you can see that animation is happening. The other thing is that the animation is not very obvious for bar charts on small value change and I agree that this could be improved.
Lines with Y=0 are narrower than other horizontal ones:
Fancy Hare Apr 18, 2019 at 11:54
Yes, agree. A very small and non-critical issue.
Unable to select time range by dragging in the preview area (outside of the current window).
Fancy Hare Apr 18, 2019 at 15:31
Can not reproduce and not sure I understand what you mean.
The time range is selected by means of dragging/resizing the magnifier (search block) in the timeline (navigator)
I select range 7 days at zoom mode. In header I see one day (should range from/to, I think)
Fancy Hare Apr 20, 2019 at 16:34
Yes, I agree. It should display the from - to dates on hourly graphs if multiple days selected, but I thought about it too late to implement.
I have it working well for pie chart, should have implement the same for other hourly graphs as well.
If you tap/click an area where a tooltip is expected, an zoom will occur
Fancy Hare Apr 19, 2019 at 22:02
Yes, I agree. Small issue - the tooltip receives the click event even before it appears. Could be improved. Though I would point out that the zooming happens for the correct date anyways.
It simple, without animations, but it works.
No animations no bugs, I would say.
Almost every bug comes from asynchronous code.
Fancy Hare Apr 20, 2019 at 19:06
Well, there are animations. I've made them a bit faster, because slow animations feel weird to me.
To see the animations you can select/deselect buttons on line charts or bars charts (though the animation is not very obvious on stacked bar chart - should have done it better). Also there are animations for zoom in/out and for horizontal lines and y-axis labels. The only missing animation is the stacked percentage chart select/deselect - simply didn't have time for it and it was low on my priorities list.
Chrome 73
As for me, your work is one of the best. Very nice animations, and was hard to find any issue :) But found very little one in pie chart. When you touches small arcs, it shows dark rectangle. Tested on mobile, so not sure about PC.
iPhone 7, iOS 12.2, Safari
Fancy Hare Apr 21, 2019 at 09:31
Yes, I agree. Thank you for this report - I haven't noticed it before.
I can confirm that it happens, though I could reproduce it on iPhoneX in Safari, but nowhere else :)
I guess it is due to bad handling of style.transform = "" by safari. Should have used a more reliable way to remove pie chart sectors separation.
It is not new bug. I wrote about pie dance above and record video to check.
Safari, iOS, iPhone6
Fancy Hare Apr 22, 2019 at 19:37
Yes, I agree.
This has already been reported before by Funny Giraffe. This is a safari only issue. Should have used style.transform = "translate (0,0) " instead of emptying this property.
Something wrong with 4 June 2018
Fancy Hare Apr 23, 2019 at 09:07
Yes, thanks for this report, I could just reproduce it myself and can confirm that there is such a bug.

It's something wrong with couple of dates - especially when there is big difference between the max and min values in some of the lines.

It's strange that if you view the 4th of June when entering the zoomed mode on the 1st of June - everything is correct.
The percentage chart tooltip is messy
iPhone SE / Safari 12.1
Fancy Hare Apr 24, 2019 at 07:06
Yes, I agree

A small styling issue for small screens that happens only at the middle of the chart.

The same issue has already bren reported earlier.
Nobody added any issues yet...