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

4320
by time

Issues

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.
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;
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
- 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.
- 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!
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.
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
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
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
Good performance on my old device! I'll give you a like!
Nexus 6p
Giant Parrot Apr 19, 2019 at 00:15
Thank you
Can't select chart on left/right even when it's rendered
MBP 2018 15, Chrome, Mojave
1
Giant Parrot Apr 25, 2019 at 00:00
Because these are margins on the sides
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).
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
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).
Nobody added any issues yet...