7.4.0 to 7.5.0

Configuration

Configuration information for the chart has been extracted from sample-template.js and is now included in sample-config.js; both files are located in the examples/templates/js folder. The configuration information is required by the revised createChart function of the 7.5.0 version of sample-template.js.

If your application is using the 7.4.0 version of the technical-analysis-chart.html or basic-chart.html template (whichever came with your library), add the following script tag to the template to make the configuration file available:

<script src="examples/templates/js/sample-config.js"></script>

Add the tag before the script tag that loads sample-template.js, for example:

<script src="examples/templates/js/sample-config.js"></script>
<script src="examples/templates/js/sample-template.js"></script>

UI context

The chart CIQ.UI.Context object is now accessible globally as the uiContext property of the chart engine instance. Calls to the CIQ.UI.Context constructor function (for example new CIQ.UI.Context(stx, contextContainer);) assign the CIQ.UI.Context instance to the uiContext property of the stx parameter of the constructor.

The context object can be referenced globally as stxx.uiContext (where stxx is a global reference to the chart engine). Previous global references to the UI context (see the 7.1.0 to 7.2.0 upgrade notes) can now be changed to the chart engine uiContext property.

config

When the createChart function of sample-template.js or the new CIQ.UI.Chart#createChartAndUI function is used to create the chart, the chart configuration object is accessible as the config property of the UI context object.

The createChart function assigns the default configuration object defined in sample-config.js (see the Configuration section) to uiContext. The CIQ.UI.Chart#createChartAndUI function assigns its config parameter.

The chart configuration object can be referenced globally as stxx.uiContext.config.

Web components

The ChartIQ W3C web components have been redesigned to make them fully compatible with all major JavaScript component frameworks, including Angular and React. The web components have been fully encapsulated to ensure consistent behavior and reliability.

Any customizations you may have made to the markup contained in a component are fully supported; you don't need to make any changes to use your components with the 7.5.0 library.

However, if you have customized the JavaScript in a class associated with a component (for example, the ChartTitle class associated with the cq-chart-title component), you need to do the following:

  1. Extend the class
  2. Add your changes to the extended class, overriding any methods as necessary
  3. Add the extended class as the component definition

For example:

class CustomTitle extends CIQ.UI.ChartTitle {
  customizations...
}
CIQ.UI.addComponentDefinition('cq-chart-title', CustomTitle);

The call to CIQ.UI.addComponentDefinition must be made before the chart is created; for example, before the call to the createChart function in sample-template.js.

CSS styles that apply to the component will not be affected. For example, all cq-chart-title selectors will still apply to the upgraded cq-chart-title component.

Note: We recommend that you put all of your extended class definitions in one separate file to facilitate future upgrades.

Chart sizing

As of version 7.5.0, the HTML element that contains the chart is styled with the CSS flex-grow: 1 property. The property is part of the style rule of the .chartContainer selector (see css/chartiq.css), which is applied to the div element that contains the chart.

If your app is not using the createChart function in examples/templates/js/sample-template.js and is controlling the chart size by dynamically setting a width property on .chartContainer, revise the style rule as follows:

.chartContainer {
  flex-grow: inherit;
}

Toggles

The W3C web components were rearchitected in version 7.5.0. As a result, the 7.4.0 version of the technical-analysis-chart.html or basic-chart.html template (whichever came with your library) must be modified.

In the template, a group of cq-toogle components create the drawing palette, crosshairs, and heads up display controls.

Here's the v7.4.0 markup for the controls; you'll find it near the top of the template.

<div class="icon-toggles ciq-toggles">
    <cq-toggle class="ciq-draw" cq-member="drawing"><span></span><cq-tooltip>Draw</cq-tooltip></cq-toggle>
    <cq-toggle class="ciq-CH" cq-member="crosshair"><span></span><cq-tooltip>Crosshair</cq-tooltip></cq-toggle>
    <cq-toggle class="ciq-HU" cq-member="headsUp" cq-toggles="dynamic,static,null"><span></span><cq-tooltip>Info</cq-tooltip></cq-toggle>
</div>

cq-info-toggle

The new cq-info-toggle web component provides toggle management for the three-state heads-up display.

