Script link

q4.calculator.1.5.2.min.js

Source file

q4.calculator.js, line 2

Requires

• Fancybox (optional)
• Highstock
• jQuery UI Autocomplete (optional)
• Mustache.js

Options

url string

The base URL of the Q4 website. If the widget is on the same site, this can be blank.

Example

//feeds.q4websystems.com

exchange string

The stock exchange to use. If this is not specified, the widget will look for `?Indice=EXCH:SYM` in the URL.

symbol string

The stock symbol to use. If this is not specified, the widget will look for `?Indice=EXCH:SYM` in the URL.

lookupIndex interger

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

amountInput string

A selector for an input element for the investment amount.

Example

'.amount'

defaultAmount number

The default investment amount to use in case an invalid amount is passed.

Default value

10000

dividendCheckboxSelector string

A selector for the element to use as the dividend checkbox. Usually an ``.

Example

'.calc-reinvest-dividends'

reinvestDividendsOption boolean

Used as a control flag to decide to show/hide the reinvest dividends option on the calculator

Default value

true

startDatepicker string

A selector for the element to use as the start date picker. Usually an ``.

Example

'.startDate'

endDatepicker string

A selector for the element to use as the end date picker. Usually an ``.

Example

'.endDate'

datepickerOpts Object

A set of options to pass directly to the datepicker constructor.

accessibleDatepicker boolean

Whether to use and generate an accessible datepicker

Default value

true

fancyOpts Object

A set of options to pass directly to the fancybox constructor.

dateFormat string

A date format string to use with jQuery UI's Datepicker.

Default value

MM d, yy

shortDateFormat string

A date format string to use with jQuery UI's Datepicker.

Default value

M d, yy

defaultYears number

The default length of time, in years, to use for the calculation in case invalid dates are passed.

Default value

8

minDate Date

The earliest date that will be available as an option. Default is 20 years ago.

invalidDateRangeMessage string

The message displayed if the user did not provide to date exceeding the minimum amount

maxDate Date

The latest date that will be available as an option. Default is the current day.

stockNames Object

A list of friendly names for stocks, indexed to their exchange and symbol.

Default value

{"undefined":"Russell 2000"}

compareInput string

A selector for one or more form fields for other stocks to compare against. This can be a text field, a dropdown, or a set of checkboxes or radio buttons. Stocks should be in the format `EXCHANGE:SYMBOL`.

Example

'.compare'

frequencyInput string

A selector for one or more form fields for frequency of data compared to date. This can be a text field, a dropdown, or a set of checkboxes or radio buttons. Values supported 'daily', 'weekly', 'monthly', 'quarterly', 'yearly'

Example

'.frequency'

compareInputRow string

A selector for row elements containing the stock comparison checkboxes.

Example

'.module-calculator_input-row'

autocompleteInput string

A selector for a form field for a comparison stock, which will autocomplete using a list of companies from the Q4 API.

Example

'.customStock'

autocompleteToken string

A token string for the Q4 company API.

autocompleteLoadingClass string

A CSS class to add to the widget while autocomplete data is loading. This can be used to show and hide elements within the widget.

Example

'autocomplete-loading'

trigger string

A selector for a trigger element that will perform the calculation when clicked.

Example

'.trigger'

loadingClass string

A CSS class to add to the widget while data is loading. This can be used to show and hide elements within the widget.

Example

'loading'

infoContainer string

A selector for an element inside the main widget to contain the investment results and/or the chart.

Example

'.info'

infoTemplate string

A Mustache template used to render the investment results in the quote container. The following tags are available: - `{{exchange}}` The company's stock exchange. - `{{symbol}}` The company's stock symbol. - `{{startDate}}` The initial date of the investment. - `{{endDate}}` The final date of the investment. - `{{startPrice}}` The price per share at time of investment. - `{{endPrice}}` The final price per share. - `{{totalReturn}}` The total gain as a percentage of the initial investment. - `{{cagr}}` The compounded annual growth rate. - `{{startAmount}}` The initial amount of the investment. - `{{endAmount}}` The final amount of the investment. - `{{shares}}` The number of shares purchased. - `{{years}}` The number of years invested.

