Q4Widgets API Documentation

q4.stockOverview

The Stock Overview widget is used to display data elements related to:
Volume Highlights
Financial Data
Price History
Price Ratios
Price Change
Dividends

Default templates are currently built for Index Project sites.

Recent Version Updates: 
1.1.3 - Add option useCloseForPriceHistory to allow swapping from using all values or only close values for historical prices
1.1.2 - Add option disclaimerFancyboxOpts to pass options to disclaimer fancybox
1.1.1 - Added isREIT option to use Stock Page View endpoint for Financial Data, Price Ratios, and Dividends. Added financialDataRowsREIT, priceRatioRowsREIT, and highlightsTemplates option.
1.1.0 - Added useReitDividendYield option to get dividend yield from Financial Highlights API, fix get current period for companies that are using fiscal year
1.0.9 - Renamed payoutRatioEps option to payoutRatioValue and added skipCalc. Added SemiAnnual frequency to dividend yeild calculation.
1.0.8 - Added copyright disclaimer
1.0.7 - Added flexibility to show or hide N/A


Script link
q4.stockOverview.1.1.3.min.js
Source file
q4.stockOverview.js, line 2
Requires

Examples

<script type="text/javascript">
 $('#irwStockAggregate').stockOverview({
     stock: ["EXCH:SYM"],
     studioApi: 'projectKey.studio.q4api.com'
 });
</script>

Options

studioApi string
The URL for the Studio API data. Required for Volume Highlights (% of Shares Outstanding).
Example
'oildri.studio.q4api.com'
stock Array.<string>
The Stock Exchange the corresponding `symbol` belongs to, in the following format: 'Exchange:Symbol'. If a custom name should be used visibly on the site, list this after the value. This will load the data using the first string, but allow you to control the appearance of the exchange/symbol text that is rendered using the second string. If stock exchange passed isn't an Operating MIC, use studiApiStock option to override for all studio API calls.
Example
stock: ['NYSE:GDDY']
Example
stock: ['NYSE:GDDY', 'CoolExchangeName:CoolSymbolName']
studioApiStock Array.<string>
Use this option to override the ticker provided in the stock option for all Studio API calls.
Example
stock: ['NYSE:GDDY']
isREIT boolean
Whether or not to use alternate API endpoint for REITs. If set to true, retrieves Stock Page View REIT template (templateId = 12) data. Data is loaded for Financial Data, Price Ratios, and Dividends. Use financialDataRowsREIT and priceRatioRowsREIT to specify item ids when true.
Default value
false
highlightsTemplates array
Financial Highlights templates to load data from. Not applicable if isREIT is set to true. Template options include:
  • Banks And Thrifts = 1
  • Insurance Underwriter = 2
  • REIT = 3
  • Bank Balance Sheet = 8
  • Bank Income Statement = 9
  • Insurance Balance Sheet = 10
  • Insurance Income Statement = 11
  • Media and Entertainment Income Statement = 13
  • Media and Entertainment = 14
  • Investment Company = 15
  • Media and Entertainment Balance Sheet = 16
  • Real Estate Balance Sheet = 17
  • Energy = 18
  • Specialty Lender Income Statement = 19
  • Specialty Lender Balance Sheet = 20
  • Real Estate Income Statement = 21
Default value
[1,2,3]
showVolumeHighlights boolean
Whether to render the Volume Highlights data. Current US Holidays being filtered include:
  • New Years - January 1st
  • Labor Day - 1st Monday in September
  • Thanksgiving - Last Thursday in November
  • Christmas - December 25th
Default value
true
getSharesOutstanding boolean
Whether to make a query to the studio Api for the ownership data to get the % of shares outstanding. This is specifically used so that the widget does not crash when ownership data is not available for the ticker.
Default value
true
volumeHighlightsSelector string
The selector for where the volumeHighlightsTpl should be rendered.
Default value
#igGridVolumeHighlights
volumeHighlightsTpl string
The template for the Volume Highlights data. The template may include the following Mustache variables:
  • avgVol
    • oneDay
    • oneMonth
    • threeMonths
    • YTD
    • oneYear
  • sharesOutstanding
    • oneDay
    • oneMonth
    • threeMonths
    • YTD
    • oneYear

