Streaming: Asynchronous Data Feeds

If you have a streaming information service (such as a WebSocket), and wish to provide a continually updating chart that automatically refreshes as new data (quotes) becomes available, the library provides the following method for programatically updating the chart asynchronously:

  • STXChart#appendMasterData

Your code can call one of these streaming methods every time a new piece of data is received. The dataSet will be recalculated and the chart redrawn to reflect the new information.

Streaming Data

Additional data can be pushed to a statically initialized chart.


Example: Streaming OHLC bars. Assume the last bar on the current chart is 2016-01-02.

// Update the current bar
stxx.appendMasterData([{"Date":"20160102", "Close":102.05}]);

// Update the current bar and start a new bar
stxx.appendMasterData([{"Date":"20160102", "Close":102.05},{"Date":"20160103", "Close":102.15}]);

Note that appendMasterData() takes an array of quotes. Often, it will be necessary to provide both the final OHLC data for the current bar as well as new data for an opening bar. This case would require an array of two bars. It may be necessary to send even more bars. Consider a "1 second" chart that is only updated once per minute. Each minute you would push 60 new bars on to the chart.

Last Sale:

The previous example assumed you have a server that is aggregating OHLC bars in real-time. Some servers can only provide a stream of actual trades. The charting engine can accept such a stream and roll up its own OHLC bars from the data.

Example: Streaming "Last Sale" data:

stxx.appendMasterData({"Last": 102.05, "Volume": 100, "DT":new Date("20160102T093000Z"}, null, {fillGaps: true});


stxx.appendMasterData({"Close": 102.05, "Volume": 100, "DT":new Date("20160102T093000Z"}, null, {fillGaps: true, useAsLastSale: true});

When streaming last sale data, the chart will construct and update OHLC bars. If you don't provide a date for this "tick" of data, then the current time will be assumed. Note: When dealing with Last Sale data, volume is considered to be "incremental". The volume will be continually added until a new bar is created and then started at zero again.

Note that this mechanism precisely follows the opening and closing times of the market . If no data arrives for a given time interval, a "dash" will be created on the chart. Trades that occur after the market close will be ignored. Note: If supporting extended hours trading, be sure to set the market ending times accordingly.

To stream trades for multiple symbols (such as when comparison charts are enabled), send the symbol as the third parameter:

Example: Stream last sale for a particular symbol:

stxx.appendMasterData({"Last": 102.05, "Volume": 100, "DT":new Date("20160102T093000Z"}, null, {fillGaps: true, secondarySeries: "IBM"});


stxx.appendMasterData({"Close": 102.05, "Volume": 100, "DT":new Date("20160102T093000Z"}, null, {fillGaps: true,useAsLastSale: true, secondarySeries: "IBM"});

Next Steps: