klinecharts / KLineChart

📈Lightweight k-line chart that can be highly customized. Zero dependencies. Support mobile.(可高度自定义的轻量级k线图,无第三方依赖,支持移动端)
https://klinecharts.com/
Apache License 2.0
2.49k stars 623 forks source link

How to add real time price #165

Closed mwadudjar closed 1 year ago

mwadudjar commented 3 years ago

I made a chart in js. I can pull the OHLC prices from my API. Now I would like to add the real-time price that gets updated every second from my API. Where and how do I add this?

EDIT: I think I can figure it out with only updating the close price every second. Will try tomorrow.

EDIT 2: how do I use the updateData function? This doesn’t work: let testData = { close: latestPrice[0][1], open: kLineDataList.sort().reverse()[0][1], high: kLineDataList.sort().reverse()[0][2], low: kLineDataList.sort().reverse()[0][3], volume: Math.ceil(+data[5]), timestamp: kLineDataList.sort().reverse()[0][0], } chart.updateData(testData)

I had to reverse the order because the data from my api goes from old to new.

DanielMartini commented 3 years ago

That's how it works mate, check that the timestamp is the same of the latest candle and the price has changed, and you got it ✌️

smolleyes commented 3 years ago

hi!

still have the same problem, ok for the updateData my last candle change with new prices BUT when a new candle is needed i don t know how to do ?

what s the algo ?

let say i m on a 5 min timeframe, i have the timestamp of the last candle and can check if this timestamp is more than 5 minutes to create the next one ? but how ? :)

thanks

Julien-R44 commented 3 years ago

Guys if you are looking to update your charts tick by tick in real time, check out my PR which do exactly that: https://github.com/liihuu/KLineChart/pull/168

smolleyes commented 3 years ago

Have a complete exemple ? 😅