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

• February 22, 2018 at 11:07 am #19721
  
  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, 9 months ago by erjcan.
  • This topic was modified 6 years, 9 months ago by erjcan.
  February 23, 2018 at 6:54 pm #19742
  
  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

  February 23, 2018 at 7:10 pm #19743
  
  erjcan

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

  February 23, 2018 at 7:41 pm #19745
  
  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.

  February 26, 2018 at 10:01 am #19760
  
  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

  February 26, 2018 at 4:26 pm #19766
  
  erjcan

  a gif is worth 1000 words.

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

  February 26, 2018 at 4:27 pm #19767
  
  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