Version 8.1.0

Release date: 10/15/20

See the 8.0.0 to 8.1.0 upgrade notes for information about upgrading to this version.

Deprecated functions

• :trulyvisible selector — Use CIQ.UI.trulyVisible.
• $.fn.stxtap — Use CIQ.UI.stxtap.
• $.fn.parentsAndMe — Use CIQ.climbUpDomTree.
• $.fn.cqvirtual — Use CIQ.cqvirtual.
• $.fn.cqrender — Use CIQ.cqrender.
• $.fn.guaranteedWidth — Use CIQ.guaranteedSize.
• $.fn.guaranteedHeight — Use CIQ.guaranteedSize.
• $.fn.emptyExceptTemplate — Use CIQ.removeChildIfNot.
• $.fn.truthyAttr — Use node.getAttribute() and check the result against an array of falsey values.
• $.fn.attrBetter — Check attribute before setting the attribute value.
• $.fn.removeAttrBetter — Check hasAttribute before removing the attribute.
• $.fn.textBetter — Check innerText before setting the text.
• $.queryString — Use CIQ.qs.
• CIQ.UI.allContexts — Use document.querySelectorAll("cq-context,*[cq-context]").
• CIQ.outerWidth — Use CIQ.elementDimensions.
• CIQ.clearNode — Use node.innerHTML="".
• CIQ.findClosestParent — Use Element.parentElement.prototype.closest().

Note: All deprecated functions are maintained in the library for backward compatibility. To use deprecated functions in your applications, import js/deprecated.js.

New features

• dependency removed — jQuery has been removed as a library dependency. See the "Deprecated functions" section above for a list of jQuery‑related functions that are no longer recommended. The following new ChartIQ functions replace functionality formerly provided by jQuery.

  • New CIQ.UI.trulyVisible function determines the visibility of a DOM element based on the following CSS properties: opacity, display, visibility, width, and height. Replaces the :trulyVisible selector.
  • New CIQ.UI.stxtap function attaches an event listener to an element. Replaces $.fn.stxtap.
  • New CIQ.UI.UIManager#findLifts function finds all cq-lift elements for the specified menu, but not lifts that are within nested menus.
  • New Faquery class approximates a subset of jQuery functionality.
  • New CIQ.UI.$ function wraps a node or node list in a jQuery object or Faquery object.
  • New CIQ.climbUpDomTree function gets all parent elements, including the starting element itself. Replaces $.fn.parentsAndMe.
  • New CIQ.cqvirtual function creates a virtual DOM for an element. Replaces $.fn.cqvirtual.
  • New CIQ.cqrender function copies the virtual DOM of an element to the actual DOM. Replaces $.fn.cqrender.
  • New CIQ.guaranteedSize function returns a guaranteed width and height for a DOM element. Replaces $.fn.guaranteedWidth and $.fn.guaranteedHeight.
  • New CIQ.removeChildIfNot function removes from a node all children that do not match a specified selector. Replaces $.fn.emptyExceptTemplate.
  • New CIQ.elementDimensions function measures an element's styled width and height.
  • CIQ.efficientDOMUpdate function adds a return value.
  • CIQ.UI.makeFromTemplate convenience function input parameters continue to support jQuery elements.

