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

10356
by rating

Issues

Fair Mammoth May 8, 2019 at 11:13
— Overall performance is above average.

— Sloppy vertical scrolling (graphs #1 and #2).
— Zooming and filtering (graphs #3 and #5) are slow.
— The last chart and its zoomed version display different values: https://contest.dev/chart-js/entry81?sort=date#issue3141
— The third graph glitches after zooming out: https://contest.dev/chart-js/entry81?sort=date#issue3141
iPhone 5S, iOS 12.1; LG Nexus 5X, Android 8.1
33
Nice work, but at times sloppy horizontal scrolling.
iPhone 6 plus, iOS 12.1
33
Hip Hyena May 15, 2019 at 16:50
Thank you for your report, however I'm unable to replicate those issues with horizontal scrolling on my iPhone 6S (which should have similar performance to iPhone 6 Plus). See the attached video.

I hope your device was not in Low Power Mode when testing (or at least you did take that into account). Apple forces frame rate to 30fps in that mode, so some sloppiness is to be expected.
iPhone 6S
D
Deleted Account Apr 21, 2019 at 15:37
Error in 3 graph
Windows 8, opera
25
I see different number result in zoom and normal mode. Check 7 April for example, I attached screen zoom mode. Zoom:36285, normal: 34310
23
M
Zoom-in mode has very pronounced input lag?
Chrome 73.0.3683.90 on Android / Chrome 73.0.3683.103 on Windows
21
distortion and flickers when zooming
21
Performance is not so good, but great work anyway.
Lenovo A6000, Chrome
20
Really nice work, but performance could be better even on line chart
6
If you zoom in/zoom out fast - bar charts get broken
3
small Pears values on stacked bar chart sometimes are hidden, despite "ON"
1
Hip Hyena Apr 17, 2019 at 13:00
This works as intended. Their height is proportional to the values. If value is too low, the height is less than 1 pixel, so it becomes invisible.
Incorrect local min/max everywhere
1
Hip Hyena Apr 17, 2019 at 13:46
Once again, this is by design. Please read previous issues and explanations of the design choices I made.
Inconsistent number of days displayed in pie chart timeline (navigation) area - for extreme positioned days it can be less than 7 days
Chrome 73
1
Hip Hyena Apr 17, 2019 at 13:53
This is the correct behavior. If there's less days in the provided data files, there's no point in displaying empty space for the days that are not present in the dataset. Here you are zooming on the first day — there's no data for the previous 3 days.
Inconsistent number of days displayed in any chart's zoomed in timeline (navigation) area - for extreme positioned days it can be less than 7 days
Chrome 73
1
Hip Hyena Apr 17, 2019 at 13:55
Duplicate. Not an issue, correct behavior.
Investigation about performance.
Mac os - chrome.
1
Hip Hyena Apr 19, 2019 at 13:15
I should note that CPU throttling (which you are using) is not really indicative of the performance on real devices. It does not affect GPU or DOM updates, only script execution. I suspect that with a real 6x slowdown almost every solution would show bad results.

Also, I have a slow device detection in my code, which applies some degradation to visual elements to improve performance. However, this detection works by measuring time in which the page was initialised. As you showed in the video, you applied CPU slowdown after page load, so the detection did not work (it would work on a real slow device though).
The 'zoom in' for any chart except the final one (percentage) is broken for the first date of the chart. Other dates work fine (except for the single column chart, but that has been reported before)
Edge on Windows 10
1
Stacked: doesn't reach top. 1/3 of chart space is empty
MBP 2018 15, Chrome, Mojave
1
Hip Hyena Apr 24, 2019 at 23:40
Duplicate.
Percentage: when toggle data filters - areas animating outside of chart
MBP 2018 15, Chrome, Mojave
1
Hip Hyena Apr 24, 2019 at 23:45
That's called an overshoot. I don't see how it's an issue considering that we were given the freedom of implementing any transition we want.
Percentage: in night mode toggling data filters brings flashes on chart
MBP 2018 15, Chrome, Mojave
1
Hip Hyena Apr 24, 2019 at 23:47
I don't see any flashes in that video. If you consider sudden appearance of a filled-in area a flash, then that's is expected behavior.
Zoom trouble at 4 chart.
1. Zoom any column
2. Unselect Apples
3. Zoom out
Google chrome
value changes aren't animated
chart is rendered empty on slow connection while data is being loaded...
if zoom and move slider to the right - empty area reveals (extra x axis slot);
Hip Hyena Apr 17, 2019 at 12:58
This is due to missing data point in provided datasets. The reason is described in detail at the bottom of the page.
markers on line chart aren't horizontally aligned with cursor
If you zoom in/zoom out fast - line charts get broken also, in different way
black lines on area chart
bar rendering issues in zoomed mode
"All" item in area tooltip (not by design)
Total percentage is sometimes less than 100%
Hip Hyena Apr 17, 2019 at 13:02
Not a bug. Percents are rounded by design, and the sum of rounded values can be less than their actual sum.
The header is not adapted for narrow screens and the date change is not animated
Redmi 3
Hip Hyena Apr 17, 2019 at 13:08
I consider wrapping (at the appropriate place, after the dash) the correct adaptation. It is better than overlapping date over title. Also date is animated, but only in zoomed-in mode (as was requested by design). Animating date in zoomed-out mode results in too frequent and not visually pleasant updates.
Hip Hyena Apr 17, 2019 at 13:18
This is by design. The points that are not within the actual chart area (not including paddings at sides) are considered outside visible range. The chart is scaled only to point within that range.
When I long tap a button under the percentage chart, the selected line just appears without an animation
MacBook Pro / Safari 12.1
can not select values from edges
Hip Hyena Apr 17, 2019 at 13:19
This is by design. The points that are not within the actual chart area (not including paddings at sides) are considered outside visible range. See above.
Y doesn't reach top values
Macbook Pro 2018 15, Mojave, Chrome
Hip Hyena Apr 17, 2019 at 13:25
This is by design. Y labels are aligned to the round numbers (3500, 950000 and 45000 in these screenshots). The point of scaling charts is not be exactly "from top to bottom", but to better use screen space. I see more benefits from aligning Y lines, it helps with user's perception of values.
Wrong pair Y axis ranges
Hip Hyena Apr 17, 2019 at 13:30
See above, this is by design.
In night mode for 5th chart small parasite line visible on top of preview bar
iPhone 5s
Tooltip for 5th chart can show 101% in total
Hip Hyena Apr 17, 2019 at 13:31
Not a bug. Percents are rounded by design, and the sum of rounded values can be more than their actual sum.
Wrong colors in both modes. The correct colors are provided by this spec https://telegra.ph/JS-Design-Specification-04-07
Everything
Hip Hyena Apr 17, 2019 at 13:33
If you are talking about the chart lines colors, they are provided if the data files. As we are not replicating images, but making a chart library, I prioritize data files over design specs.
Very laggy
Chrome for Android / Google Nexus 6p
Initial search position for all charts is 6 January 2019 - 6 April 2019, not 6 March - 6 April
Chrome 73
Hip Hyena Apr 17, 2019 at 13:43
I don't think there was a requirement for initial range in the specifications. No design image was specified as an initial one.
Impossible to select less than approximately 3 weeks on daily graph and less than a day on hourly graph. The navigation on hourly graph is in one day steps only.
Chrome 73
Hip Hyena Apr 17, 2019 at 13:46
Both are by design. You can watch the design videos to see that hourly graph should be aligned to the days.
2nd chart goes bloken
iPhone5s
Nice area chart to pie chart transformation, man!
You're right Rich Horse! I would give the 1st place only for this sexy Pie transform.
I wanna eat that pie it's too awesome
Scalebar in pie chart moves only when cursor leaves scalebar zone
Web. Chrome. OsX
Hip Hyena Apr 17, 2019 at 21:20
I’m not really sure what you mean by that. Please provide a video showing this bug.
In second chart used fixed coefficient that links lines together. It is simple, but it will not work when one line goes up and other line goes down.

On screenshot blue line must be higher
Hip Hyena Apr 17, 2019 at 19:16
I think this is subjective opinion on this design choice, it should not be considered an issue. Splitting two lines depending on the current time range looks worse, in my opinion.
Nice work! How long did it take you?
Hip Hyena Apr 17, 2019 at 19:16
The whole week. Thank you!
Mouse input is not working on devices that supports both mouse and touch.

X-axis texts are covered with overlay (see screenshot)

Monthly view doesn't snap to months

Values on scrollbar don't match values on diagram (See screenshot 2)

On slow device blue blinks are presented during animations (See screenshot 3, I cant upload video, so this is single frame from it)
Hip Hyena Apr 18, 2019 at 01:40
> Monthly view doesn't snap to months

This was not a design requirement.

> Values on scrollbar don't match values on diagram (See screenshot 2)

Scrollbar has side handles, which should overlay currently visible content. Otherwise when the whole range is selected, these handles would stick out of the scrollbar, and that’s not was shown on mockups.
Pie tooltip doesn't show the sum of daily values (if you select 2+ days with the sliding window):
Hip Hyena Apr 18, 2019 at 11:31
The task specifically said “A percentage stacked area chart … that zooms into a pie chart with _average values_ for the selected period”.

I can agree that the sum would make more sense, but in this case the specs requested the average.
Zoom transition is a bit ugly:
1. something like first 30% of it it takes just to do some common rescale, then it rescales the selected week interval very fast, but doensn't rescale the rest of the chart
2. chart jitters when scaling. this is because you either do not properly clear the canvas, or round the values or something else
P.S. in the video the green chart blinks, but this is probably caused by screen recorder

anyway the transition is far from smooth
Chrome latest, Win10
Invalid state when double touch but solution is perfect
Xiaomi mi3/default browser
It is better to convert to svg. The application has a very poor picture quality.
Hip Hyena Apr 18, 2019 at 16:27
SVG usage would lead to worse performance. I was using SVG in the first stage, and was forced to switch to canvas in the second because of that. This is a deliberate design choice.

What you're showing is browser zoom feature, I presume. With the default 100% zoom the chart looks correctly.
- night-mode doesn't change buttons colors

- no animations on value change in interval or tooltip

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

- interval sometimes splits into two lines

- lags on zoom animations

- zoom-in works with no internet connection and showing some glitchy values
BQ strike mini, 4x1.3Hhz, 1Gb RAM, Chrome, Android 7
Hip Hyena Apr 18, 2019 at 16:39
- Duplicate. It should not. The colors were provided in the data files, I don't see why mockups should affect them.

- Duplicate. Date is animated in the zoomed-in mode, in other places I considered animation too distractive.

- They are. See the attached screenshot, both parts are correctly baseline-aligned.

Last two issues I can't comment, they are too vague and depend on your hardware.
Sometimes data for detail view of chart 4 is not showed
Multi-touch doesn't work
Redmi 8, chrome
Hip Hyena Apr 18, 2019 at 18:22
Duplicate. Dreamy Frog already noted that.

To everyone: guys, I know that I'm now sitting at the top of the rating and my work is the obvious target for your critique (and I'm thankful for all this feedback I'm getting now!).

But please, read previous issues before posting your own. These duplicates won't help nor me, nor the Telegram team.
Animation of chat 3 on iPhone 5s looks strange
Y scaled chart implementation depends on input data values.
In other words, if data for "Views" and "Shares" would have bigger difference, one of them would not be scaled correctly. Because scale for one linearly depends on other.

See picture. For example, how it renders data from first chart.
Hip Hyena Apr 18, 2019 at 19:12
The whole point of having different chart types is to be applicable to different kinds of data. As I see it, the y_scaled chart is useful for values, which are positively correlated, but have different order of magnitude. The provided dataset is an excellent example of such data: number of shares vs number of views. They are correllated, but number of shares is always much smaller than number of views. So this chart helps to see local differences between them.

Anyway, I'm not considering this an issue, because this is another design choice, which is described right above the chart itself.
The 'zoom in' on single column chart doesn't load any data for any day.
(Selecting the date range by clicking outside the magnifier in the timeline works perfectly though)
Edge on Windows 10
Doesn't respond to input at all in Epiphany.
PC / Epiphany 3.32.1.2 / Arch Linux
The buttons change size after click
MacBook Pro 2015 / Safari 12.1
Moving from point to point (selected round marker on the chart) is not animated, but this behavior shown on video example provided by telegram (example video #1), so should be
Hip Hyena Apr 19, 2019 at 18:30
I decided that this animation won't look well in real-world scenarios. What happens when user selects a point on the other side of the chart? Should markers fly to it directly? Or should they jump up and down following their chart lines? Either way, this would look weird and add additional delays for such frequent action.
But on svg the graphics will always be on top. What will you try to achieve on canvas (which will lead to svg programming)
Hip Hyena Apr 20, 2019 at 06:03
I found that updating complex SVG shapes in each frame usually has a larger performance penalty than drawing on canvas. Most of the winners in the first stage were using canvas.

In the end, what’s important is what users see, not which technology was used. So let’s not turn this into discussion “what’s better, canvas or SVG”, we have a chat for that.
Hip Hyena Apr 20, 2019 at 06:04
I’m not really sure what you’re trying to show with that screenshot. Looks good to me.
Unexpected "triangle animation" effect when zoom in/out data at the edge.
Hello, mr. FirstPlaceByRatingSoFar! =)
I'm aware that you're busy explaining that many bug reports you got are duplicates, but this is new (yep, I've read all 62 issues so far): clicking toggle buttons triggers some blinking; I suppose it's some invisible DOM object, probably wrong positioned tooltip.
Hip Hyena Apr 21, 2019 at 20:05
Thank you for your report. Sorry, but I was unable to reproduce this problem. Can you please specify which browser are you using?

Also, if possible, try to check via developer tools if there's an actual DOM element there (I'm pretty sure I don't have anything that looks like that rectangle). I will be very thankful for your help.
>I was unable to reproduce this problem.

Sorry, but this is definitely something within your page. I even ran "Incognito" mode which switches off all the extensions and still able to reproduce this behavior. I provided my specs below. As for the DOM tree, nope, nothing unusual here, at least near the buttons.

Some hints for you:
- window is fully maximized (1920 width)
- page is in its tops, i.e. window.pageYOffset === 0
- Night Mode is on
- left bottom corner of the rectangle always visually matches the point where the check mark disappears (probably some leftover of svg transformation?)

Reproducible with 100% chance only on that specific red button under those conditions, but every button has this effect, more or less, as you can see on the video.

PS: cannot attach a video because it is slightly larger than max allowed size, please follow this link instead:
https://drive.google.com/file/d/1ZTgC-xikF8YD5npaK0fzD3GtKdIGDy_J/view
Desktop PC / Chrome 73.0.3683.103 / Windows 10
Hip Hyena Apr 22, 2019 at 15:28
Thank you once again, you were very helpful. You're probably right, it does seem that this issue is related to scaling svg background on legend buttons.
Y
Yuriy 🐼 Panarin Apr 23, 2019 at 12:52
Rly great jobs
Small issue what you can get more performance:
1. Not use new Date() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
2. Caching the date by timestamp
This is not particularly an issue, just an observation.

I think that for speeding up the zoom in, there is a fetch (ajax) call for a hovered date after some time it's been focused behind the scenes. I personally don't think this is a correct approach to treating user actions, but I can see the good idea behind it.

The thing is that the same dates can get the ajax request multiple times while navigating through the preview, whereas I think at least this part could be cached, to not have multiple ajax calls for the same date without any reason, especially because we don't know yet if the user is going to zoom in that date at all.

But again, this is not an issue - just though it might be helpful if the author is going to continue the app development later.
Chrome 73
Hip Hyena Apr 24, 2019 at 23:55
You're right. As I described on the page itself, my app prefetches daily datasets early, when user hovers a data point (and does that with a debounce of 300 ms to prevent too frequent request).

But you're wrong about me not caching this data :) It is cached, but only for the last day. As soon as you move mouse over another day (and 300 ms delay passes), the old data is flushed and new one is requested.

I could keep more days in cache, but then it would increase the memory usage (each day is just 7 KB, but still). I considered that caching just one day will be enough.
Preview: doesn't reach top
MBP 2018 15, Chrome, Mojave
Hip Hyena Apr 24, 2019 at 23:40
Duplicate. You posted the same issue on April 17 at 13:18, and I already explained why this is a deliberate design choice.
Bars: doesn't reach top
MBP 2018 15, Chrome, Mojave
Hip Hyena Apr 24, 2019 at 23:44
And yet another duplicate. Not only you are reporting something that was reported before (and was replied to), you're repeating the same reports about different chart instances.

Are you doing that on the last day of testing just to flood people with issues?
It is not critical issue, but % in one pie value would be better in center of circle.
Hip Hyena Apr 25, 2019 at 12:51
I personally like this asymmetry. It feels a bit like a three-dimensional ball instead of just flat boring circle.

Anyway, this was not specified as part of the task, so we can’t call one decision better than another.
Nobody added any issues yet...