Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Plug-ins
Troubleshooting
Glossary
Reference
JSFiddles

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 programmatically updating the chart asynchronously:

Your code can repeatedly call this method every time a new piece of data is received. The dataSet will be recalculated and the chart redrawn to reflect the new information.

Streaming full OHLC records:

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

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

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

Note that updateChartData() 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.

Streaming Last Sale:

The previous example assumed you have a server that is already 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.updateChartData(
	{ Last: 102.05, Volume: 100, DT: new Date("20160102T093000Z") },
	null,
	{ fillGaps: true }
);

or

stxx.updateChartData(
	{ 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. See the Dates, Times, and Time Zones tutorial for more details.

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.updateChartData(
	{ Last: 102.05, Volume: 100, DT: new Date("20160102T093000Z") },
	null,
	{ fillGaps: true, secondarySeries: "IBM" }
);

or

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

A note on initial data load

If you are using a Quotefeed to load initial data, be sure to set the refreshInterval to 0 (zero) when attaching it to the chart engine, to prevent conflicts with your asynchronous updates.

See the Advanced Data Integration Tutorial for more details on how to combine a static data load or quote feed with asynchronous updates.

Next steps