The start date for date calculations uses the current date. 
'<table id="igGridVolumeHighlights" class="irwFinTable irwVolumeHigh table tableGrid ui-iggrid-table ui-widget-content" cellpadding="0" cellspacing="0" border="0">'+
       '<colgroup>'+
           '<col>'+
           '<col>'+
       '</colgroup>'+
       '<thead>'+
           '<tr data-header-row="">'+
               '<th id="igGridVolumeHighlights_DisplayName" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext"></span></th>'+
               '{{#avgVol}}'+
                   '<th id="igGridVolumeHighlights_AvgDailyVolumeDisplay" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext">Avg Daily Volume</span></th>'+
               '{{/avgVol}}'+
               '{{#sharesOutstanding}}'+
                   '<th id="igGridVolumeHighlights_PercentSharesOutstanding" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext"><div class="headerSharesOutstanding">% Of Shares Outstanding</div></span></th>'+
               '{{/sharesOutstanding}}'+
           '</tr>'+
       '</thead>'+
       '<tfoot id="igGridVolumeHighlights_footer_container"></tfoot>'+
       '<tbody class="ui-widget-content ui-iggrid-tablebody ui-ig-record ui-iggrid-record">'+
           '<tr data-id="OneDay">'+
               '<td>One Day</td>'+
               '{{#avgVol}}'+
                   '<td>'+
                       '<div>{{oneDay}}</div>'+
                   '</td>'+
               '{{/avgVol}}'+
               '{{#sharesOutstanding}}'+
                   '<td>'+
                       '<div class="valueSharesOutstanding">{{oneDay}}</div>'+
                   '</td>'+
               '{{/sharesOutstanding}}'+
           '</tr>'+
           '<tr data-id="OneMonth">'+
               '<td>One Month</td>'+
               '{{#avgVol}}'+
                   '<td>'+
                       '<div>{{oneMonth}}</div>'+
                   '</td>'+
               '{{/avgVol}}'+
               '{{#sharesOutstanding}}'+
                   '<td>'+
                       '<div class="valueSharesOutstanding">{{oneMonth}}</div>'+
                   '</td>'+
               '{{/sharesOutstanding}}'+
           '</tr>'+
           '<tr data-id="ThreeMonths">'+
               '<td>Three Months</td>'+
               '{{#avgVol}}'+
                   '<td>'+
                       '<div>{{threeMonths}}</div>'+
                   '</td>'+
               '{{/avgVol}}'+
               '{{#sharesOutstanding}}'+
                   '<td>'+
                       '<div class="valueSharesOutstanding">{{threeMonths}}</div>'+
                   '</td>'+
               '{{/sharesOutstanding}}'+
           '</tr>'+
           '<tr data-id="YTD">'+
               '<td>YTD</td>'+
               '{{#avgVol}}'+
                   '<td>'+
                       '<div>{{YTD}}</div>'+
                   '</td>'+
               '{{/avgVol}}'+
               '{{#sharesOutstanding}}'+
                   '<td>'+
                       '<div class="valueSharesOutstanding">{{YTD}}</div>'+
                   '</td>'+
               '{{/sharesOutstanding}}'+
           '</tr>'+
           '<tr data-id="OneYear">'+
               '<td>One Year</td>'+
               '{{#avgVol}}'+
                   '<td>'+
                       '<div>{{oneYear}}</div>'+
                   '</td>'+
               '{{/avgVol}}'+
               '{{#sharesOutstanding}}'+
                   '<td>'+
                       '<div class="valueSharesOutstanding">{{oneYear}}</div>'+
                   '</td>'+
               '{{/sharesOutstanding}}'+
           '</tr>'+
       '</tbody>'+
   '</table>'
showFinancialData boolean
Whether to render the Financial Data.
Default value
true
financialDataSelector string
The selector for where the financialDataTpl should be rendered.
Default value
#igGridFinancialData
financialDataTpl string
The template for the Financial Data. The template maay include the following Mustache variables:
  • row
    • name
    • definition
    • magnitude
    • value
    • periodEndDate
    • id
    • title
  • date

'<table id="igGridFinancialData" class="irwFinTable irwVolumeHigh table tableGrid ui-iggrid-table ui-widget-content" cellpadding="0" cellspacing="0" border="0">'+
       '<colgroup>'+
           '<col>'+
           '<col>'+
       '</colgroup>'+
       '<thead>'+
           '<tr data-header-row="">'+
               '<th id="igGridFinancialData_DisplayName" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext"></span></th>'+
               '<th id="igGridFinancialData_ValueDisplay" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext">{{date}}</span></th>'+
           '</tr>'+
       '</thead>'+
       '<tfoot class="" id="igGridFinancialData_footer_container"></tfoot>'+
       '<tbody class="ui-widget-content ui-iggrid-tablebody ui-ig-record ui-iggrid-record">'+
       '{{#rows}}'+
           '<tr>'+
               '<td>'+
                   '<div class="FinancialData">{{title}}</div>'+
               '</td>'+
               '<td>'+
                   '<div>{{value}}</div>'+
               '</td>'+
           '</tr>'+
       '{{/rows}}'+
       '</tbody>'+
   '</table>'
financialDataRows Array.<object>
An array of objects representing the rows for the Financial data when isREIT = false Objects can contain the following fields along with any additional fields that should be used in the template:
  • id - number
  • title - string
  • quarterly (optional) - boolean - signifies whether this value should use the data from the quarterly financial highlights (studio Api)
  • ltm (optional) - boolean - signifies whether this value should be calculated using ltm data from financial highlights (studio Api)
id is required and the index for the Financial Highlights data can be found: https://docs.google.com/spreadsheets/d/1qh6JTh6vbnMi9-evIKA-CPHMctrWJkYRXHTGuNEU6X8/edit#gid=0
Default value
[{ id: 134094, title: "Book Value ($)" },{ id: 134095, title: "Tangible Book ($)" },{ id: 132900, title: "Quarterly EPS", quarterly: true},{ id: 245626, title: "LTM EPS ($)", ltm: true},{ id: 132905, title: "LTM Core EPS ($)", ltm: true}]
financialDataRowsREIT Array.<object>
An array of objects representing the rows for the Financial data when isREIT = true Objects can contain the following fields along with any additional fields that should be used in the template:
  • id - number
  • title - string
id is required and the index for the Financial Highlights data can be found by looking at the returned data in your browser's Network tab
Default value
[{ id: 1000029, title: "FFO/Share ($)" },{ id: 1000016, title: "LTM FFO / Share ($)" },{ id: 1000030, title: "FAD / Share ($)" },{ id: 1000017, title: "Reported Operating FFO ($000)" },{ id: 1000018, title: "Reported Operating FFO / Share ($)" },{ id: 1000031, title: "Same-store NOI Change (%)" },{ id: 1000019, title: "Debt / Total Cap (%)" }]
showPriceHistory boolean
Whether to render the Price History data.
Default value
true
priceHistorySelector string
The selector for where the priceHistoryTpl should be rendered.
Default value
#igGridPriceHistory
priceHistoryTpl string
The template for the Price History data. The template maay include the following Mustache variables:
  • oneDay
  • oneMonth
  • threeMonths
  • YTD
  • oneYear
  • threeYear

The start date for calculations is the previous day (yesterday).
Each variable is an Object with the following structure:
{ high: { value: number, date: mm/dd/yyyy }, low: { value: number, date: mm/dd/yyyy }, } 

