API Reference
Namespaces
Classes
Events
Global
Externals

Class: Chart

CIQ.UI. Chart

new Chart()

The Chart class contains a collection of methods used to instantiate and configure charts and the chart user interface.

The decisions on what to initiate and how it gets initiated are based on the provided configuration object and the availability of resources loaded in the CIQ namespace.

Since:

  • 7.5.0

Methods

addPluginContainer(uiContext)

Adds a plugin container for plugins that require a container.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 9.7.0

Returns:

The plugin container (if created).

Type
HTMLElement

breakpointSetter(uiContext)

Returns a setter that updates the responsive break point of the chart components.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 7.5.0

Returns:

A function that sets the responsive break point of the UI context.

Type
function

chartAreaTopSetter(uiContext)

Returns a setter that updates the top position of the chart area (the HTML element that has the CSS class ciq-chart-area) based on the height of the plug-ins panel.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 8.9.0 Deprecated

Deprecated:

  • no longer used

Returns:

A function that sets the top position of the chart area.

Type
function

chartPositionSetter(uiContext)

Returns a setter function that updates the size of the side navigation panel by positioning the chart container div.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 7.5.0

Returns:

A function that sets the size of the side navigation panel.

Type
function

classSetter(uiContext)

Returns a setter that updates the class name of the chart components.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 8.8.0

Returns:

A function that sets the class of the UI context.

Type
function

createChartAndUI( [params])

Creates the chart engine and user interface, including the UI context.

Parameters:
Name Type Argument Description
params object <optional>

Function parameters.

Properties
Name Type Argument Description
container HTMLElement <optional>

The HTML element that hosts the user interface elements of the chart. The element is a cq-context element, or it contains a cq-context element or element with a cq-context attribute. The context element, in turn, contains a chart container element; that is, an element with class chartContainer.
config object <optional>

Configuration for the chart engine, UI elements, and plug-ins. See the Chart Configuration tutorial for more information.
isAsync boolean <optional>

Set to true to return immediately after chart is loaded. This is useful if you want control over stxx before the web components are ready. If not set, webcomponents will be loaded synchronously after the chart and createChartAndUI will return after webcomponents are initialized.
callback function <optional>

Optional callback function invoked right after web components are loaded. Depending on isAsync parameter, this could be after createChartAndUI has already returned.
Since:
  • 7.5.0
  • 9.7.0 added callback and isAsync parameters to control final processing.
Returns:

The chart UI context.

Type
CIQ.UI.Context

getBreakpoint(width [, height])

Determines responsive design breakpoints based on numeric width and height values.

Width breakpoints:

  • small — "break-sm"
  • medium — "break-md"
  • large — "break-lg"

Height breakpoints:

  • small — "break-height-sm"
  • medium — "break-height-md"
  • large — "break-height-lg"
Parameters:
Name Type Argument Description
width number

The width in pixels for which a breakpoint is determined.
height number <optional>

The height in pixels for which a breakpoint is determined.
Since:

  • 8.2.1 Added the height parameter. Added the string[] type to the return value.

Returns:

The width breakpoint if the optional height parameter is not provided; for example, "break-sm". If height is provided, returns an array containing the width breakpoint and height breakpoint; for example ["break-sm", "break-height-sm"].

Type
string | Array.<string>

getKeystrokeHubSetter(uiContext, keystrokeHub)

Gets a callback that set the active context of the keystroke hub based on the mouse pointer location.

When multiple charts are on a page, the chart with the mouse pointer over it responds to keyboard input, such as shortcuts or symbol entry.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
keystrokeHub CIQ.UI.KeystrokeHub

A reference to the keystroke hub.
Since:

  • 7.5.0

Returns:

A callback that sets the active context of the keystroke hub.

Type
function

initColorPicker(uiContext)

Creates and appends a cq-color-picker component to the document body if one is not already attached.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:
  • 7.5.0
  • 8.5.0 Added uiContext parameter.
Deprecated:

initContainerListeners(uiContext)

Initializes the chart container size change listener, channel subscriptions, and the keystroke hub and its focus management (see CIQ.UI.KeystrokeHub).

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 7.5.0

initDefaultTheme(uiContext, container)

Sets the chart theme to the default theme from the config.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.

Properties
Name Type Description
config object

Configuration parameters.

Properties
Name Type Argument Description
themes object <optional>

Contains the theme settings.
container HTMLElement

The HTML element that hosts the user interface elements of the chart. The element is a cq-context element, or it contains a cq-context element or element with a cq-context attribute. The context element, in turn, contains a chart container element; that is, an element with class chartContainer.
Since:

  • 9.7.0

initDialogHandler(uiContext)

Subscribes to the dialog channel.

Creates an element for the requested dialog if one does not exist in the document scope. Opens the dialog in response to channel messages.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 7.5.0

initDrawingEditListeners(uiContext)

