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 outdated 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.
Quotefeeds
The quotefeed callback function has been updated to include the upToDate
parameter, which indicates whether there is more data available into the future; basically the opposite of moreAvailable
, which indicates whether there is more data into the past (i.e., backwards pagination). This is necessary when the chart is displaying forecasted data that spans past the current date, or when the date range is set into the distant past, which causes the masterData
object to contain non-current data elements so that when a user zooms or scrolls, the chart needs to know when to stop making forward pagination requests.
Note: When upgrading, be sure to properly set upToDate
to prevent constant calls for "future" data.
Following is the new format for the quotefeed callback function:
cb({
error: status, // only include when there was an error
quotes: newQuotes, // an array of properly formatted ohlc data
moreAvailable: suggestedStartDate.getTime() > 0, // set this to false if you know you are at the end of the data
upToDate: true; // set to true in the initial and pagination fetch callbacks if the responses do not require more "future" data (i.e., forward pagination)
}); // return fetched data
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 change 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.