JavaScript Chart – Developer Challenges

Fair Mammoth May 8, 2019 at 14:12

— Overall performance is above average.

— The design does not fully comply with the guidelines.
— Box jitters when scrolling.
— Long tap is missing.
— Graphs #3 and #5 are slightly slow when filtering.
— Bonus goal is implemented, however it's not possible to tap at the pie chart and animations are slow.

— Preview glitch for the last graph: https://contest.dev/chart-js/entry208#issue3599
— The left side of the slider doesn't scale the graphs (both on iOS and Android devices): https://contest.dev/chart-js/entry208#issue3196

iPhone 5S, iOS 12.1; LG Nexus 5X, Android 8.1

32

Bold Wolf May 9, 2019 at 09:40

Thanks for your feedback.

Fancy Hare Apr 22, 2019 at 21:49

The pie chart timeline (navigator) has broken section when pie chart is opened for a date close to the end of the chart.
When zooming the percentage chart at the beginning or at the end of the chart the pie timeline (navigator) can have less than 3 days.

Also the pie chart sectors don't separate and don't show tooltips on hover / touch / click.

Overall the work is ok and it definitely doesn't deserve so many down-votes!

P.S. I like some custom chart names - that's pretty creative.

1:13

Chrome 73

21

Dreamy Frog Apr 21, 2019 at 19:57

Great performance!
But I have problem with left range button. I can move right range, but left range button is not moving (maybe I can not touch on hint area), check it

iOS, Safari, iPhone6

11

Crazy Pug Apr 18, 2019 at 09:50

Percentage: no "100" label on Y axis

MBP 2018 15, Mojave, Chrome

3

Merry Ant Apr 17, 2019 at 14:35

Don't work on IE11

Win10

2

Bold Wolf Apr 18, 2019 at 04:13

You are right.
I left ** operator in code, which is supported in ES7. It could be easy to fix by just replacing or adding polyfills, but I hadn't enough time before submission time.

Little Antelope Apr 18, 2019 at 06:32

Isn't it supposed to send non-minified sources? "The JavaScript code in the archive should not be obfuscated."

2

Bold Wolf Apr 18, 2019 at 12:56

Not minified script is also uploaded but not included in index.html.
https://jschart.usercontent.dev/entry208/main.js

Regal Mink Apr 22, 2019 at 17:06

The lines are very pixelated. Without antialiasing the app works fast.

Chrome / Ubuntu 16

2

Giant Parrot Apr 24, 2019 at 08:11

1. The lines on the minimaps are too thin. It could has been done intentionally because WebGL can't draw lines other than 1px width fast.
2. The Day/Night word in the «Switch Mode» button shrinks after changing the device orientation.
3. The «M» letters on the Y axes have strange antennas.
4. The tooltip layout is broken on a narrow screen on some positions.

0:09

iPhone SE / Safari 12.1

2

Bold Wolf Apr 24, 2019 at 15:43

1. WebGL can draw thick lines and main chart is drawn with polygons in my implementation. I don't think it is not fast, and, actually, I'm very sad reading "it could has been done intentionally because WebGL can't draw lines other than 1px width fast". No. Btw, my minimap is redrawed only when it is necessary, so if it had been really slow, it had been slow only when user switches checkboxes.
2. It is very strange, because I have default <span> without any styles. However, thanks for your report.
3. Yes, Canvas 2D has bad implementation in strokeText. I had no time to make it in WebGL.
4. I have seen this first time, thanks for your screenshot.
Thanks for your issue report!

Giant Parrot Apr 18, 2019 at 03:14

The header is not adapted for mobile devices

iPhone SE / Safari 12

1

Bold Wolf Apr 21, 2019 at 18:01

I have seen your same issue report in other's submission, where date label was wrapped after "-" symbol. So what is your proposition? Do you want me to change the font size?
Thanks for your issue report!

Giant Parrot Apr 18, 2019 at 03:27

The tooltip has a wrong layout (sizes, aligns, etc.). Also it trembles during a movement.

0:05

1

Dandy Bat Apr 18, 2019 at 07:18