'<table id="igGridPriceHistory" class="irwFinTable irwVolumeHigh table tableGrid ui-iggrid-table ui-widget-content" cellpadding="0" cellspacing="0" border="0">'+
  '<colgroup>'+
      '<col>'+
      '<col>'+
      '<col>'+
  '</colgroup>'+
  '<thead>'+
      '<tr data-header-row="">'+
          '<th id="igGridPriceHistory_DisplayName" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext">Stock Price History</span></th>'+
          '<th id="igGridPriceHistory_DisplayValueHigh" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext">'+
              '<div id="priceHistoryGridDisplayValueHighHeaderText">High ($)</div>'+
          '</span></th>'+
          '<th id="igGridPriceHistory_DisplayValueLow" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext">'+
              '<div id="priceHistoryGridDisplayValueLowHeaderText">Low ($)</div>'+
          '</span></th>'+
      '</tr>'+
  '</thead>'+
  '<tfoot id="igGridPriceHistory_footer_container"></tfoot>'+
  '<tbody class="ui-widget-content ui-iggrid-tablebody ui-ig-record ui-iggrid-record">'+
      '<tr data-id="OneMonth">'+
          '<td>One Month</td>'+
          '<td>'+
              '<div>{{oneMonth.high.value}}</div>'+
          '</td>'+
          '<td>'+
              '<div>{{oneMonth.low.value}}</div>'+
          '</td>'+
      '</tr>'+
      '<tr data-id="ThreeMonths">'+
          '<td>Three Months</td>'+
          '<td>'+
              '<div>{{threeMonths.high.value}}</div>'+
          '</td>'+
          '<td>'+
              '<div>{{threeMonths.low.value}}</div>'+
          '</td>'+
      '</tr>'+
      '<tr data-id="YTD">'+
          '<td>Year-to-Date</td>'+
          '<td>'+
              '<div>{{YTD.high.value}}</div>'+
          '</td>'+
          '<td>'+
              '<div>{{YTD.low.value}}</div>'+
          '</td>'+
      '</tr>'+
      '<tr data-id="OneYear">'+
          '<td>One Year</td>'+
          '<td>'+
              '<div>{{oneYear.high.value}}</div>'+
          '</td>'+
          '<td>'+
              '<div>{{oneYear.low.value}}</div>'+
          '</td>'+
      '</tr>'+
      '<tr data-id="ThreeYear">'+
          '<td>Three Year</td>'+
          '<td>'+
              '<div>{{threeYear.high.value}}</div>'+
          '</td>'+
          '<td>'+
              '<div>{{threeYear.low.value}}</div>'+
          '</td>'+
      '</tr>'+
      '<tr data-id="ThreeYearDate">'+
          '<td>Three Year Date</td>'+
          '<td>'+
              '<div>{{threeYear.high.date}}</div>'+
          '</td>'+
          '<td>'+
              '<div>{{threeYear.low.date}}</div>'+
          '</td>'+
      '</tr>'+
  '</tbody>'+
'</table>'
showPriceRatios boolean
Whether to render the Price Ratio data.
Default value
true
priceRatiosSelector string
The selector for where the priceRatiosTpl should be rendered.
Default value
#igGridPriceRatios
priceRatiosTpl string
The template for the Financial Data. The template maay include the following Mustache variables:
  • row
    • value
    • title
    • id
    • percent

'<table id="igGridPriceRatios" class="irwFinTable irwVolumeHigh table tableGrid ui-iggrid-table ui-widget-content" cellpadding="0" cellspacing="0" border="0">'+
       '<colgroup>'+
           '<col>'+
           '<col>'+
       '</colgroup>'+
       '<tfoot class="" id="igGridPriceRatios_footer_container"></tfoot>'+
       '<tbody class="ui-widget-content ui-iggrid-tablebody ui-ig-record ui-iggrid-record">'+
           '{{#rows}}'+
           '<tr data-id="{{title}}">'+
               '<td>'+
                   '<div class="FinancialData" title="{{title}}">{{title}}</div>'+
               '</td>'+
               '<td>'+
                   '<div>{{value}}</div>'+
               '</td>'+
           '</tr>'+
           '{{/rows}}'+
           '</tr>'+
       '</tbody>'+
   '</table>'
priceRatioRows Array.<object>
An array of objects representing each row of the Price Ratio section when isREIT = false Objects can contain the following fields along with any additional fields that should be used in the template:
  • id - number
  • title - string
  • percent (optional) - boolean - set to true if data should be formatted as a percent
  • quarterly (optional) - boolean - signifies whether this value should use the data from the quarterly financial highlights (studio API)
  • ltm (optional) - boolean - signifies whether this value should be calculated using the ltm data from financial highlights (studio API)
  • annualization - number - this number will be used to multiply the value from the financial highlights (studio API)
  • skipCalc (optional) - boolean - signifies whether to skip dividing the Price by the data value
id is required and the index for the Financial Highlights data can be found: https://docs.google.com/spreadsheets/d/1qh6JTh6vbnMi9-evIKA-CPHMctrWJkYRXHTGuNEU6X8/edit#gid=0
Default value
[{ id: 245122, title: "Price / Book ($)" },{ id: 134095, title: "Price / Tangible Book (%)", percent: true },{ id: 132900, title: "Price / Earnings (x)", quarterly: true, annualization: 4},{ id: 245626, title: "LTM EPS (x)", ltm: true },{ id: 132905, title: "LTM Core EPS (x)", ltm: true }]
priceRatioRowsREIT Array.<object>
An array of objects representing each row of the Price Ratio section when isREIT = true Objects can contain the following fields along with any additional fields that should be used in the template:
  • id - number
  • title - string
id is required and the index for the Financial Highlights data can be found by looking at the returned data in your browser's Network tab
Default value
[{ id: 1000003, title: "Price / FFO (x)" },{ id: 1000022, title: "FFO Yield (%)" },{ id: 1000008, title: "Price / LTM FFO (x)" },{ id: 1000023, title: "Price / EBITDA (x)" },{ id: 1000024, title: "Price / Earnings (x)" },{ id: 1000025, title: "Price / LTM Earnings (x)" }]
showPriceChange boolean
Whether to render the Price Change data.
Default value
true
priceChangeSelector string
The selector for where the priceChangeTpl should be rendered.
Default value
#igGridPriceChanges
priceChangeTpl string
The template for the Price Change data. The template maay include the following Mustache variables:
The start date for calculations is the previous day (yesterday).
  • oneDay
  • oneMonth
  • threeMonths
  • YTD
  • oneYear
  • symbol

'<table id="igGridPriceChanges" class="irwFinTable irwVolumeHigh table tableGrid ui-iggrid-table ui-widget-content" cellpadding="0" cellspacing="0" border="0">'+
  '<colgroup>'+
      '<col>'+
      '<col>'+
  '</colgroup>'+
  '<thead>'+
      '<tr data-header-row="">'+
          '<th id="igGridPriceChanges_DisplayName" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext">Price Change (%)</span></th>'+
  '<th id="igGridPriceChanges_DisplayValueCurrent" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext">'+
  '<div id="priceChangeGridDisplayValueCurrentHeaderText">{{stockLabels.symbol}}</div>'+
  '</span></th>'+
      '</tr>'+
  '</thead>'+
  '<tfoot id="igGridPriceChanges_footer_container"></tfoot>'+
  '<tbody class="ui-widget-content ui-iggrid-tablebody ui-ig-record ui-iggrid-record">'+
      '<tr data-id="OneDay">'+
          '<td>One Day</td>'+
          '<td>'+
              '<div>{{oneDay}}</div>'+
          '</td>'+
      '</tr>'+
      '<tr data-id="OneMonth">'+
          '<td>One Month</td>'+
          '<td>'+
              '<div>{{oneMonth}}</div>'+
          '</td>'+
      '</tr>'+
      '<tr data-id="ThreeMonths">'+
          '<td>Three Month</td>'+
          '<td>'+
              '<div>{{threeMonths}}</div>'+
          '</td>'+
      '</tr>'+
      '<tr data-id="YTD">'+
          '<td>YTD</td>'+
          '<td>'+
              '<div>{{YTD}}</div>'+
          '</td>'+
      '</tr>'+
      '<tr data-id="OneYear">'+
          '<td>One Year</td>'+
          '<td>'+
              '<div>{{oneYear}}</div>'+
          '</td>'+
      '</tr>'+
  '</tbody>'+
'</table>'
showDividends boolean
Whether to render the Dividends data.
Default value
true
dividendsSelector string
The selector for where the dividendsTpl should be rendered.
Default value
#igGridDividends
dividendsTpl string
The template for the Dividend data. The template maay include the following Mustache variables:
The start date for calculations is the previous day (yesterday).
  • frequency
  • frequencyDividend
  • dividendYield
  • ltmDividend
  • ltmPayoutRatio