Creates a CIQ.UI.DrawingEdit helper and adds listeners to the helper. The listeners post messages in the drawing channel when drawing starts and ends.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 7.5.0

initDrawingTools(uiContext)

Subscribes to the drawing channel to manage drawing tool visibility based on channel messages.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 7.5.0

initEventMarkers(uiContext)

Initiates event marker functionality.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 7.5.0

initExtensions(params)

Installs plug-ins.

See CIQ.ChartEngine.create for the installation of add-ons.

Parameters:
Name Type Description
params object

Function parameters.

Properties
Name Type Argument Description
stx CIQ.ChartEngine <optional>

A reference to the chart engine.
uiContext CIQ.UI.Context <optional>

The chart user interface context.
type string <optional>

Type of extension. Currently, only "plugins" is supported.
Since:
  • 7.5.0
  • 8.8.0 Removed unnecessary parameter config.

initKeystrokeHub(uiContext)

Attaches a CIQ.UI.KeystrokeHub to the body element to enable users to start typing anywhere and redirecting the keystroke to the appropriate element or component.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 7.5.0

initLookup(uiContext)

Creates a symbol change filter and attaches it to the chart UI context and lookup containers.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.

Properties
Name Type Description
config object

Configuration parameters.

Properties
Name Type Argument Description
onNewSymbolLoad object <optional>

Contains two functions, removeSeries and loadError. Either or both functions can be omitted. See the Chart Configuration tutorial for more information.
restore boolean <optional>

Indicates whether to save and restore the chart layout, preferences, and drawings.
chartId string <optional>

Identifies the chart.
selector object <optional>

An assortment of CSS selectors used to obtain references to the DOM nodes that represent the chart elements named by the object properties.
lookupDriver function <optional>

A function definition for the chart's default symbol lookup driver.
topNode HTMLElement

The top node of the DOM tree for this context. Should contain all of the UI elements associated with the chart engine.
Since:

  • 7.5.0

initMenusAndToggles(uiContext)

Sets up MenuConfig and ToggleConfig helpers to allow for custom menu configuration.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 8.9.0

initPluginChannelListeners(stx, uiContext)

Sets up listeners for dynamic plugin loading.

Parameters:
Name Type Description
stx CIQ.ChartEngine

A reference to the chart engine.
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 9.0.0

loadChart(uiContext)

Loads a chart with an initial symbol. When configured to restore the layout (which is the default), recreates the settings used in the previous session, including the last viewed symbol.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.

Properties
Name Type Argument Description
stx CIQ.ChartEngine

A reference to the chart engine.
config object <optional>

Configuration parameters.

Properties
Name Type Argument Description
chartId string <optional>

Identifies the chart.
restore boolean <optional>

Indicates whether to save and restore the chart layout, preferences, and drawings.
onChartReady function <optional>

A callback function to call when the chart has loaded.
initialData array <optional>

An array of formatted objects which provide the chart data.
loader CIQ.UI~Loader <optional>

A web component instance that shows loading status.
Since:
  • 7.5.0
  • 8.2.0 Added the config.onChartReady and config.initialData parameters.
  • 8.8.0 Moved preferences restore into its own function (loadPreferences).

loadPreferences(uiContext)

Loads chart preferences, such as language and time zone.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.

Properties
Name Type Argument Description
stx CIQ.ChartEngine

A reference to the chart engine.
topNode HTMLElement

The top node of the DOM tree for this context. Should contain all of the UI elements associated with chart engine.
config object <optional>

Configuration parameters.

Properties
Name Type Argument Description
chartId string <optional>

Identifies the chart.
restore boolean <optional>

Indicates whether to save and restore the chart. layout, preferences, and drawings.
Since:

  • 8.8.0 Moved this functionality out of loadChart.

notifySizeChanges(uiContext)

Event handler for chart container size changes. Posts messages in the breakpoint and containerSize channels when the context container size has changed.

Listening for container size changes in some browsers can be inefficient. This function improves notification efficiency by posting messages for specific changes, such as changes in responsive layout break points.

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 7.5.0

sidenavSizeSetter(uiContext)

Returns a setter that updates the width of the side navigation panel by positioning the chart area (the HTML element that has the CSS class ciq-chart-area).

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 7.5.0

Returns:

A function that sets the size of the side navigation panel.

Type
function

sidepanelSizeSetter(uiContext)

Returns a setter that updates the width of the side panel by setting the right position of the chart area (the HTML element that has the CSS class ciq-chart-area) and the right margin of the plugin container

Parameters:
Name Type Description
uiContext CIQ.UI.Context

The chart user interface context.
Since:

  • 7.5.0

Returns:

A function that sets the width of the side panel.

Type
function

<static> loadPlugin(stx, pluginName)

Dynamically loads and applies plug-in to the chart engine.

Requires plugin load fuction containing dynamic import to be available

Parameters:
Name Type Description
stx CIQ.ChartEngine

A reference to the chart engine.
pluginName string

Plugin name.
Since:

  • 9.0.0