Script link

q4.chart.1.4.5.min.js

Source file

q4.chart.js, line 2

Requires

• Highstock
• Highcharts-Accessibility
• Highcharts-Exporting-Module

Options

url string

The base URL of the Q4 website.

Example

//feeds.q4websystems.com

stocks stringArray.<string>

An array of stock symbols to use on the stock price chart. Each symbol can be a string of the format "EXCHANGE:SYMBOL", or an array containing "EXCHANGE:SYMBOL" and a custom display name.

Example

'NYSE:XXX'

Example

[['NYSE:XXX', 'NYSE: TEST.XXX']] or [['NYSE:XXX', 'NYSE: TEST.XXX'],['NYSE:YYY','TESTING']] for two indices

lockStock boolean

Whether to prevent stock price charts from being toggled off.

Default value

false

legend boolean

Whether to show the legend.

Default value

true

useDatepicker boolean

Whether to use jQuery datepicker

Default value

true

accessibleDatepicker boolean

Whether to use and generate an accessible datepicker

Default value

true

accessibleDataTable Object

A set of options that override the default settings of the data table to allow for more customization.

accessibleDataTable: {
   enabled: true, // whether show the data table. 
   pager: { // pager widget config - send as an empty object if pagination is not needed.
      content: $(_.chart.dataTableDiv).find('tbody > tr'), 
      perPage: 10, 
      pageRange: 10, 
      template: '<li class="pager_list-item"><button class="pager_button">{{{page}}}</button></li>', 
      trigger: 'button'
   }, 
   btnText: { // The text applied to button which shows / hides the data table. 
      view: "View stock chart as data table", 
      hide: "Hide stock chart data table"
   },
   sorting: { // Options for date sorting.
      direction: "ASC", // Use "ASC" for ascending and "DESC" for descending.
      ascIcon: "q4-icon_cta-arrow-up", 
      descIcon: "q4-icon_cta-arrow-down"
   }, 
   format: { // The format of each column of date in the table.
     date: "MM/DD/YYYY", 
     price: function(price) { // Round to the nearest two decimals.
        return parseFloat(price).toFixed(2);
     }, 
     volume: function(volume) { // Add commas.
        var split = volume.toString().split(".");
        split[0] = split[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return split.join(".");  
     }
   }, 
   headers: { // The text applied to the table column headers.
      date: "Date", 
      price: "Price", 
      volume: "Volume"
   }
}

startDate number

Use to determine when data should populate the chart. By default, it'll use the first data point in historical list.

Example

startDate: new Date("05/22/2013").getTime()

datepickerOpts Object

A set of options to pass directly to the datepicker constructor, it will extend/overwrite the existing default options.

showSymbolInLegend boolean

Whether to show the stock quote in the chart legend.

Default value

true

stockLimit number

The maximum number of data points to fetch for the stock chart.

Default value

1500

volume boolean

Whether to include a volume chart below the stock price chart.

Default value

false

volumeHeight number

The height of the volume chart, as a percentage.

volumeSeparate boolean

Whether to have the volume series's y-Axis take up the whole height alongside the value series (false), or be separated y-Axis below the value series (true)

Default value

false

news boolean

Whether to include a series of flags for press releases.

Default value

true

newsColor sting

Color used to fill the news dots

Default value

#006fba

newsOnLoad boolean

If `news` is true, whether to show news flags on initial load.

Default value

false

newsLimit number

If `news` is true, the maximum number of news items to display.

Default value

200

newsLength number

If `news` is true, the maximum length of each news headline.

Default value

75

newsCategory string

If `news` is true, the news category ID to use. The default is to load all categories.

Default value

1cb807d2-208f-4bc3-9133-6a9ad45ac3b0

newsTags Array.<string>

If `news` is true, an array of tags to filter news releases by.

events boolean

Whether to include a series of flags for events.

Default value

false

eventsOnLoad boolean

If `events` is true, whether to show event flags on initial load.

Default value

false

eventsLimit number

If `events` is true, the maximum number of events to display.

Default value

100

eventsTags Array.<string>

If `events` is true, an array of tags to filter events by.

stockOpts Object

A set of Highstock options for the stock price series.

volumeOpts Object

A set of Highstock options for the volume series.

newsOpts Object

A set of Highstock options for the press release series.

eventsOpts Object

A set of Highstock options for the event series.

highstockOpts Object

A set of Highstock options for the chart in general. You can configure the individual chart series with `stockOpts`, `volumeOpts`, `newsOpts` and `eventsOpts`.

highchartsOpts Object

A set of (non-Highstock) Highcharts options.

appendTable Boolean

Append a static table for accessibility

simplifyData Boolean

Use simplified stock data so that high, low, and open values are not passed in. Helps reduce conflicts with certain chart types (ie, area & areaspline)

noDataTpl

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

complete function

A callback that is fired after the chart is rendered.

Parameters

event Event

The event object.