'<table id="igGridDividends" class="irwFinTable irwVolumeHigh table tableGrid ui-iggrid-table ui-widget-content" cellpadding="0" cellspacing="0" border="0">'+
       '<colgroup>'+
           '<col>'+
           '<col>'+
       '</colgroup>'+
       '<tfoot id="igGridDividends_footer_container"></tfoot>'+
       '<tbody class="ui-widget-content ui-iggrid-tablebody ui-ig-record ui-iggrid-record">'+
           '<tr data-id="QuarterlyDividend">'+
               '<td>'+
                   '<div class="FinancialData" title="{{frequency}} Dividend ($)">{{frequency}} Dividend ($)</div>'+
               '</td>'+
               '<td>'+
                   '<div>{{frequencyDividend}}</div>'+
               '</td>'+
           '</tr>'+
           '<tr data-id="DividendYield">'+
               '<td>'+
                   '<div class="FinancialData" title="Dividend Yield (%)">Dividend Yield (%)</div>'+
               '</td>'+
               '<td>'+
                   '<div>{{dividendYield}}</div>'+
               '</td>'+
           '</tr>'+
           '<tr data-id="Dividend">'+
               '<td>'+
                   '<div class="FinancialData" title="LTM Dividend ($)">LTM Dividend ($)</div>'+
               '</td>'+
               '<td>'+
                   '<div>{{ltmDividend}}</div>'+
               '</td>'+
           '</tr>'+
           '{{#ltmPayoutRatio}}'+
               '<tr data-id="Dividend">'+
                   '<td>'+
                       '<div class="FinancialData" title="LTM Payout Ratio (%)">LTM Payout Ratio (%)</div>'+
                   '</td>'+
                   '<td>'+
                       '<div>{{.}}</div>'+
                   '</td>'+
               '</tr>'+
           '{{/ltmPayoutRatio}}'+
       '</tbody>'+
   '</table>'
dividendFrequency string
The frequency in which dividends are paid. This is used to determine how frequencyDividend and dividendYield are calculated.
Possible Options:
  • Quarterly
  • Monthly
  • SemiAnnual
Default value
Quarterly
useReitDividendYield boolean
Gets dividend yield value from the Financial Highlights API under the REIT Template.
If false, calculates value from latest stock and latest dividend factoring dividendFrequency option.
By default, will use the data item id 1000012
Default value
false
Example
useReitDividendYield: true
Example
useReitDividendYield: { id: 1000012, ltm: true }
payoutRatioValue object
Reference to the value used to calculate ltmPayoutRatio. Does not work if isREIT is true. Accepted keys are:
  • id - number
  • ltm (optional) - boolean - signifies whether this value should be calculated using the ltm data from financial highlights (studio API)
  • skipCalc (optional) - boolean - whether to skip handeling the calculation within the widget. Set to true if the value from the API should be used directly.
