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 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 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.
Remember data is loaded asynchronously.
Be sure to reset this value once your initial data has been loaded by using the CIQ.ChartEngine.loadChart callback function.
stx.loadChart(symbol, parameters, function(){
document.querySelector("cq-chart-title").previousClose = yesterdays-closing-price;
}
The cq-animate
attribute in the cq-current-price
element can be used to change the price color to red or green based on the previous value.
Setting the attribute to "fade" will introduce a transition effect on the price which, while attractive, uses considerable CPU when there are rapid updates.
- Since:
-
- 06-15-16
- 4.0.0 Browser tab now updates with stock symbol and latest price using
cq-browser-tab
attribute. - 6.3.0 Negative close values are "N/A" change percentage.
- 6.3.0 Child tag
<cq-todays-change-pct>
is now optional. - 8.8.0 Add
cq-activate-symbol-search-on-click
attribute.
Examples
<cq-chart-title>
<cq-symbol></cq-symbol>
<cq-chart-price>
<cq-current-price cq-animate></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; // specify response name
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