• Table View — The new Table View add-on creates an on-screen table that contains the same information as the graphical chart display, including study and comparison data. The table is readable by screen readers. The data in the table can be copied to the clipboard or exported to a character-separated values file. Data for Volume, % Change, and % Change vs Average can be hidden and displayed using the Additional columns button.

  Figure. Table view of chart data with comparison (MSFT) and study (ATR Bands) data.

  • New CIQ.TableView constructor function creates an overlay that displays the visible chart data segment as a table.
  • New CIQ.TableView#open function displays the table view.
  • New CIQ.TableView#close function closes the table view.
  • New CIQ.TableView#toggle function opens the table view if it is closed; closes the table view if it is open.
  • New CIQ.TableView#subscribeToChanges function subscribes to changes in the table view component communication channel, which enables other components to open and close the table view.
  • New TableViewBuilder namespace for CIQ.TableView creation–related properties and functions.
  • New TableViewBuilder.colHeaders property provides the column header configuration for the table view.
  • New TableViewBuilder.createTable function creates a table view as an HTMLElement overlay over a chart container.
  • New TableViewBuilder.dataToHtml function creates an HTML table containing the chart data and column headers (see TableViewBuilder.colHeaders).
  • New TableViewBuilder.dataToCsv function tranforms the chart data into a character-separated values (CSV) file, including column headers.
  • New TableViewBuilder.downloadCsv function downloads the table view as a character-separated values (CSV) file.
  • New TableViewBuilder.getChartData function extracts OHLC (open, high, low, close) data from the chart.
  • New TableViewBuilder.getDateFormatter function creates and returns a function that formats table view date fields.
  • New TableViewBuilder.getValueFormatter function creates and returns a function that formats table view value fields.
  • New TableViewBuilder.getVolumeFormatter function creates and returns a function that formats the table view volume field.
  • New TableViewBuilder.getFilenameFormatter function creates and returns a function that creates and formats a file name from the chart symbol and table view data.
  • New TableViewBuilder.getChartCover function creates and attaches an HTML container element to the DOM. The element covers the chart and contains the table view.
  • New TableViewBuilder.getCoverToolbar function creates a toolbar containing the table title and controls used to copy and download the table data and add additional table columns.
  • New TableViewBuilder.getAdditionalColumnLabel function gets the label of the additional columns button on the table view toolbar.
  • New TableViewBuilder.getStudyDataNames function obtains the names of all studies that have data in the chart's visible data segment.
  • New TableViewBuilder.getSeriesDataNames function obtains the symbols of all comparison series that have data in the chart's visible data segment.

• Anchor selector — Users can now set the anchor time for the Anchored Volume Weighted Average Price (AVWAP), Projected Volume at Time (PVAT), and Projected Aggregate Volume (PAV) studies using an interactive control, an anchor handle or selector. The control is a vertical line on the study that users select and drag left and right to set the anchor time. The anchor handle is draggable only within a one-day time frame because the studies apply only to intraday data. A checkbox in the study settings panel turns the anchor handle on or off.

  Figure. AVWAP, PVAT, and PAV with anchor selectors (blue vertical lines).

  • New CIQ.Studies.initAnchorHandle function Initializes an anchor handle element on a study and adds the anchor element to the chart controls.

  • New CIQ.Studies.removeAnchorHandle function removes an anchor handle element from a study.

  • New CIQ.Studies.repositionAnchor function repositions the anchor for a study to the tick where the anchor element has been dragged.

  • New CIQ.Studies.displayAnchorHandleAndLine function displays the anchor element at its current location and a line depicting the hover location of the anchor as it is being dragged.

• Option Sentiment by Strike — The Option Sentiment by Strike study enables traders to quickly interpret options activity for a security. The study shows a profile of the volume or open interest of option contracts at each strike price for a security's most current data point. Calls and puts are graphed as separate, adjacent bars, allowing the user to understand any bias within the two option types.

  Figure. Option Sentiment by Strike study showing volume of calls (tan bar) and puts (purple bar) at various strike prices.

  • New CIQ.Studies.displayOptionSentimentByStrike function creates a profile of options activity at strike prices.

  Note:

  • The Option Sentiment by Strike study is an optional extra that is included in the Technical Analysis and Active Trader packages.
  • The study requires a special quote feed that includes option data. See examples/feeds/optionChainSimulator.js for an example of a simulated option quote feed.

• React — An updated React component toolkit provides developers with a variety of complete charting solutions that can be easily incorporated into React applications. The charting application components are comparable to ChartIQ's most popular sample templates. New components include:

  • HelloWorld — Creates a basic chart with no user interface as a starting point for using the ChartIQ API in React.
  • AdvancedChart — Includes all the advanced functionality of the technical-analysis-chart.html template.
  • MultiChart — Displays two advanced charts on screen simultaneously; like sample-template-multi-charts.html.
  • ActiveTraderWorkstation — Creates an information-rich desktop for cryptocurrency traders and other active traders; equivalent to sample-template-active-trader.html.
  • CustomChart — Integrates native React components with ChartIQ W3C-standard web components; technical-analysis-chart.html plus React. Incorporates new user interface widgets:
    • RecentSymbols — Adds a RECENT tab to the lookup controls created by ChartIQ's cq-lookup web component. The RECENT tab displays a list of recently used financial instrument symbols maintained by the RecentSymbols component.
    • ShortcutDialog — Creates a dialog box that enables users to set shortcut keys on the chart's drawing tools. The component is accessed from a drop-down menu created by a ChartIQ cq-menu web component.

  See the chartiq-react-app project on GitHub for more information. See the 8.0.0 to 8.1.0 upgrade notes for information about upgrading your React apps.

