Upgrading the Library

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

8.0.0 to 8.1.0

Version 8.1.0 sunsets jQuery in library code, introduces the Table View add-on, and enables multiple instances of the Trade from Chart plug‑in.

The jQuery framework is no longer required by the library. Previously used jQuery functions have been replaced by ChartIQ functions (see the 8.1.0 release notes). You can still use jQuery for your own custom code; just include the jQuery framework in your application's HTML files.

Table View add-on

The new Table View add-on can be referenced from the configuration object returned by the getDefaultConfig function of js/defaultConfiguration.js, for example:

import getDefaultConfig from "./js/defaultConfiguration.js";

const config = getDefaultConfig({
	markerSample: marker.MarkersSample,
	scrollStyle: PerfectScrollbar,
	quoteFeed: quotefeed,
	forecastQuoteFeed: forecastfeed
});

config.addOns.tableView.minColumnWidth = "300px" // Units must be included.

The add-on is enabled by default. See:

enabledAddOns: {
    extendedHours: true,
    fullScreen: true,
    inactivityTimer: true,
    rangeSlider: true,
    tableView: true
}

in js/defaultConfiguration.js.

The table view's component communication channel is channels.tableView.

The table view can be opened using the Alt+K keystroke combination and closed using the Escape key. You can customize the keystroke combination; see the tableView action in hotkeyConfig.hotkeys in js/defaultConfiguration.js.

Trade from Chart

The Trade from Chart (TFC) plug-in now works on multiple charts displayed on the same web page. A new CIQ.Account#getPoller function returns a poller that synchronizes account positions, account value, and open orders on all TFC instances on the page.

CIQ.Account#getPoller replaces the CIQ.Account.prototype.Poller property definition formerly in plugins/tfc/tfc.js. The CIQ.Account constructor function assigns the return value of getPoller to the Poller property of CIQ.Account instances. Because CIQ.Account provides the prototype object of derived custom account objects, you can reference the poller returned by getPoller the same way you referenced the old Poller property, for example:

CIQ.Account.MyAccount.prototype.Poller.intervals = {...};

Implementation

To enable the 8.1.0 version of TFC, you must provide a custom CIQ.Account for the plug-in. The tfc-demo.js file in the plugins/tfc folder creates a sample custom account, CIQ.Account.Demo. You can include the demo account in your applications by importing tfc-demo.js as follows:

import "./plugins/tfc/tfc-demo.js";

Templates

Uncomment the following lines in technical-analysis-chart.html and sample-template-multi-charts.html to enable the Trade from Chart plug-in along with the sample account:

//import "./plugins/tfc/tfc-loader.js";
//import "./plugins/tfc/tfc-demo.js"; /* if using demo account class */

sample-template-active-trader.html

The sample-template-active-trader.html template takes care of everything for you. The template implements the Trade from Chart plug‑in by default; and so, includes the following statement:

import "./plugins/tfc/tfc-demo.js";

The TFC plug-in is loaded in the activetrader.js file (in the plugins/activetrader folder) by the following import:

import "../../plugins/tfc/tfc-loader.js";

Configuration

Add your own custom CIQ.Account by setting the account as the value of the account property of the tfc plug‑in referenced by the configuration object returned from defaultConfiguration.js, for example:

import "./plugins/tfc/tfc-loader.js";
import getDefaultConfig from "./js/defaultConfiguration.js";

const config = getDefaultConfig({
	markerSample: marker.MarkersSample,
	scrollStyle: PerfectScrollbar,
	quoteFeed: quotefeed,
	forecastQuoteFeed: forecastfeed
});

config.plugins.tfc.account = YourCustomCIQAccount; // Can also be a reference to a constructor that creates a custom account.

React

The chartiq-react-app project on GitHub has been improved significantly as part of the 8.1.0 release. The previous version of the app wrapped each web component individually in a React component; the new version wraps all of the web components into several composite UI React components. See the README for more information about the new components.

