Home › forums › Using CanvasJS › How can I make pausable, interactive financial chart stock simulator?
Tagged: finance, stock
This topic contains 6 replies, has 2 voices, and was last updated by erjcan 11 months, 3 weeks ago.
I want to make my own desktop stock simulator replay of historical stock price moves.
I have a sample dataset of time-series price data available in CSV format.
Essentially, I just need to render this data on canvas. The main point is to accumulate more trading experience in less time. A user can speed trade thru sessions for entire year in a week!
I made a gif of another program made in Delphi(not open-source) to demonstrate the program I want to build.
The high quality tick data shows change every milisecond, so it has more fields than just “open high low.close,volume”, so i guess will need some milisecond clock counter to reflect every change in price.
This is what I want it to look like:
It seems canvas.js only does static rendering, drawing, I want to pause the “price”, start again, and speed up how fast\slow it draws candlesticks.
The canvas should have these tech features :
1)automatic scaling to fit in entire price range when price moves out of bounds of the canvas – all bars should adjust their size accordingly,
2)speed adjusting slider to slow down/increase the drawing speed
Can canvasjs help me implement all these features? I can pause stock price move, adjust the speed of movements, slow it down etc.
Go back or forward bar by bar.
Dynamic/Live chart is available in CanvasJS, please take a look at Tutorial on Creating Dynamic Charts. You can start / stop live update of chart as shown in this jsfiddle.
The width of bars auto-adjusts itself based on the size of the chart and the viewport-range on zooming the chart.
You can handle this by changing update-interval in the above jsfiddle, as slider is moved.
omg thank u Indranil!! This is my first personal JS project. I will try it out
how do I make it scrollable? I dont need to see the entire chart as the whole chart gets smaller if I draw huge period of time – a year or longer.
Can you please create a jsfiddle reproducing the issue, so that we can understand your requirement better and help you out.
a gif is worth 1000 words.
i want to to make a canvas that is scalable like in this gif:
gif is not working. i can’t attach it.
i found a somewhat working solution on tradingview, the feature called “replay”
thx u i think i m done
You must be logged in to reply to this topic.