Namespace: cq-chart-title

WebComponents. cq-chart-title

Chart Title web component <cq-chart-title>.

Note, if the cq-marker is added to the element, and it is placed within the chartArea, the element will sit above the chart bars.

<cq-symbol></cq-symbol> will display the raw symbol for the chart (chart.symbol).
<cq-symbol-description></cq-symbol-description> will display the chart.symbolDisplay. See CIQ.ChartEngine.Chart#symbolDisplay for details on how to set this value.

Set attribute "cq-browser-tab" to true in order to get the stock symbol and latest price to update in the browser tab.

Set member previousClose to the prior day's closing price in order to calculate and display change. If previousClose is not set, then iqPrevClose from the dataSet will be the default

Since:
  • 4.0.0 Browser tab now updates with stock symbol and latest price using cq-browser-tab attribute

Examples

<cq-chart-title>
	<cq-symbol></cq-symbol>
	<cq-chart-price>
		<cq-current-price></cq-current-price>
		<cq-change>
			<div class="ico"></div> <cq-todays-change></cq-todays-change> (<cq-todays-change-pct></cq-todays-change-pct>)
		</cq-change>
	</cq-chart-price>
</cq-chart-title>
//You can set a more descriptive name by using http://documentation.chartiq.com/CIQ.ChartEngine.Chart.html#symbolDisplay
// and then enabling that on the tile.

//In your HTML file look for:
<cq-symbol></cq-symbol>
//and replace it with :
<cq-symbol-description></cq-symbol-description>

//In your quote feed add the following line:
params.stx.chart.symbolDisplay=response.fullName;

//Like so:
quotefeed.fetchInitialData=function (symbol, suggestedStartDate, suggestedEndDate, params, cb) {
 var queryUrl = this.url; // using filter:true for after hours

 CIQ.postAjax(queryUrl, null, function(status, response){
  // process the HTTP response from the datafeed
  if(status==200){ // if successful response from datafeed
   params.stx.chart.symbolDisplay=response.fullName; //<<<<<<<<<<<<<<<================
   var newQuotes = quotefeed.formatChartData(response);
   cb({quotes:newQuotes, moreAvailable:true, attribution:{source:"simulator", exchange:"RANDOM"}}); // return the fetched data; init moreAvailable to enable pagination
  } else { // else error response from datafeed
   cb({error:(response?response:status)});	// specify error in callback
  }
 });
};

Members


previousClose :Float

Keep this value up to date in order to calculate change from yesterday's close

Type:
  • Float

Methods


begin()

Begins the Title helper. This observes the chart and updates the title elements as necessary.


update()

Updates the values in the node