Dynamic Data charts and events

[JamesCho]

I am attempting to create a game of this sort – https://www.bloomberg.com/features/2015-stock-chart-trading-game/

I need to generate a dynamic charts for which I am thinking of this https://canvasjs.com/html5-javascript-dynamic-chart/.

My question is how can i record data point values whenever mouse button is click down(buy) and up(sell).

Whenever mouse is clicked down/up record the data point at the right end of the chart window.
Down and Up is one complete trade/cycle of trade (for game purposes) – I have keep track of buy/sell data points and calculate the points/profits made in that chart replay.

[Shashi Ranjan]

@jamescho,

You can achieve the above requirements by attaching mousedown and mouseup events to the chart container as shown in this JSFiddle.

—
Shashi Ranjan
Team CanvasJS

[JamesCho]

Thanks, your answer addresses my question.

[JamesCho]

@shashiranjan,

Thanks helping with event recording.

I have another followup questions –
How can I restrict it to show only the latest 100 range of values and MAX value i.e stop the chart rendering at max nth value?
Is there a way to pull the data from a DB?

I looked at this, but this looks to be a static onetime rendering of values from DB
https://canvasjs.com/docs/charts/integration/asp-net-mvc-charts/how-to/asp-net-mvc-charts-data-entity-database/

[Shashi Ranjan]

@jamescho,

You can use shift method to display only the latest 100 dataPoints in the chart. Please take a look at this updated JSFiddle for the same.

—
Shashi Ranjan
Team CanvasJS

[JamesCho]

@shashiranjan – thanks, but now the “Profit/Loss” calculations freeze after 100th value (datalength), wondering if the chart container boundaries are affected by use of shift

[Shashi Ranjan]

@jamescho,

Please take a look at this updated JSFiddle.

—
Shashi Ranjan
Team CanvasJS

[JamesCho]

@shashiranjan – thanks, its working now.