In v7.5.0, the heads-up display cq-toggle component is replaced by a cq-info-toggle component:

<div class="icon-toggles ciq-toggles">
    <cq-toggle class="ciq-draw" cq-member="drawing"><span></span><cq-tooltip>Draw</cq-tooltip></cq-toggle>
    <cq-toggle class="ciq-CH" cq-member="crosshair"><span></span><cq-tooltip>Crosshair</cq-tooltip></cq-toggle>
    <cq-info-toggle></cq-info-toggle>
</div>

The following markup is inserted dynamically into the cq-info-toggle element:

<cq-toggle
    class="ciq-HU"
    cq-member="headsUp"
    cq-toggles="dynamic,static,null">
    <span></span>
    <cq-tooltip>Info</cq-tooltip>
</cq-toggle>

Upgrade your v7.4.0 templates by replacing:

<cq-toggle class="ciq-HU" cq-member="headsUp" cq-toggles="dynamic,static,null"><span></span><cq-tooltip>Info</cq-tooltip></cq-toggle>

with:

<cq-info-toggle></cq-info-toggle>

Side navigation

The drawing palette, crosshairs, and heads up display UI controls appear above the chart on devices with large screens:

Chart with drawing, crosshairs, and heads up display controls

On small screens, the controls are contained in a side navigation panel that can be opened and closed by a cog wheel control:

Mobile chart with side navigation panel

As of v7.5.0, the div element containing the toggles must be wrapped in a cq-side-nav component:

<cq-side-nav>
    <div class="icon-toggles ciq-toggles">
        <cq-toggle class="ciq-draw" cq-member="drawing"><span></span><cq-tooltip>Draw</cq-tooltip></cq-toggle>
        <cq-toggle class="ciq-CH" cq-member="crosshair"><span></span><cq-tooltip>Crosshair</cq-tooltip></cq-toggle>
        <cq-info-toggle></cq-info-toggle>
    </div>
</cq-side-nav>

See also cq-info-toggle above.

Chart grid

The markup that creates the THEMES section of the Display menu in the 7.4.0 version of sample-template-chart-grid.html (see the examples/templates/chart-grid folder) needs to be updated. The onclick attributes of the cq-item elements must be changed to ChartIQ's custom stxtap attribute. In addition, all calls to the changeTheme function must be qualified by Theme (the occurrence of chartLinker must be replaced). For example:

Version 7.4.0

<cq-heading>Themes</cq-heading>
<cq-item onclick="changeTheme('ciq-day')">Day</cq-item>
<cq-item onclick="changeTheme('ciq-night')">Night</cq-item>
<cq-themes style="display:none;">
    <cq-themes-builtin cq-no-close>
        <template>
            <cq-item onclick="chartLinker.changeTheme(this)"></cq-item>
        </template>
    </cq-themes-builtin>
    <cq-themes-custom cq-no-close>
        <template>
            <cq-theme-custom>
                <cq-item>
                    <cq-label></cq-label>
                    <cq-close></cq-close>
                </cq-item>
            </cq-theme-custom>
        </template>
    </cq-themes-custom>
    <cq-separator cq-partial></cq-separator>
    <cq-item stxtap="newTheme()"><cq-plus></cq-plus>New Theme</cq-item>
</cq-themes>

Version 7.5.0

<cq-heading>Themes</cq-heading>
<cq-item stxtap="Theme.changeTheme('ciq-day')">Day</cq-item>
<cq-item stxtap="Theme.changeTheme('ciq-night')">Night</cq-item>
<cq-themes style="display:none;">
    <cq-themes-builtin cq-no-close>
        <template>
            <cq-item stxtap="Theme.changeTheme(this)"></cq-item>
        </template>
    </cq-themes-builtin>
    <cq-themes-custom cq-no-close>
        <template>
            <cq-theme-custom>
                <cq-item>
                    <cq-label></cq-label>
                    <cq-close></cq-close>
                </cq-item>
            </cq-theme-custom>
        </template>
    </cq-themes-custom>
    <cq-separator cq-partial></cq-separator>
    <cq-item stxtap="newTheme()"><cq-plus></cq-plus>New Theme</cq-item>
</cq-themes>