Default value
{ id: "245626", ltm: true, skipCalc: false}
dividendYieldRoundingVar number
The number (variable) used to round dividendYield.
Default value
10000
template string
Default template for out of the box use 
'<div class="irwStockAggregate">' +
       '<div id="accordion" class="panel-group">' +
           '{{#showVolumeHighlights}}'+
               '<div id="volumeHighlightsPanel" class="panel panel-default">' +
                   '<div class="panel-heading">' +
                       '<h4 class="panel-title">' +
                           '<a class="collapsed">Volume Highlights' +
                       '</h4>' +
                   '</div>' +
                   '<div class="panel-collapse collapse">' +
                       '<div class="panel-body">' +
                           '<table id="igGridVolumeHighlights" class="irwFinTable irwVolumeHigh table tableGrid"></table>' +
                       '</div>' +
                   '</div>' +
               '</div>' +
           '{{/showVolumeHighlights}}'+
           '{{#showFinancialData}}'+
           '<div id="financialDataPanel" class="panel panel-default">'+
               '<div class="panel-heading">'+
                   '<h4 class="panel-title">'+
                       '<a class="collapsed">Financial Data'+
                   '</h4>'+
               '</div>'+
               '<div class="panel-collapse collapse">'+
                   '<div class="panel-body">'+
                       '<table id="igGridFinancialData" class="irwFinTable irwVolumeHigh table tableGrid"></table>'+
                   '</div>'+
               '</div>'+
           '</div>'+
           '{{/showFinancialData}}'+
           '{{#showPriceHistory}}'+
               '<div id="priceHistoryPanel" class="panel panel-default">' +
                   '<div class="panel-heading">' +
                       '<h4 class="panel-title">' +
                           '<a class="collapsed">Price History' +
                       '</h4>' +
                   '</div>' +
                   '<div class="panel-collapse collapse">' +
                       '<div class="panel-body">' +
                           '<table id="igGridPriceHistory" class="irwFinTable irwVolumeHigh table tableGrid"></table>' +
                       '</div>' +
                   '</div>' +
               '</div>' +
           '{{/showPriceHistory}}'+
           '{{#showPriceRatios}}'+
               '<div id="priceRatiosPanel" class="panel panel-default">'+
                   '<div class="panel-heading">'+
                       '<h4 class="panel-title">'+
                           '<a class="collapsed">Price Ratios'+
                       '</h4>'+
                   '</div>'+
                   '<div class="panel-collapse collapse">'+
                       '<div class="panel-body">'+
                           '<table id="igGridPriceRatios" class="irwFinTable irwVolumeHigh table tableGrid"></table>'+
                       '</div>'+
                   '</div>'+
               '</div>'+
           '{{/showPriceRatios}}'+
           '{{#showPriceChange}}'+
               '<div id="priceChangesPanel" class="panel panel-default">' +
                   '<div class="panel-heading">' +
                       '<h4 class="panel-title">' +
                           '<a class="collapsed">Price Change' +
                       '</h4>' +
                   '</div>' +
                   '<div class="panel-collapse collapse">' +
                       '<div class="panel-body">' +
                           '<table id="igGridPriceChanges" class="irwFinTable irwVolumeHigh table tableGrid"></table>' +
                       '</div>' +
                   '</div>' +
               '</div>' +
           '{{/showPriceChange}}'+
           '{{#showDividends}}'+
               '<div id="dividendsPanel" class="panel panel-default">'+
                   '<div class="panel-heading">'+
                       '<h4 class="panel-title">'+
                           '<a aria-expanded="true">Dividends'+
                       '</h4>'+
                   '</div>'+
                   '<div class="panel-collapse collapse" aria-expanded="true">'+
                       '<div class="panel-body">'+
                           '<table id="igGridDividends" class="irwFinTable irwVolumeHigh table tableGrid"></table>'+
                       '</div>'+
                   '</div>'+
               '</div>'+
           '{{/showDividends}}'+
       '</div>' +
   '</div>'
exchangeCodes object
An object mapping published MIC to its relative operating MIC. This is used for requests sent to a Studio API endpoint.
The widget has the following mapping built in: 

  {
    ARCD: "XNYS",
    Xcta: "XNYS",
    XBRT: "XNAS",
    XNAS: "XNAS",
    Xudf: "XNAS",
    XNCM: "XNAS",
    Xudf: "XNAS",
    Xudf: "XNAS",
    XNIM: "XNAS",
    XNLI: "XNYS",
    XNGS: "XNAS",
    XNMS: "XNAS",
    XBXO: "XNAS",
    XBOS: "XNAS",
    BOSD: "XNAS",
    XPBT: "XNAS",
    XNDQ: "XNAS",
    Xcta: "XNYS",
    XNYS: "XNYS",
    NASD: "XNAS",
    ALDP: "XNYS",
    AMXO: "XNYS",
    Xcta: "XNYS",
    ARCX: "XNYS",
    ARCO: "XNYS",
    NYSD: "XNYS",
    Xcta: "XNYS",
    XASE: "XNYS",
    XPHO: "XNAS",
    XPHL: "XNAS",
    XPOR: "XNAS"
   }