Note: The app is also compatible with version 8.0.0 of the library.

App configuration is now contained in the defaultConfiguration.js file in node_modules/chartiq/js. Move your configuration settings from the _config.js file in the src/chartiq folder to defaultConfiguration.js. The structure of the config objects in the two files is similar.

See the README for information about adding the AdvancedChart component to your React applications. Contact support@chartiq.com for help with upgrading source code customizations you've made to AdvancedChart.

webpack

The library's example webpack files have been reorganized into a webpack-example folder located in the root folder of the library. See the 8.1.0 release notes for a full description of the folder contents.

7.5.0 to 8.0.0

Version 8.0.0 of the charting library introduces ES6 modules, reorganizes files and directories, establishes a new chart configuration process, and updates the chart templates.

Topics

• Architecture
• Upgrade paths
• Configuration
• Sample templates
• Example upgrade

See the release notes for breaking changes and API updates.

Note: The library's ES6 modules must be loaded using HTTP or HTTPS to prevent CORS (cross-origin resource sharing) errors. ES6 requires special HTTP headers for enhanced security of cross-origin requests. As a result, the library sample template files and other HTML files that import library modules cannot be loaded using a file:/// URI or by double‑clicking or double‑tapping the files.

Architecture

The library now consists entirely of ES6 modules, enabling you to create custom module bundles that minimize the library footprint on your production systems. The chartiq.js file has been refactored into three files to enable the creation of smaller library packages. Deprecated code has been moved to a deprecated.js file, making out-dated functionality easy to exclude from your production bundles.

Better bundling

ES6 modules enable you to tree shake the library to remove any unused functionality from your module bundles.

Tree shaking applies to the following files (all in the js folder):

• standard.js
• advanced.js
• components.js
• addOns.js

Note: chartiq.js (also in the js folder) contains the core functionality of the library; and so, cannot be tree shaken.

Tree shaking in ChartIQ

Module bundlers, such as webpack and Rollup, tree shake unused exports from module bundles. In ChartIQ, exports cannot be used until their functionality is attached to the primary library namespace, CIQ. Any library exports not attached to the namespace are tree shaken by bundlers, since the exports will not be used.

Exports are attached to the CIQ namespace (or activated) by calling CIQ.activateImports. Typically, the function is called in a bundle entry point file; for example, ChartIQ's sample-template-webpack.js file (see the webpack section below).

In addition, the __TREE_SHAKE__ global constant must be defined in your bundle configuration to turn tree shaking on; that is, to conditionally control the call to CIQ.activateImports.

Note: Tree shaking is turned off by default. If you don't want to tree shake the library, you don't have to be concerned about __TREE_SHAKE__ or CIQ.activateImports. All of the functionality of your library package will be available in your module bundle automatically. Also, if you're using chartiq.js and individual files, tree shaking is not applicable.

__TREE_SHAKE__

The __TREE_SHAKE__ global constant controls module export activation by controlling the call to CIQ.activateImports in your bundle entry point file and in standard.js, advanced.js, components.js, and addOns.js — the four tree-shakable library files.

By default, standard.js, advanced.js, components.js, and addOns.js activate all of their exports as a side effect when the files are imported (see the call to CIQ.activateImports in each file).

For example, advanced.js contains the following statement:

if (typeof __TREE_SHAKE__ === "undefined" || !__TREE_SHAKE__) {
    (_exports.CIQ || CIQ).activateImports(
        __js_advanced_aggregations_,
        __js_advanced_drawingAdvanced_,
        __js_advanced_equationsAdvanced_,
        __js_advanced_highPerformanceMarkers_,
        __js_advanced_renderersAdvanced_,
        .
        .
        .
        null
    );
}

By default, __TREE_SHAKE__ is not defined; and so, tree shaking is turned off. All library exports are activated; none of them are tree shaken by your bundler.