Example

'<div>' +
    'Starting date: {{startDate}}<br>' +
    'Ending date: {{endDate}}<br>' +
    'Starting price/share: ${{startPrice}}<br>' +
    'Ending price/share: ${{endPrice}}<br>' +
    'Total return: {{totalReturn}}%<br>' +
    'Compound annual growth rate: {{cagr}}%<br>' +
    'Starting investment: ${{startAmount}}<br>' +
    'Ending investment: ${{endAmount}}<br>' +
    'Years: {{years}}<br>' +
'</div>' +
'<div class="chart"></div>'

popupTemplate string

A Mustache template for a popup window containing the results and/or the chart. The popup window will only open if this template is specified. If `chartContainer` points to an element in this template, the chart will be drawn in the popup window. Available tags are the same as for `infoTemplate`. Note: Highcharts will not draw the chart in both the original window and the popup.

Example

'<div>' +
    'Starting date: {{startDate}}<br>' +
    'Ending date: {{endDate}}<br>' +
    'Starting price/share: ${{startPrice}}<br>' +
    'Ending price/share: ${{endPrice}}<br>' +
    'Total return: {{totalReturn}}%<br>' +
    'Compound annual growth rate: {{cagr}}%<br>' +
    'Starting investment: ${{startAmount}}<br>' +
    'Ending investment: ${{endAmount}}<br>' +
    'Years: {{years}}<br>' +
'</div>' +
'<div class="chart"></div>'

chartColour string

The colour of the main stock symbol in the chart.

Default value

green

Example

'blue'

chartLineWidth number

The width of the line for the main stock symbol in the chart. Only applicable for line-based chart types.

Default value

0

Example

'2

chartType string

The type of chart to use for the main stock symbol.

Default value

area

Example

'line'

showNegativeColour boolean

Toggle whether to colour the main stock symbol in red when dipping below the threshold.

Default value

true

chartContainer string

A selector for the stock chart. This should point to an element in the widget, or in `infoTemplate` or `popupTemplate`.

Example

'.chart'

chartTitleTemplate string

A Mustache template for the title of the stock chart. Available tags are the same as for `infoTemplate`.

Example

'Growth of ${{startAmount}} investment in {{exchange}}:{{symbol}} over {{years}} years'

renderPercent boolean

Whether to render return percents instead of the day values for the chart

Default value

false

highstockOpts Object

A set of options to pass directly to Highcharts.

beforeRender function

A callback that fires before the full widget is rendered.

Parameters

event Event

The event object.

data Object

A data object with these properties: - `tplData` The complete template data that will be passed to Mustache. - `series` The data series objects that will be passed to Highcharts.

calculateComplete function

A callback that is fired after the calculation is complete and the chart has been rendered.

Parameters

event Event

The event object.

complete function

A callback that is fired after the widget is rendered.

Parameters

event Event

The event object.

Methods

calculate

Calculate the growth of `amount` dollars invested in our stock on `startDate`, as of `endDate`, optionally comparing our stock's performance against one or more comparison stocks. If a `trigger` element is specified, then clicking it runs this function, using values from `amountInput`, `startDatepicker` and `endDatepicker`, or the relevant default values.

Parameters

amount number

The dollar amount of the initial investment.

startDate Date

The starting date of the investment.

endDate Date

The final date of the investment.

compareStocks Array.<string>/Array.<object>

An array of comparison stocks. Stocks can be either strings in `EXCHANGE:SYMBOL` format, or objects with `exchange`, `symbol` and optional `name` properties.

setStock

Reset exchange and symbol without reloading the page

Parameters

exchange string

The stock exchange to use.

symbol string

stock symbol to use.