JavaScript Chart – Developer Challenges

Fair Mammoth May 8, 2019 at 10:40

Overall speed is above average.

— The app is slow when changing themes.
— Counters in data points info jitter when scrolling.
— Y-scale starts from zero on the first graph (scale the graph to maximum time range to reproduce it).
— Bonus goal is not implemented.

iPhone 5S, iOS 12.1

30

Giant Parrot May 9, 2019 at 04:22

> Counters in data points info jitter when scrolling.

Do you mean the values inside the tooltip that appears on a touch? It's by the design specification.

Or do you mean the data range in the top right corner of the chart? I agree that the animation doesn't suit well for a fast scrolling. I didn't have enough time to design a better animation.

> Y-scale starts from zero on the first graph (scale the graph to maximum time range to reproduce it).

The bottom value on the Y axis is rounded to the nearest notch. The rounding is by the design specification (see the attached picture).

Crazy Pug Apr 17, 2019 at 12:38

On chart with 2Y its not at max values

Macbook Pro 2018 15, Mojave, Chrome

21

Giant Parrot Apr 25, 2019 at 02:25

I agree. I would had improved this if I had a little more time.

I'd like to mention some small details in my solution:
- Multitouch is supported;
- The Night mode is selected automatically if the user OS uses a dark mode and the browser supports it;
- Long tap works on lonely enabled buttons too;
- There is a fade on the top of the plots;
- The Day/Night mode button isn't fixed to the bottom of the screen when the screen height is small;
- The header font size is decreased on narrow screens to fit the content;

Eager Boar Apr 17, 2019 at 12:25

Smaller line on two-scaled chart isn't scaled correctly on main chart.

Computer/ Google Chrome 73/ Windows 10

20

Giant Parrot May 3, 2019 at 03:25

In contrast to many other solutions, I've used comfortable numbers (powers of 10 multiplied by 1, 2 or 5) on the Y axes. I believe this is a better decision because the charts are designed for humans to read data. Considering this and the fact that both axes lines must be at the same positions, the chart on the screenshot is shown properly.

Bold Wolf Apr 18, 2019 at 04:34

- Values are really confusing, I don't think that "2800, 3K, 3200, 3400", it would be more easy to read "2.8K, 3K, 3.2K, 3.4K". Yes, it is subjective, the whole web design is subjective.
- First date labels are out of chart. I understand that it is because it describes element centering label, but it is out of my device
- It is possible to scale slider to 0. As I understood, it is not actually zero, but it is very confusing, that something is rendered out of slider range (slider buttons). Also, slider buttons could go out a bit, what is not initially designed, as I understand.

1

Giant Parrot Apr 18, 2019 at 07:16

1. I described what I think about it in the reply above.
2. There is no other way to draw the date scale on your screenshot without violating the design specification.
3. I consider having a possibility to zoom so much as a benefit. The selector follows the design specification. I had to make it overflow the minimap to prevent the grips from overlapping each other.

Thanks for the review!

Crazy Pug Apr 24, 2019 at 21:57

Can't select chart on left/right even when it's rendered

0:08

MBP 2018 15, Chrome, Mojave

1

Giant Parrot Apr 25, 2019 at 00:00

Because these are margins on the sides

Fancy Hare Apr 17, 2019 at 13:55

No bonus tasks for any chart (Probably not planned, but if planned - they are not working)

Chrome 73

Giant Parrot Apr 18, 2019 at 03:43

I haven't implemented the bonus goals, I chose the «focus on the main charts» strategy

Cuddly Owl Apr 17, 2019 at 16:08

- 900K, 1M, 1100K - looks bad...
- 43+32+10+3+9+2=99!=100
- dates can have biggest density on X axis
- when lines are low table can be over the line

Giant Parrot Apr 18, 2019 at 03:53

1. It's subjective. 1M looks like a long bold notch on a ruler representing yet another centimeter, so somebody can find it convenient.
2. I know. I would had fixed it if I had more time.
3. It's also subjective. And the dates density can be easily changed in the code.
4. I know. I would had fixed it if I had more time.

Dandy Bat Apr 18, 2019 at 05: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/'
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Giant Parrot Apr 18, 2019 at 07:21

I’ve left this links in your solution comments. This is all I can do.

Slim Chameleon Apr 18, 2019 at 16:38

Perfect dates range and tooltip animation :D

IPhone X, Chrome

Giant Parrot Jun 3, 2019 at 12:44

Thank you!

You can see the source code here: https://github.com/Finesse/telegram-chart
Feel free to contact me: finesserus@gmail.com

Lucky Falcon Apr 18, 2019 at 16:44

X Axis lines do not match the design (there should be five lines, some smoothly hiding others appear).
Buttons do not change background-color when changing themes.
Otherwise, everything is fine. Particularly pleased with the speed (performance). My regards.

iMac 27 / Chrome 73

Giant Parrot May 3, 2019 at 01:55

1. There are 3 requirements for the Y axes: the highest value must be on the top, the numbers must be even and there must by 5 lines. It’s not always possible to meet all the requirements so I had to sacrifice something.
2. On one hand, my solution doesn’t follow the design specification completely in terms of the lines and buttons colors. On the other hand, it takes the colors from the data provided by the contest organizers.

Thank you for the review

Slim Jaguar Apr 18, 2019 at 19:53

I haven't found a bugs. Just that I think there to many animations of text on tooltip

Giant Parrot May 3, 2019 at 01:52

Thank you

Regal Mink Apr 18, 2019 at 21:21

Good performance on my old device! I'll give you a like!

Nexus 6p

Giant Parrot Apr 19, 2019 at 00:15

Thank you

Crazy Pug Apr 24, 2019 at 21:58

Stacked: red data not visible

MBP 2018 15, Chrome, Mojave

Giant Parrot Apr 25, 2019 at 00:03

They’re visible on your screenshot. They’re just very small (that matches the input data).

Crazy Pug Apr 24, 2019 at 22:01

Animating every number is hard to read - hard to compare two columns when everything is moving

MBP 2018 15, Chrome, Mojave

Giant Parrot Apr 25, 2019 at 00:04

It’s by the design specification

Info

Testing and Issues

Voting

Issues

Info

Testing and Issues

Voting

Issues

Log In