Script link

q4.stockQuote.1.0.18.min.js

Source file

q4.stockQuote.js, line 2

Requires

• Mustache.js

Options

studioApi

Use studioApi to get Shares Outstanding using S&P Ownership data and calculate market cap. Required to add the studioApi url as part of the client hostnames. Exchange uses MIC format.

Example

'clientname.studio.q4api.com'

studioTicker

Override the ticker for Ownership API if there are multiple tickers and only one shares outstanding source or exchange and symbol passed in stock option isn't supported

Example

XNYS:ABC

useJSONP boolean

When true, the API is changed to a JSONP format and can be called from an external source outside of a Q4 environment (ie. local machine, client's internal server)

Default value

false

items integer

The Number of items the API should return

Default value

1

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 no value is provided for this array, the widget will attempt to use an entry from the indices lookup list. More info under `lookupIndex` option.

Example

stock: ['NYSE:GDDY']

Example

stock: ['NYSE:GDDY', 'CoolExchangeName:CoolSymbolName']

lookupIndex integer

If no symbol or exchange are provided in the `stock` option, the widget will fall back to using the indices lookup list. The `lookupIndex` option will allow you to target which lookup entry you wish to use for this widget, based on it's index number. The default value is 1, meaning it will load the first lookup entry (ie. the one at the top of the list).

Default value

1

useMoment boolean

If time is required in the widget template, change this option to true. This will mean the widget uses Moment.js to format dates and times instead of datepicker. Note that this option will only work if the Moment.js library has been included on the page. If true, the dateFormat option must be changed to use MomentJS date format naming rules.

Default value

false

dateFormat stringObject

A date format string, which can be used in the template as {{date}}. Can alternately be an object of format strings, which can be accessed with {{date.key}} (where key is the object key corresponding to the string you want to use). In a widget which requires a date and time you would want to enable the useMoment option and render the time as {{date.time}} in the template.

• If useMoment is false (default value), dates are formatted using jQuery UI's datepicker rules.
• If useMoment is true, the date will be formatted using MomentJS rules.

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)

Common MomentJS Format options:

• D = day of month (no leading zero)
• DD = day of month (two digit)
• ddd = day name short
• dddd = day name long
• M = month of year (no leading zero)
• MM = month of year (two digit)
• MMM = month name short
• MMMM = month name long
• YY = year (two digit)
• YYYY = year (four digit)
• x = Unix timestamp (milliseconds since 01/01/1970)
• h = hour (12hr, no leading zero)
• hh = hour (12hr, two digit)
• mm = minute (two digit)
• A = AM/PM
• a = am/pm

Default value

MM d, yy

Example

'MM d, yy' // datepicker format

Example

{
    date: 'MM D, YYYY',
    time: 'hh:mm a'
}

useFullStockQuote boolean

Includes additional fields of data

• CompanyName
• DivAmount
• DivFrequency
• DivYield
• EPS
• ExDivDate
• Exchange
• MarketCap
• PeRatio
• ShareOut
• ShareTraded
• Symbol
• TickerSymbol

Default value

true

useXignite boolean

Required for any client not under the Q4 Portfolio

Default value

true

changeCls array

Additional class added if the price is up or down

Default value

["module-stock_down","module-stock_up"]

loadingMessage string

A message or HTML string to display while first loading the widget. See also `itemLoadingMessage`.

Default value

<p class="module_loader"><i class="q4-icon_spinner"></i><span class="sr-only">Loading ...</span></p>

url string

Attach public API url if widget is used outside a Q4 Domain

noDataTpl string

A message or HTML string to display if there is no stock data for current exchange/symbol.

Default value

There are no results for current exchange/symbol

stockTpl

Template used to render stock data as HTML

Default Stock Quote Template includes

• change
• high
• high52
• low
• low52
• open
• percChange
• previousClose
• tradeDate
• tradeTime
• tradePrice
• uod - {string} - Returns a class name with the word `up` or `down` (defined in `changeCls` option)
• uodSymbol - {string} - Returns '' if change price is a negative value otherwise returns '+'
• volume

Additional items can be added to the template when `useFullStockQuote` is set to true (it is true by default).

• companyName
• divAmount
• divFrequency
• divYield
• eps
• exDivDate
• exchange
• marketCap
• peRatio
• shareOut
• shareTraded
• symbol
• tickerSymbol

Example: (
'{{#.}}' +
    '<h4 class="module-stock_lookup-title">' +
        '<span class="module-stock_indice">{{exchange}}: {{symbol}}</span>' +
    '</h4>' +
    '<div class="module_container module_container--content grid--no-gutter grid--no-space">' +
        '<div class="module-stock_label grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_price">Price</span>' +
        '</div>' +
        '<div class="module-stock_value grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_price">{{tradePrice}}</span>' +
        '</div>' +
        '<div class="module-stock_label grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_change">Change</span>' +
        '</div>' +
        '<div class="module-stock_value grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_change {{uod}}">' +
                '<span class="module-stock_indicator">{{uodSymbol}}</span>{{change}}</span>' +
            '</span>' +
        '</div>' +
        '<div class="module-stock_label grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
           ' <span class="module-stock_volume">Volume</span>' +
        '</div>' +
        '<div class="module-stock_value grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_volume">{{volume}}</span>' +
        '</div>' +
        '<div class="module-stock_label grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_percent-change">% Change</span>' +
        '</div>' +
        '<div class="module-stock_value grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_percent-change {{uod}}">' +
                '<span class="module-stock_indicator">{{uodSymbol}}</span>{{percChange}}%' +
            '</span>' +
        '</div>' +
        '<div class="module-stock_label grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_high">Intraday High</span>' +
        '</div>' +
        '<div class="module-stock_value grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_high">{{high}}</span>' +
        '</div>' +
        '<div class="module-stock_label grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_week-high">52 Week High</span>' +
        '</div>' +
        '<div class="module-stock_value grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_week-high">{{high52}}</span>' +
        '</div>' +
        '<div class="module-stock_label grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_low">Intraday Low</span>' +
        '</div>' +
        '<div class="module-stock_value grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_low">{{low}}</span>' +
        '</div>' +
        '<div class="module-stock_label grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_week-low">52 Week Low</span>' +
        '</div>' +
        '<div class="module-stock_value grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_week-low">{{low52}}</span>' +
        '</div>' +
        '<div class="module-stock_label grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_open">Today\'s Open</span>' +
        '</div>' +
        '<div class="module-stock_value grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_open">{{open}}</span>' +
        '</div>' +
        '<div class="module-stock_label grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_previous-close">Previous Close</span>' +
        '</div>' +
        '<div class="module-stock_value grid_col grid_col--1-of-4 grid_col--md-1-of-2 grid_col--sm-1-of-2">' +
            '<span class="module-stock_previous-close">{{previousClose}}</span>' +
        '</div>' +
    '</div>' +
    '<div class="module-stock_date">' +
        '<span class="module-stock_date-text">{{tradeDate}} {{tradeTime}}</span>' +
    '</div>' +
'{{/.}}'
)

usePreMarketVol boolean

An option to use the closing volume pre-market open. Set to false if the widget should use the closing volume (historical) until the Trade Date updates to the current date.

Default value

true

beforeRender function

A callback that fires before the full widget is rendered.

Parameters

event Event

The event object.

stockData Object

The complete template data.

complete function

A callback that fires after the entire widget is rendered.

Parameters

event Event

The event object.