• TypeScript — TypeScript definition files are now available as part of the ChartIQ library (contact your account manager or support@chartiq.com to have the definition files added to your library package). TypeScript definitions are generated for all source code elements, including namespaces, classes, functions, properties, and parameters. The definition files contain type information derived from ChartIQ's API documentation, which is created using JSDoc. The definition files enable code editors to display relevant, helpful information — such as parameter lists, default values, and return types — as you work with library source code.

  Figure. TypeScript code assist.

Chart enhancements

• Baseline charts — The baseline of Baseline charts can now be set programmatically, enabling you to specify the baseline for any line series whether it's rendered in a panel or on the main chart.

  Figure. Chart with comparison baseline series.

  • See the baseline parameter of CIQ.Renderer.Lines. The parameter may now be type CIQ.ChartEngine.Chart#baseline, which defines the defaultLevel property. Set the defaultLevel property to the desired baseline.
  • The CIQ.ChartEngine#addSeries and CIQ.ChartEngine#modifySeries functions now support for custom baselines.

• Keyboard navigation of charts — A variety of new keystroke combinations enable users to navigate charts using just the keyboard. For example:

  Keystroke	Functionality
  Right arrow	Scroll chart right one bar or, if crosshairs enabled, move crosshairs one bar right
  Left arrow	Scroll chart left one bar or, if crosshairs enabled, move crosshairs one bar left
  Alt + Right Arrow	Scroll chart right by the maximum number of bars on screen
  Alt + Left Arrow	Scroll chart left by the maximum number of bars on screen

  See the Accessibility section of the Navigating the Chart Interface tutorial for the complete list of keystroke combinations.

  See hotkeyConfig.hotkeys in /js/defaultConfiguration.js for customization options.

• Views menu — The icon for the Views menu has been changed on small displays (mobile and web responsive) to better indicate the icon’s purpose. The icon is now an eye; previously it was a mountain.

  

Plug-in enhancements

• Trade from Chart — The Trade from Chart plug-in is now supported on multiple charts on the same web page. The plug-in has been added to the Multi-Charts template to create a ready-made, multiple-chart trading application.

Note: The plug-in must be uncommented in sample-templates-multi-charts.html.

Figure. Trade from Chart and Multi-Charts template.

• New CIQ.Account#getPoller function returns a poller that synchronizes multiple instances of the Trade from Chart plug-in on multiple charts. The new function replaces the CIQ.Account.prototype.Poller property definition formerly in plugins/tfc/tfc.js.

  See the 8.0.0 to 8.1.0 upgrade notes for more information.

• Visual Earnings — The CIQ.VisualEarnings constructor function has added the params.markup and params.menu parameters.

Date/Time enhancements

• New CIQ.dateToStr function formats a date according to an input string, for example: "YYYY:MM:dd hh:mm".

• New CIQ.Market#getNormalOpen function gets the normal open time for the current market. In cases where there are two trading sessions, the first is used.

• New CIQ.Market#getNormalClose function gets the normal close time for the current market. In cases where there are two trading sessions, the second is used.

• CIQ.Studies.getMarketOffset function now includes a params object instead of a list of individual parameters. Removed the isForex parameter. Added the shiftToDateBoundary parameter.

X-Axis enhancements

• CIQ.ChartEngine#createXAxisLabel function signature now includes a params object instead of a list of individual parameters. Added the padding parameter for easy customization.

Other enhancements

• New periodicityEventListener is called when the periodicity changes, for example, as a result of calling CIQ.ChartEngine#setPeriodicity.

webpack

The webpack files have been moved to a new webpack-example folder located in the root folder of the library.

The webpack-example folder contains the following webpack-related files and sub-folders:

• src (folder)
  • sample-template-webpack.js — Creates a bundle equivalent to technical-analysis-chart.html
  • sample-template-webpack-minimal.js — Creates a basic bundle equivalent to helloworld.html
  • sample-template-native-sdk-webpack.js — Creates a bundle equivalent to technical-analysis-chart.html for mobile devices
• index.html — An example file that loads the sample-template-webpack.js webpack bundle
• package.json — Contains the build scripts and dependencies for the webpack examples
• package-lock.json — Provides a static representation of the dependency tree
• webpack-config.js — An example of how to load the technical-analysis-chart.html template in webpack
• webpack-config-minimal.js — An example of how to load the helloworld.html template in webpack
• webpack-config-mobile.js — An example of how to load the sample-template-native-sdk.html template in webpack