How can I make pausable, interactive financial chart stock simulator?

[erjcan]

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,
zoom in\out

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.

• This topic was modified 6 years, 8 months ago by erjcan.
• This topic was modified 6 years, 8 months ago by erjcan.

[Indranil]

@erjcan,

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.

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,
zoom in\out

The width of bars auto-adjusts itself based on the size of the chart and the viewport-range on zooming the chart.

2)speed adjusting slider to slow down/increase the drawing speed

You can handle this by changing update-interval in the above jsfiddle, as slider is moved.

___________
Indranil Deo
Team CanvasJS

[erjcan]

omg thank u Indranil!! This is my first personal JS project. I will try it out

[erjcan]

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.

[Indranil]

@erjcan,

Can you please create a jsfiddle reproducing the issue, so that we can understand your requirement better and help you out.

___________
Indranil Deo,
Team CanvasJS

[erjcan]

a gif is worth 1000 words.

i want to to make a canvas that is scalable like in this gif:

[erjcan]

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