README.md 1.4 KB
Newer Older
Vasily Belolapotkov's avatar
Vasily Belolapotkov committed
1
# Telegram chart contest
Vasily Belolapotkov's avatar
Vasily Belolapotkov committed
2 3 4

The app is a JavaScript app for showing simple charts data based on provided input data.

Vasily Belolapotkov's avatar
Vasily Belolapotkov committed
5
## Contest challenge
Vasily Belolapotkov's avatar
Vasily Belolapotkov committed
6 7 8 9 10 11 12

Note: you may not use specialized charting libraries. All the code you submit must be written by you from scratch.

The criteria we’ll be using to define the winner are speed, efficiency and the size of the app.

The app should show 4 charts on one screen, based on the input data we will provide within the next 24 hours. We will announce how you can submit your finished work later in this channel.

Vasily Belolapotkov's avatar
Vasily Belolapotkov committed
13
### Designs
Vasily Belolapotkov's avatar
Vasily Belolapotkov committed
14

Vasily Belolapotkov's avatar
Vasily Belolapotkov committed
15
![Chart demo](https://vbelolapotkov.com/img/tg_contest_demo.mp4)
Vasily Belolapotkov's avatar
Vasily Belolapotkov committed
16

Vasily Belolapotkov's avatar
Vasily Belolapotkov committed
17 18 19
![JS Chart day mode](https://vbelolapotkov.com/img/tg_contest_js_400.png)

![JS Chart night mode](https://vbelolapotkov.com/img/tg_contest_js_night_400.png)
Vasily Belolapotkov's avatar
Vasily Belolapotkov committed
20

Vasily Belolapotkov's avatar
Vasily Belolapotkov committed
21
### Data format
Vasily Belolapotkov's avatar
Vasily Belolapotkov committed
22

Vasily Belolapotkov's avatar
Vasily Belolapotkov committed
23 24 25 26 27 28 29 30 31 32 33 34
Data provided in JSON file as input data for the 5 charts. It contains a vector of JSON objects ('chart'), each representing a separate graph.

`chart.columns` – List of all data columns in the chart. Each column has its label at position 0, followed by values.
x values are UNIX timestamps in milliseconds.

`chart.types` – Chart types for each of the columns. Supported values:
"line" (line on the graph with linear interpolation),
"x" (x axis values for each of the charts at the corresponding positions).

`chart.colors` – Color for each line in 6-hex-digit format (e.g. "#AAAAAA").

`chart.names` – Names for each line.