To turn tree shaking on, define the __TREE_SHAKE__ constant in your bundle configuration file and set the constant's value to true.

With tree shaking turned on, the CIQ.activateImports statement is skipped in standard.js, advanced.js, components.js, and addOns.js. None of the module exports are activated; all of them are tree shaken.

Note: __TREE_SHAKE__ cannot be defined in code; for example, you can't define the constant in the library files. __TREE_SHAKE__ must be defined in the bundle configuration to provide the environment for static analysis of removable code by the bundler. In webpack, use DefinePlugin to create the __TREE_SHAKE__ global constant (see the webpack section below).

CIQ.activateImports

When tree shaking is turned on (__TREE_SHAKE__ is defined and set to true), all of the library exports are tree shaken. You must explicitly activate any exports that you want included in your bundle by calling CIQ.activateImports in your bundle entry point file; for example, in sample-template-webpack.js:

import * as Standard from "chartiq/js/standard";
.
.
.
if (typeof __TREE_SHAKE__ !== "undefined" && __TREE_SHAKE__) {
    /* comment out any feature you do not want in your bundle */
    CIQ.activateImports(
        Standard.createEngine,
        Standard.customCharts,
        Standard.drawing,
        Standard.easeMachine,
        .
        .
        .

Notice that the conditions of the if statement are the opposite of those in standard.js, advanced.js, components.js, and addOns.js.

With tree shaking turned on, any exports included in the CIQ.activateImports call are attached to the CIQ namespace and retained in the production bundle.

Lists of the available exports can be found at the bottom of the four tree-shakable files.

For example, the exports in addOns.js include:

export {__js_addons_animation_ as animation};
export {__js_addons_continuousZoom_ as continuousZoom};
export {__js_addons_extendedHours_ as extendedHours};
export {__js_addons_fullScreen_ as fullScreen};
export {__js_addons_inactivityTimer_ as inactivityTimer};
export {__js_addons_outliers_ as outliers};
export {__js_addons_plotComplementer_ as plotComplementer};
export {__js_addons_rangeSlider_ as rangeSlider};
export {__js_addons_tooltip_ as tooltip};

To tree shake all of the add-ons except for extendedHours, fullScreen, and outliers from your bundle, define __TREE_SHAKE__ in your bundle configuration file and include the following in your bundle entry point file:

import * as AddOns from "chartiq/js/addOns";

if (typeof __TREE_SHAKE__ !== "undefined" && __TREE_SHAKE__) {
    CIQ.activateImports(
        AddOns.extendedHours,
        AddOns.fullScreen,
        AddOns.outliers
    );
}

webpack

ChartIQ includes two sample templates (in the src folder) that create webpack bundles with tree shaking:

• sample-template-webpack.js — Creates a bundle equivalent to technical-analysis-chart.html (in the library root folder)
• sample-template-webpack-minimal.js — Creates a basic bundle equivalent to helloworld.html (also in the root folder)

The template files contain the call to CIQ.activateImports.

For example, in sample-template-webpack.js:

import * as Standard from "chartiq/js/standard";
import * as Advanced from "chartiq/js/advanced";
import * as AddOns from "chartiq/js/addOns";
import * as Components from "chartiq/js/components";
.
.
.
if (typeof __TREE_SHAKE__ !== "undefined" && __TREE_SHAKE__) {
    /* comment out any feature you do not want in your bundle */
    CIQ.activateImports(
        Standard.createEngine,
        Standard.customCharts,
        Standard.drawing,
        Standard.easeMachine,
        .
        .
        .
        Advanced.aggregations,
        Advanced.drawingAdvanced,
        Advanced.equationsAdvanced,
        Advanced.highPerformanceMarkers,
        .
        .
        .
        AddOns.animation,
        AddOns.continuousZoom,
        AddOns.extendedHours,
        AddOns.fullScreen,
        AddOns.inactivityTimer,
        AddOns.outliers,
        AddOns.plotComplementer,
        AddOns.rangeSlider,
        AddOns.tooltip,
        Components.abstractMarker,
        Components.advertisement,
        Components.aggregationDialog,
        Components.attribution,
        Components.chartIQChart,
        .
        .
        .
    );
}

As the comment says, just comment out (or remove) the features that you want tree shaken from the bundle. The list of imports in sample-template-webpack.js includes all of the imports available in your library package.

The library root folder contains the following webpack configuration files:

• webpack.config.js — For sample-template-webpack.js
• webpack.config.minimal.js — For sample-template-webpack-minimal.js

The __TREE_SHAKE__ global constant is defined in the configuration files as follows:

new webpack.DefinePlugin({
    __TREE_SHAKE__: JSON.stringify(env === "production")
})

The env constant is defined as:

const env = process.env.NODE_ENV || "production";

When env equals "production", the __TREE_SHAKE__ constant is true, CIQ.activateImports is called in the template files, and tree shaking takes effect.

Note: The env constant is defined to enable tree shaking in production mode only. In webpack, tree shaking happens only in production mode, but the library exports need to be activated in development mode also, which happens automatically because in development mode the env constant equals "development" and, as a result, __TREE_SHAKE__ is false. The library keeps track of all activated exports; and so, none of the exports are duplicated when you switch from development to production mode.

File reorganization

The following file directories have been reorganized to enable smaller library packages and application bundles.

Added – Removed – Revised

See the Library Directory Structure tutorial for a description of the full library file structure.

Upgrade paths

The assortment of source code files that forms the basis of the library packages has changed in v8.0.0. The names of the packages have also changed.

*See the File reorganization section for information on the refactoring of chartiq.js.

Change the files you accessed in v7.5.0 to the equivalent files in v8.0.0 as follows:

Note: standard.js imports chartiq.js; advanced.js imports standard.js.

Configuration

Chart configuration has been formalized into a standard methodology from what was previously an instructive example. Configuration files have been reorganized to simplify customization of the default configuration and to make library upgrades easier.

All configuration settings from sample-template.js and sample-config.js (in the v7.5.0 examples/templates/js folder) have been combined in js/defaultConfiguration.js. The sample-template.js and sample-config.js files and the examples/templates/js folder have been removed in v8.0.0.

The defaultConfiguration.js module exports the getConfig function as a default:

export default getConfig;

The function returns an object that contains the default configuration settings.

Import getConfig into your applications and call the function after the chart user interface has been created, for example:

import getDefaultConfig from "./js/defaultConfiguration.js";
const config = getDefaultConfig();

The createChart function of sample-template.js is now a property of the configuration object in defaultConfiguration.js. The function calls CIQ.UI.Chart#createChartAndUI or alternatively CIQ.ChartEngine.create and provides all necessary arguments. CIQ.ChartEngine.create is called when the CIQ.UI namespace is not available. CIQ.UI is created when componentUI.js or component.js is imported.

The createChart function has one optional parameter, container, which is the HTML element that contains 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 contains a chart container element; that is, an element with class chartContainer. If a container argument is not provided, createChart queries the DOM for the HTML element that contains the chart, ultimately using document.body if a container cannot be found. See CIQ.UI.Chart#createChartAndUI and CIQ.ChartEngine.create for more information.

Call the createChart function after the chart configuration object has been created, for example:

import getDefaultConfig from "./js/defaultConfiguration.js";
const config = getDefaultConfig();
let stxx = config.createChart();

See Sample templates below for implementation examples.

Customization

The default configuration — including add-ons and plug-ins — can be customized without editing the contents of defaultConfiguration.js. Resources can be passed to the getConfig function call, and the properties of the object returned by the function can be modified to alter the configuration.

Note: Your custom configuration is less likely to be disrupted by future upgrades if all configuration changes are external to the defaultConfiguration.js file. Use defaultConfiguration.js as a guide and source of information, but customize the object returned by getConfig rather than changing defaultConfiguration.js. Consider creating a module for configuration customizations.

Function parameters

The getConfig function exported from the defaultConfiguration.js module has an object parameter named resources.

Here's the function signature:

function getConfig(resources = {})

Properties of the configuration object returned by the getConfig function can be modified through the following properties of the resources parameter:

*See the config object in defaultConfiguration.js.

For example:

import quotefeed from "./examples/feeds/quoteFeedSimulator.js";
import forecastfeed from "./examples/feeds/quoteFeedForecastSimulator.js";
import marker from "./examples/markers/markersSample.js";
import PerfectScrollbar from "./js/thirdparty/perfect-scrollbar.esm.js";
import getDefaultConfig from "./js/defaultConfiguration.js";

const config = getDefaultConfig({
    quoteFeed: quotefeed,
    forecastQuoteFeed: forecastfeed,
    markerSample: marker.MarkersSample,
    scrollStyle: PerfectScrollbar
});

Any features you're not using can be excluded from the argument object; for example forecastQuoteFeed, markerSample, or scrollStyle. And if you're pushing data to the chart, you don't even need quoteFeed (see the Streaming: Asynchronous Data Feeds tutorial).

Configuration object properties

All properties of the configuration object returned by getConfig can be modified by assigning new values.

For example, to change the default theme:

const config = getDefaultConfig({
    quoteFeed: quotefeed,
    forecastQuoteFeed: forecastfeed,
    markerSample: marker.MarkersSample,
    scrollStyle: PerfectScrollbar
});
config.themes.defaultTheme = "ciq-day";

See defaultConfiguration.js for all available configuration properties.

Add-ons

Add-ons are managed in a whole new way in v8.0.0. The enabledAddOns property in defaultConfiguration.js contains a list of all of the add‑ons that are enabled by default:

enabledAddOns: {
    extendedHours: true,
    fullScreen: true,
    inactivityTimer: true,
    rangeSlider: true
}

For an add-on to be enabled, its name must be a property of the enabledAddOns object, and the value of the property must be true. Conversely, for an add-on to be disabled, the value of the property that represents the add-on must be false, or the property must be removed altogether from enabledAddOns.

Note: See the addOns property of defaultConfiguration.js for a complete list of available add-ons.

Don't customize enabledAddOns in defaultConfiguration.js. Instead, modify the enabledAddOns property of the configuration object returned by the getConfig function of defaultConfiguration.js.

For example, to enable the outliers add-on and disable the extended hours add-on:

const config = getDefaultConfig({
    quoteFeed: quotefeed,
    forecastQuoteFeed: forecastfeed,
    markerSample: marker.MarkersSample,
    scrollStyle: PerfectScrollbar
});
config.enabledAddOns.outliers = true;
config.enabledAddOns.extendedHours = false;

Or better yet, completely replace the object assigned to enabledAddOns to keep all of your add-on customizations in one place, for example:

const config = getDefaultConfig({
    quoteFeed: quotefeed,
    forecastQuoteFeed: forecastfeed,
    markerSample: marker.MarkersSample,
    scrollStyle: PerfectScrollbar
});
config.enabledAddOns = {
    fullScreen: true,
    inactivityTimer: true,
    tooltip: true,
    outliers: true
};

The properties of individual add-ons can be accessed and modified through the addOns property of the configuration object, for example:

config.addOns.inactivityTimer.minutes = 15;

See the addOns property in defaultConfiguration.js for a list of available add-ons (or introspect the addOns property of the configuration object).

Plug-ins

The process for enabling plug-ins in v8.0.0 is similar to that of v7.5.0. The plug-in source code is now in ES6 modules, so the plug-ins are added to the application by import statements rather that HTML script tags.

For example, to enable the ScriptIQ plug-in, use:

import "./plugins/scriptiq/scriptiq.js";

instead of:

<script src="plugins/scriptiq/scriptiq.js"></script>

See the plugins property in the defaultConfiguration.js file for a complete list of plug-ins and their customizable properties.

To modify a plug-in property, access it through the configuration object returned by the getConfig function of defaultConfiguration.js, for example:

import "./plugins/timespanevent/timespanevent.js";

const config = getDefaultConfig({
    quoteFeed: quotefeed,
    forecastQuoteFeed: forecastfeed,
    markerSample: marker.MarkersSample,
    scrollStyle: PerfectScrollbar
});
config.plugins.timeSpanEventPanel.showTooltip = false;

Or, configure all properties of the plug-in with a single object:

import "./plugins/timespanevent/timespanevent.js";

const config = getDefaultConfig({
    quoteFeed: quotefeed,
    forecastQuoteFeed: forecastfeed,
    markerSample: marker.MarkersSample,
    scrollStyle: PerfectScrollbar
});
config.plugins.timeSpanEventPanel = {
    menuItemSelector: ".stx-markers cq-item.span-event",
    loadSample: true,
    showTooltip: false,
    infoPanel: {
        durationEvent: 'main',
        spanEvent: 'panel',
        singleEvent: 'main'
    }
};

Sample templates

Version 8.0.0 of the library is based on ES6 modules. As a result, all of the sample templates have been revised to use import statements to include library source code files, for example:

import "./js/addOns.js";

instead of the v7.5.0 approach:

<script src="js/addOns.js"></script>

Plug-ins

Plug-ins are included in some templates, but their import statements are commented out (as in v7.5.0), for example:

//import "./plugins/activetrader/cryptoiq.js";

Uncomment the statements to enable the plug-ins.

See the Customization plug-ins section above for information on customizing template plug-ins.

Chart initialization

The configuration and instantiation of the template charts (with the exception of the helloworld.html chart) are accomplished by the defaultConfiguration.js module.

The sample-template.js and sample-config.js files of v7.5.0 have been replaced by defaultConfiguration.js. See the Configuration section for details.

As a result, the following script tags:

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

have been supplanted by the following import statement:

import getDefaultConfig from "./js/defaultConfiguration.js";

Templates now include script that performs two initialization steps:

1. Create a configuration object
2. Create the chart

You'll find a script containing statements similar to the following at the bottom of all templates (except helloworld.html):

// Create and customize the default configuration.
const config = getDefaultConfig({
	markerSample: marker.MarkersSample,
	scrollStyle: PerfectScrollbar,
	quoteFeed: quotefeed,
	forecastQuoteFeed: forecastfeed
});

// Create the chart...

let stxx = config.createChart();

//...then add whatever code you wish!

The templates vary in how they customize the configuration. The more complex applications, such as sample-template-active-trader.html and sample-template-multi-charts, include additional functionality — like Level 2 simulation and a chartReadyHandler function, respectively.

Note: Feel free to move the template script to a separate file.

Example upgrade

In this example, we'll upgrade the 7.5.0 version of the technical-analysis-chart.html template (in the library root folder) to 8.0.0. All of our changes will be made at the bottom and top of the file — outside the <cq-context></cq-context> tags that contain the user interface web components.

Script

In v8.0.0, import statements replace the script tags used to include source files. So, we'll need to add a new script tag for the imports and for additional JavaScript code.

After the closing </cq-context> tag in technical-analysis-chart.html, add the following:

<script type="module" crossorigin="use-credentials">
</script>

The crossorigin attribute is necessary only if you are using basic access control and authentication to protect your web pages.

Third party

Next, remove the following lines from technical-analysis-chart.html:

<script nomodule="" src="js/thirdparty/promise.min.js"></script>
<script nomodule="" src="js/thirdparty/@webcomponents/template.js"></script>
<script src="js/thirdparty/@webcomponents/custom-elements.min.js"></script>
<script src="js/thirdparty/@webcomponents/native-shim.js"></script>
<script src="js/thirdparty/perfect-scrollbar.jquery.js"></script>
<!--<script src="js/thirdparty/splines.js"></script>-->

That's every third-party inclusion. But we need to re-include a couple that have been upgraded.

Add the following to the top of technical-analysis-chart.html as the last line in the head tag:

<script src="js/thirdparty/custom-elements.min.js"></script>

This new version of custom-elements.min.js provides support for the pre-Chromium version of Microsoft Edge. (The old version of the file supported Internet Explorer 11.)

Also, we have a new version of perfect-scrollbar which supports ES6 modules. Add the following import to our new source code script tag:

import PerfectScrollbar from "./js/thirdparty/perfect-scrollbar.esm.js";

Examples

Now, remove the following lines:

<script src="examples/feeds/quoteFeedSimulator.js"></script>
<script src="examples/feeds/symbolLookupChartIQ.js"></script>
<script src="examples/markers/markersSample.js"></script>
<script src="examples/markers/tradeAnalyticsSample.js"></script>
<script src="examples/markers/videoSample.js" type="module" crossorigin="use-credentials"></script>
<script src="examples/markets/marketDefinitionsSample.js"></script>
<script src="examples/markets/marketSymbologySample.js"></script>
<script src="examples/translations/translationSample.js"></script>

Remove the commented-out examples too:

<!-- Uncomment the following for the L2 simulator (required for the cryptoiq sample). -->
<!-- <script src="examples/feeds/L2_simulator.js"></script> -->
<!-- Uncomment the following for the forecasting simulator (required for the forecasting sample). -->
<!-- <script src="examples/feeds/quoteFeedForecastSimulator.js"></script> -->

Replace them all by adding the following imports to the source code script tag (we'll even upgrade the commented-out examples):

import quotefeed from "./examples/feeds/quoteFeedSimulator.js";
import "./examples/feeds/symbolLookupChartIQ.js";
import marker from "./examples/markers/markersSample.js";
import "./examples/markers/tradeAnalyticsSample.js";
import "./examples/markers/videoSample.js";
import "./examples/markets/marketDefinitionsSample.js";
import "./examples/markets/marketSymbologySample.js";
import "./examples/translations/translationSample.js";
/* Remove if not using the forecasting simulator (required for the forecasting sample). */
import forecastfeed from "./examples/feeds/quoteFeedForecastSimulator.js";

/* Uncomment the following for the L2 simulator (required for the activetrader sample). */
//import "./examples/feeds/L2_simulator.js";

We've enabled the quote feed forecast simulator so that we can fully initialize the chart configuration object. (We'll get to that soon. See the Configuration object section below.)

CSS

The marker examples and perfect-scrollbar now take care of loading their own CSS, so you can remove the following lines from the top of technical-analysis-chart.html:

<link rel="stylesheet" href="css/perfect-scrollbar.css">
<link rel="stylesheet" type="text/css" href="examples/markers/markersSample.css" media="screen">
<link rel="stylesheet" type="text/css" href="examples/markers/tradeAnalyticsSample.css" media="screen">
<link rel="stylesheet" type="text/css" href="examples/markers/videoSample.css" media="screen">

Plug-ins

Plug-ins are commented out by default, but we'll upgrade them anyway.

Remove the following lines from technical-analysis-chart.html:

<!-- Uncomment the following lines if you are using these plug-ins. -->
<!-- <script src="plugins/cryptoiq/cryptoiq.js"></script> -->
<!-- <script src="plugins/recognia/components.js"></script> -->
<!-- <script src="plugins/scriptiq/scriptiq.js"></script> -->
<!-- <script src="plugins/tfc/tfc-loader.js"></script> -->
<!-- <script src="plugins/timespanevent/timespanevent.js"></script> -->
<!-- <script src="plugins/tradingcentral/components.js"></script> -->
<!-- <script src="plugins/visualearnings/visualearnings.js"></script> -->

and replace them with these imports in the source code script tag:

/* Uncomment the following lines if you are using these plug-ins. */
//import "./plugins/activetrader/cryptoiq.js";
//import "./plugins/analystviews/components.js";
//import "./plugins/scriptiq/scriptiq.js";
//import "./plugins/technicalinsights/components.js";
//import "./plugins/tfc/tfc-loader.js";
//import "./plugins/timespanevent/timespanevent.js";
//import "./plugins/visualearnings/visualearnings.js";

Core files

Remove the following lines:

<script src="js/chartiq.js"></script>
<script src="js/addOns.js"></script>
<script src="js/componentUI.js"></script>
<script src="js/components.js"></script>

and replace them with the following imports:

import "./js/advanced.js";
import "./js/addOns.js";
import {CIQ} from "./js/components.js";

Make these the first imports in the source code script tag.

Note: components.js imports js/componentUI.js.

Configuration

Version 8.0.0 has revamped how the default configuration for the chart is handled (see the Configuration section above).

Remove the following lines from technical-analysis-chart.html:

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

and add the following import to the bottom of our script tag:

import getDefaultConfig from "./js/defaultConfiguration.js";

Configuration object

Now, we need to create a configuration object, which will enable us to ultimately create the chart.

Add the following to the script tag, after all the imports:

const config = getDefaultConfig({
    markerSample: marker.MarkersSample,
    scrollStyle: PerfectScrollbar,
    quoteFeed: quotefeed,
    forecastQuoteFeed: forecastfeed
});

See the configuration Customization section for details on the getDefaultConfig function call.

Create the chart

Finally, add this as the last line of the script:

let stxx = config.createChart();

And remove the following onload handler from the body tag of technical-analysis-chart.html:

<body onload="stxx=createChart()">

Complete script

Here's what the finished script should look like:

<script type="module" crossorigin="use-credentials">

import "./js/advanced.js";
import "./js/addOns.js";
import {CIQ} from "./js/components.js";

import PerfectScrollbar from "./js/thirdparty/perfect-scrollbar.esm.js";
import quotefeed from "./examples/feeds/quoteFeedSimulator.js";
import "./examples/feeds/symbolLookupChartIQ.js";
import marker from "./examples/markers/markersSample.js";
import "./examples/markers/tradeAnalyticsSample.js";
import "./examples/markers/videoSample.js";
import "./examples/markets/marketDefinitionsSample.js";
import "./examples/markets/marketSymbologySample.js";
import "./examples/translations/translationSample.js";
/* Remove if not using the forecasting simulator (required for the forecasting sample). */
import forecastfeed from "./examples/feeds/quoteFeedForecastSimulator.js";

/* Uncomment the following for the L2 simulator (required for the activetrader sample). */
//import "./examples/feeds/L2_simulator.js";

/* Uncomment the following lines if you are using these plug-ins. */
//import "./plugins/activetrader/cryptoiq.js";
//import "./plugins/analystviews/components.js";
//import "./plugins/scriptiq/scriptiq.js";
//import "./plugins/technicalinsights/components.js";
//import "./plugins/tfc/tfc-loader.js";
//import "./plugins/timespanevent/timespanevent.js";
//import "./plugins/visualearnings/visualearnings.js";

import getDefaultConfig from "./js/defaultConfiguration.js";

const config = getDefaultConfig({
    markerSample: marker.MarkersSample,
    scrollStyle: PerfectScrollbar,
    quoteFeed: quotefeed,
    forecastQuoteFeed: forecastfeed
});

let stxx = config.createChart();

</script>

Load technical-analysis-chart.html on a web server to see the results of our upgrade.

Note: Because the library now consists of ES6 modules, you must load technical-analysis-chart.html (and all ChartIQ template files) in a web browser using the HTTP or HTTPS protocol. HTTP and HTTPS prevent CORS (cross-origin resource sharing) errors. You cannot use a file:/// URI or double-click or double-tap the template files to load them.

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:

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

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.