Use this option to override or add codes.
Default value
{}
Example
{publishedMIC: "operatingMIC"}
useDefaultTpl boolean
Append the default template
Default value
true
useAccordion boolean
Whether to use built in accordion functionality. Note that only one content section will be open at a time.
Default value
true
accordionSpeed number
The speed setting for accordion slideUp / slideDown animation.
Only used if useAccordion is true.
Default value
600
accordionToggleCls string
The class to add to / removed from the element returned by the accordionContentSelector when the accordion click event is triggered.
Only used if useAccordion is true.
Default value
in
accordionItemSelector string
A selector for the accordion's container.
Only used if useAccordion is true.
Default value
.panel
accordionTriggerSelector string
A selector for the accordion triggers.
Only used if useAccordion is true.
Default value
.panel-title a
accordionContentSelector string
A selector for the accordion content to be shown / hidden. When a trigger is clicked, accordionToggleCls will be added / removed.
Only used if useAccordion is true.
Default value
.panel-collapse
openFirstAccordionItem boolean
Whether to open the first accordion item.
Default value
true
dateFormat string
A datepicker format string, to format the dates displayed.
Common Datepicker Format options:
  • d = day of month (no leading zero)
  • dd = day of month (two digit)
  • D = day name short
  • DD = day name long
  • m = month of year (no leading zero)
  • mm = month of year (two digit)
  • M = month name short
  • MM = month name long
  • y = year (two digit)
  • yy = year (four digit)
  • @ = Unix timestamp (milliseconds since 01/01/1970)
Default value
m/d/yy
Example
'm/d/yy'
showNotAvailableData boolean
Whether display items that have no data. If true the notAvailableText is used
Default value
true
useCloseForPriceHistory boolean
Whether to calculate High and Low historical values based on all highs and lows or only close values
Default value
false
notAvailableText string
Text used to represent that data is not available. showNotAvailableData must be true to display.
Default value
N/A
disclaimerLinkSelector string
A selector for the copyright disclaimer link which is appended to the end of the widget
Default value
.disclaimer_link
disclaimerFancyboxOpts object
Options to pass to disclaimer fancybox { afterLoad: function() { $('#PopupDive').mCustomScrollbar({ theme:'bootstrap-thin' });}}
Default value
{}
copyrightDisclaimerTpl string
The template for the copyright disclaimer's popup. 
'<div id="irwWrapper" style="margin:0;padding:0;">' +
  '<div class="modal-dialog" style="margin:0;padding:0">' +
      '<div class="modal-content">' +
          '<div class="modal-header bg-primary">' +
              '<h4 class="modal-title"><strong id="ModelTitle">Copyright Information</strong></h4>' +
          '</div>' +
          '<div class="modal-body">' +
              '<div id="PopupDive" class="irwScrollbar mCustomScrollbar" style="max-height: 260px;" aria-hidden="true">' +
                       'Copyright © , S&P Global Market Intelligence (and its affiliates as applicable). ' +
                       'Reproduction of any information, opinions, views, data or material, including ratings (“Content”) in any form is prohibited except with the prior written permission of the relevant party. ' +
                        'Such party, its affiliates and suppliers (“Content Providers”) do not guarantee the accuracy, adequacy, completeness, timeliness or availability of any Content and are not responsible for any errors or omissions (negligent or otherwise), regardless of the cause, or for the results obtained from the use of such Content. ' +
                        'In no event shall Content Providers be liable for any damages, costs, expenses, legal fees, or losses (including lost income or lost profit and opportunity costs) in connection with any use of the Content. ' +
                        'A reference to a particular investment or security, a rating or any observation concerning an investment that is part of the Content is not a recommendation to buy, sell or hold such investment or security, does not address the suitability of an investment or security and should not be relied on as investment advice. ' +
                        'Credit ratings are statements of opinions and are not statements of fact.' +
              '</div>' +
          '</div>' +
      '</div>' +
  '</div>' +
'</div>'
onReload function
A callback that fires after the entire widget is reloaded. Automatically triggered once setStock method is used.
Parameters
event Event
The event object.
beforeRender function
A callback that fires before the full widget is rendered.
Parameters
event Event
The event object.
data Object
The complete template data.
complete function
A callback that fires after the entire widget is rendered.
Parameters
event Event
The event object.

Methods

setStock
A method to set the widget to show data from a given ticker and trigger a reload.
  • Method will set the stock option for the widget, and reload the content based on that ticker.
  • This method can be triggered multiple times, but to avoid a loop it is recommended to trigger it only on a user's action (ex. click).
Parameters
stock Array.<string>
The Stock Exchange the corresponding `symbol` belongs to, in the following format: 'Exchange:Symbol'.
Example
$('#irwStockAggregate').stockOverview('setStock', ["XASE:PHGE"]);