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
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
Directory | Files | Description |
---|---|---|
js | chartiq.js | Refactored into three files:
|
standard.js | Provides most library features; however, some features (such as drawings and studies) include a reduced set of options. Imports chartiq.js. | |
advanced.js | Contains the remaining studies, drawings, chart types and renderers not provided in standard.js. Imports standard.js. | |
deprecated.js | Contains all deprecated code. You must import deprecated.js if you're using deprecated functionality. | |
defaultConfiguration.js | Contains the chart configuration settings formerly found in sample-template.js and sample-config.js files. See the Configuration section for details. | |
chartiq-lite.js | Replaced by the new chartiq.js file plus standard.js, which together provide all of the functionality of chartiq-lite.js — and more. | |
js/thirdparty | splines.js | Replaced by a built-in library function. |
promise.min.js | Provided a JavaScript promise polyfill required by Internet Explorer 11 (support for which has been discontinued). | |
perfect-scrollbar.jsquery.js | Replaced by perfect-scrollbar.esm.js. | |
perfect-scrollbar.esm.js | Supports ES6 modules. | |
custom-elements.min.js | Provides support for the legacy version of Microsoft Edge (the pre-Chromium version) Note: The custom-elements.min.js that was in the js/thirdparty/@webcomponents folder supported Internet Explorer 11. | |
js/thirdparty/@webcomponents | All files | Provided Internet Explorer 11 support, which has been discontinued. |
ES5-support | All files | All transpiled files, which were required for Internet Explorer 11 support, have been removed. |
examples/templates/js | sample-template.js | Configuration content has been moved to defaultConfiguration.js. Chart instantiation code has been moved to the bottom of all sample templates. |
sample-config.js | Replaced by defaultConfiguration.js. |
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.
v7.5.0 | v8.0.0 | ||
---|---|---|---|
Package | Files | Package | Files |
Basic | chartiq.js* | Core Charts | chartiq.js and standard.js |
Advanced | chartiq.js | Technical Analysis | chartiq.js, standard.js, and advanced.js |
*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:
v7.5.0 | v8.0.0 |
---|---|
chartiq-lite.js alone | standard.js |
Basic package | standard.js |
Advanced package | advanced.js |
chartiq-lite.js plus individual files | chartiq.js plus individual files (may need more and different files than before; could start with standard.js or advanced.js and exclude files) |
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:
Parameter property | Description | Configuration object property* |
---|---|---|
quoteFeed |
Sets the chart quote feed. | quoteFeeds[0].quoteFeed |
forecastQuoteFeed |
Sets the quote feed for data forecasting. | addOns.forecasting.quoteFeed |
markerSample |
Provides a constructor function that implements chart markers. | eventMarkersImplementation |
scrollStyle |
Enables styling of the cq-scroll component. |
scrollbarStyling |
*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:
- Create a configuration object
- 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:
- Extend the class
- Add your changes to the extended class, overriding any methods as necessary
- 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
.