search

tvjsx / trading-vue-js

💹 Hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts. [Not Maintained]
https://tvjsx.github.io/trading-vue-demo/
MIT License
2.07k stars 629 forks source link

Beginner question: how do I group raw data to OHLC (in different time periods)? #209

Closed JohannesHoppe closed 3 years ago

JohannesHoppe commented 3 years ago

Description

I am not so familiar with the processing of financial data, so I hope for your patience. I have some data from Uniswap, every single trade is available. I want to group the raw data by different time frames to be able to display them in the TradingVue.js chart. As an example we can take this dead fake-pair:

https://app.astrotools.io/pair-explorer/0x97289c815c495e53ba1fa12c1fdfb61ad6a2867f https://tools.unimonitor.io/#/pair-explore/0x97289c815c495e53ba1fa12c1fdfb61ad6a2867f https://www.dextools.io/app/uniswap/pair-explorer/0x97289c815c495e53ba1fa12c1fdfb61ad6a2867f

So I actually need a function that aggregates the data into the OHLC format correctly. Ideally, of course, in different time frames (5, 10, 15 minutes, one hour...).

I found a promising library at valamidev/candlestick-convert. Unfortunately, it generates quite different output than on the above websites. You can see my first attempt in the demo. (unfortunately one candle is missing, there should be a total of 9 aggregated hours). 😞

How do you process raw data/ticks in JavaScript? Is there already a corresponding library I can use?

Demo

https://tvjs.io/play?a=hfht2hd0

Here you see 8 candles in my version:

Screen Shot 2021-02-12 at 17 11 42

But 9 candles on the other websites:

Screen Shot 2021-02-12 at 17 13 03 Screen Shot 2021-02-12 at 17 13 47

I would be very grateful if you could help me in any way! Many thanks in advance! 👍

C451 commented 3 years ago

Hi, you can look into https://github.com/tvjsx/trading-vue-js/blob/master/test/tests/Datasets.vue (npm run test, the last one). I use the datasets feature to sample from trades there.

JohannesHoppe commented 3 years ago

@C451 Many thanks for your quick reply. Your work here is awesome. 🙂 👍 I took a close look at the test and tried to understand how to get used with overlays. But this is indeed a bit tricky if you have never worked with Vue and TradingVue.js before....

I think I have set up the the data.json properly. But I still don't understand how to activate the datasource in the chart. How do I do it without an additional overlay?

Here is my progress so far: https://tvjs.io/play/?a=8br15mq9

OnlyC commented 3 years ago

I've done this project. Just want to give u some suggestions.

I use thegraph to get the data, graphql is really fast and u dont have to store the data. Then aggr to ohlc by a manual foreach function (nodejs backend).

C451 commented 3 years ago

@JohannesHoppe you need an overlay (with a script). But as @OnlyC mentioned, there are tons of ways to sample candles. E.g. https://github.com/tvjsx/trading-vue-js/blob/master/src/helpers/sampler.js

JohannesHoppe commented 3 years ago

@C451 Thanks for the input. I got it working with an overlay, but the solution changes several things. (the Y axis has no more numbers and the great overlays from tvjs-overlays don't get any more data either, unfortunately) I think it will really be the best solution to group the data manually and use the normal data-property until I have more deep knowledge.

Anyway, here is my updated playground, for all who are interested. The version works locally for me, but not online (see https://github.com/tvjsx/trading-vue-js/issues/210): https://tvjs.io/play/?a=8br15mq9

@OnlyC Sharing is caring, isn't it? 😉