Home forums Using CanvasJS How can I make pausable, interactive financial chart stock simulator?

Tagged: ,

This topic contains 6 replies, has 2 voices, and was last updated by  erjcan 9 months, 3 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #19721

    erjcan
    Member

    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:

    uu

    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 9 months, 4 weeks ago by  erjcan.
    • This topic was modified 9 months, 4 weeks ago by  erjcan.
    #19742

    Indranil Deo
    Member

    @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

    #19743

    erjcan
    Member

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

    #19745

    erjcan
    Member

    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.

    #19760

    Indranil Deo
    Member

    @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

    #19766

    erjcan
    Member

    a gif is worth 1000 words.

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

    #19767

    erjcan
    Member

    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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.