https://jschart.usercontent.dev/entry211/build/
Authors, please move my app's data one dir down. Nobody can view my app since it placed not at '/entry211/' and at '/entry211/build/'
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

1

Crazy Pug Apr 18, 2019 at 09:45

Left/right side of chart should go outside of container if range is less when all data

MBP 2018 15, Mojave, Chrome

1

Bold Wolf Apr 18, 2019 at 21:26

Thanks for your comment.
You are absolutely right, I had forgotten to do that.

Crazy Pug Apr 18, 2019 at 09:47

Preview corners not rounded

MBP 2018 15, Mojave, Chrome

1

Crazy Pug Apr 18, 2019 at 09:54

Percentage: when toggle data filters it animation jumps too fast, no smooth motion

0:05

MBP 2018 15, Mojave, Chrome

1

Regal Mink Apr 18, 2019 at 21:17

Really good performance on my old device! Have a like from me!

Nexus 6p

1

Large Beaver Apr 20, 2019 at 20:18

Not working in IE11, but like for the good performance and animations. Good luck in competition

Windows 8/IE11

1

Giant Parrot Apr 18, 2019 at 03:19

Design mismatch

MacBook Pro 2015 / Chrome 73

Giant Parrot Apr 18, 2019 at 03:21

No long button tap handling

Little Antelope Apr 18, 2019 at 06:25

- Too little 'y' axis
- Charts must go outside of screen
- No round corners in preview area
- Values below 'zero' line (should round to lowest 'beatiful' value)

Crazy Pug Apr 18, 2019 at 09:48

Bars and others: long tap should uncheck all data filters but current

MBP 2018 15, Mojave, Chrome

Crazy Pug Apr 18, 2019 at 09:49

Bars: spikes on Y go outside of max value

MBP 2018 15, Mojave, Chrome

Gentle Squid Apr 18, 2019 at 15:10

Wrong time range when zoomed in. Because you didn't convert unix dates to GMT, but use local time instead.

Gentle Squid Apr 18, 2019 at 15:15

Wrong zoom logic. Here is screenshot after zoom started. It looks like you display hour interval with the same width as day interval

Bold Wolf Apr 18, 2019 at 21:27

It is an animation.

Gentle Squid Apr 18, 2019 at 15:25

[UPDATE for my prev-prev comment]:

My bad. the only issue is that thumb is placed with a shift that is equal to local timezone shift by GMT

so this is minor

Bold Wolf Apr 18, 2019 at 19:07

Yes, thanks. :)

Slim Jaguar Apr 18, 2019 at 19:43

No snapping to days, month
Pie is static
Colors of y axis texts for bar charts is not correct

Bold Wolf Apr 18, 2019 at 21:21

I don't understand what do you mean, please, be more specific. What does "No snapping to days, month" mean?
All colors were taken from JSON data, so I don't understand what is wrong. However, I haven't used guideline to change colors in night mode, maybe you meant that.

Kingly Chicken Apr 18, 2019 at 22:49

Wrong local range

Bold Wolf Apr 19, 2019 at 04:24

Thanks for your issue report!
I am much interested, why chart is not scaled on this screenshot. Please make video how did you reproduce it.

Ace Piranha Apr 19, 2019 at 23:24

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.
Blue line must go higher on screenshot

Performance is very good

Bold Wolf Apr 20, 2019 at 14:08

There wasn't said that we should calculate that for every range. However, I agree with you, thanks for your issue report.
I'm very glad you like the performance of my implementation.

Kingly Chicken Apr 20, 2019 at 18:43

Ok, here’s the video how to reproduce wrong local y. I hope it will be helpful.

0:13

Iphone X

Bold Wolf Apr 23, 2019 at 18:12

I understood why does it happen, thanks for your video. :)
I think it is not even a bug, if there had been chart rendering at the left and right, it would had seen.
Sorry for my last confusing answer, I thought date label was wrong in your screenshot.
Thanks for issue report!

Info

Testing and Issues

Voting

Issues

Info

Testing and Issues

Voting

Issues

Log In