Class: ExtendedHours

CIQ. ExtendedHours

new ExtendedHours(params)

Use this constructor to initialize visualization styles of extended hours by the use of shading and delimitation lines.

Requires addOns.js

This visualization will only work if the extended and marketSessions parameters in the CIQ.ChartEngine#layout object are set, data for the corresponding sessions is provided from your quote feed and the market definitions have the corresponding entries. See CIQ.Market for details on how to define extended (non-default) hours.

All possible market sessions needed to be shaded at any given time should be enabled at once with this method.

It is important to note that unless params.filter is set, this method simply highlights the data within a particular market session as set by the CSS colors, but does not exclude any timeframes. If the data is on the chart, the session will be highlighted if initialized. If you wish to exclude a particular session from the chart, either params.filter or exclude the data at quote feed level so it is not present in the masterData. See examples section for more details.

  • The styles for the shading of each session is determined by the corresponding CSS class in the form of "stx_market_session."+session_name (Example: stx_market_session.pre)
  • The divider line is determined by the CSS class "stx_market_session.divider".


Name Type Description
params object

The constructor parameters

Name Type Argument Description
stx CIQ.ChartEngine <optional>

The chart object

filter boolean <optional>

Setting to true performs a filter of masterData rather than a reload of the data from the server


  • • 06-2016-02
    • 3.0.0 changed argument to an object to support filter
// initialize the session names, which must have a corresponding CSS entry.
		// call this only once to initialize the market sessions display manager
		new CIQ.ExtendedHours({stx:stxx});

		// Call something like this from your menu to enable or disable the sessions
		 //enable extended ours mode or set to false to disable.
		 // enable the particular sessions you want to display or set to {} to display none
		 //set the market to reflect your market preferences. This is only need if you are not using setMarketFactory and instead just using setMarket
		// call new chart to now show the session you enabled.
		 stxx.newChart(stxx.chart.symbol, null, null, finishedLoadingNewChart(stxx.chart.symbol, stxx.chart.symbol));
// CSS entries for a session divider and sessions named "pre" and "post"
		.stx_market_session.divider {
			background-color: rgba(0,255,0,0.8);
			width: 1px;
		.stx_market_session.pre {
			background-color: rgba(255,255,0,0.1);
		} {
			background-color: rgba(0,0,255,0.2);
// sample code for turning on and off sessions on the chart when using setMarketFactory

		// initialize the sessions you want to shade and make sure you have the corresponding CSS defined.
		new CIQ.ExtendedHours({stx:stxx});

		// call this function form your UI to enable or disable the sessions on the chart
		// ( requires your feed to only send data for the enabled sessions )
		function toggleExtHours(session){

			// toggle the session on the layout.marketSessions array so you know what the user wants to see and what to load.

			// assume you are using check boxes on your UI to enable and disable the sessions. Set them here.
			var checkbox=$$$(".stxExtHours-"+session);
				CIQ.appendClassName(checkbox, "true");
				CIQ.unappendClassName(checkbox, "true");

			// if you have after hours sessions enabled, then set the extended flag on so your feed knows to get this data.
			stxx.layout.extended=stxx.layout.marketSessions.pre ||;

			if(!stxx.displayInitialized) return;

			// now create a new chart with just the data the user wants to see (if not using `params.filter`, your feed should follow the extended and marketSessions settings)
			// the data will be highlighted as initialized.
			stxx.newChart(stxx.chart.symbol, null, null, finishedLoadingNewChart(stxx.chart.symbol, stxx.chart.symbol));


set(enable, sessions, cb)

Turns on extended hours for the session names enumerated in the arguments.

Name Type Description
enable boolean

Set to turn on/off the extended-hours visualization.

sessions array

The sessions to visualize when enable is true. Any sessions previously visualized will be disabled. If set to null, will default to ["pre","post"].

cb function

Optional callback function to be invoked once chart is reloaded with extended hours data.