Library Documentation

Upgrading the Library

This document contains information about upgrading the charting library from release to succeeding release.

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>

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;
}

Side navigation

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. The 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

Here's the 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>

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-toggle class="ciq-HU" cq-member="headsUp" cq-toggles="dynamic,static,null"><span></span>
            <cq-tooltip>Info</cq-tooltip></cq-toggle>
    </div>
</cq-side-nav>

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>

7.3.0 to 7.4.0

I18N

File intl.js originally located in the js/thirdparty folder is no longer being distributed with the library. The internationalization functions the file provided are now natively supported by all modern browsers.

html2canvas library

The html2canvas library is now provided minified. As such, js/thirdparty/html2canvas.js has become js/thirdparty/html2canvas.min.js. If you are explicitly using a <script src> tag to load this file, please rename the file reference accordingly.

Term Structure

The chart background shading styles for maturity dates have been extracted from termstructure.css into a new file named termstructureSample.css (see the plugins/termstructure folder). Term structure templates, such as sample-template-term-structure.html, prior to 7.4.0 need to include termstructureSample.css to enable the default shading. See the Term Structures — Customizations tutorial to learn how to create your own chart shading styles.

Miscellaneous

The CIQ.ChartEngine#plotLine function has normalized all arguments under the parameters parameter; that is, all parameters are now properties of parameters.