Version 7.2.0

Release date: 10/29/19

BREAKING CHANGES

  • The UIContext global variable has been removed from the sample templates (sample-template-basic.html, sample-template-advanced.html, and cryptoIQWorkstation.html). UIContext is now a local variable of the startUI function defined in the examples/templates/js/sample-template.js file. As a result, UIContext can no longer be accessed globally.

    See the 7.1.0 to 7.2.0 upgrade notes for more information.

Please note:

  • The root directory structure of the ChartIQ library distribution archive (zip file) has been reorganized as follows:

    Package Folder

    • The chartiq folder contains the complete charting library.
    • The chartiq-x.x.x.tgz tarball contains the library (version x.x.x) archived in the TAR file format. The tarball enables you to install the library using npm (see Installing with npm).
    • The README.md file contains information about using the library.

    Distribution archives of releases prior to 7.2.0 include only the contents of the chartiq folder.

  • If you had previously been using a custom solution to load the library as an npm package, you may need to revert your own solution to have everything working correctly. It may also be necessary to change any aliases that you have created. Please see the npm update tutorial for all details.

  • Web components for Drawing tools have been modified to include additional functionality. To continue using your previous template, you will also need to maintain the previous version of components.js and CSS files.

  • sample-template-advanced.html no longer combines HTML and JavaScript in the same file. This allows for easier framework integration and bundling. See new directory structure for more details.

    • A new directory (examples/templates/js) has been created to host the JavaScript portion (sample-template.js).

    • sample-template.js has been re-architected for easier configuration. It now includes a function named createChart used to configure add-ons and other key chart components, which should be adjusted as needed:

      function createChart(params, callbacks, root){
  // Flags for add-on functionality, etc.
  if (!params) params = {
    extendedHours:true,
    marketDepth:true,
    rangeSlider:true,
    inactivityTimer:true,
    continuousZoom:false,
    animation:false,
    tooltip:false,
  };
  // More configurations here.
}

Deprecated functions

New products

New features

  • Chart grid

    • A new template, sample-template-chart-grid.html, has been added to the samples/templates directory. The template displays multiple charts — up to 25 — in a grid layout. Each chart displays its own time series data. However, selections from the 1D (periodicity), Display, and Studies menus update all of the charts in the grid simultaneously, providing one-click control over the entire grid.

      Please note this template requires the latest browsers as it leverages syntax not support on older versions.

    • New cq-grid-size-picker web component creates a user interface control that enables selection of the size of the chart grid (similar to graphical controls used to create tables in word processors.)

  • Detachable drawing and style palettes

    • The drawing palette and style palette float! Both palettes can now be detached and positioned anywhere on the screen. In addition, the drawing palette can be resized to fit comfortably and functionally on small displays — or any display.

      A new favorites feature of the drawing palette enables you to create a menu of just your favorite drawing tools. Favorites are marked with a star on the main drawing tool menu.

    • New cq-drawing-settings web component is used when annotating and drawing on charts. The new component works in conjunction with the cq-drawing-palette component and replaces the cq-toolbar component, providing additional functionality and improved user experience.

    • The settings section of the cq-drawing-palette has been moved into its own component, cq-drawing-settings.

    • New cq-palette-dock web component creates a container for cq-palette components and provides docking and dragging capabilities to child palettes.

    • New cq-palette web component creates a palette to dock alongside the chart or float above it. Palette tags must be placed within a cq-palette-dock web component.

    • The cq-scroll web component has added a new refresh method that refreshes the scrollbar.

  • Y-Axis intelligent drag and drop

    • Y-axes and lines (studies, series, and comparisons) can be rearranged and combined in a variety of new ways:

      • Dragging an axis or line to where there is no axis creates a new axis
      • Dragging a line or axis to an axis boundary inserts an axis at the boundary
      • Dragging a line or axis over an existing axis merges the axes
      • Dragging a line to an area that does not have a panel creates a new panel
      • Dragging a line to a panel boundary creates a new panel at the boundary
      • Dragging a line to an existing panel merges the line into the panel

    • New CIQ.ChartEngine.YAxis#isShared convenience function checks whether multiple plots share an axis.

    • New CIQ.ChartEngine#dragPlotOrAxis function supports combining and splitting axes. Replaces CIQ.ChartEngine#dragPlot and CIQ.ChartEngine#dragYAxis.

    • New CIQ.ChartEngine#electNewYAxisOwner function chooses a new study or renderer to be the owner of a y-axis.

    • CIQ.ChartEngine#electNewPanelOwner function has added an yAxisHint argument, which specifies an optional y-axis from which to try to elect a new panel owner.

    • CIQ.ChartEngine.Panel object now has a noDrag property that controls whether plots and axes can be dragged into, out of, and within panels.

    • CIQ.Studies.smartMovePanel function has added the toNewPanel parameter. When a new panel is requested and toNewPanel is set to true, the study is moved to the new panel.

  • Install with npm

    • The npm JavaScript package manager can now be used to install and update the charting library. The distribution package includes a tarball that can be deployed to an npm repository, enabling quick and easy inclusion of the charting library in Node.js applications.

Performance enhancements

  • Significant CPU usage improvements as a result of architectural redesign.

Y-Axis enhancements

  • On charts that have multiple y-axes, hovering over an axis causes the axis to highlight, making identification of the active axis easier.

  • A current price label is now displayed for the last data point on the chart even if the data point does not include a closing price.

Drawing enhancements

  • Drawing tools can now magnetize to any data point on charts, including the main time series, comparison series, and studies, not just open, high, low, or close (OHLC) data points. The drawing tool locks to the data point to improve initial placement accuracy. The magnetize property can be turned on or off by the new Magnet control at the bottom of the drawing palette.

  • New CIQ.ChartEngine#getRenderedItems function returns an array of all the securities, series, and overlays that are drawn on the current panel.

  • CIQ.ChartEngine object has added a number type to the CIQ.ChartEngine.preferences.magnet property. The number sets the radius of the circle within which drawing tools magnetize to data points.

Studies enhancements

  • The scrollbar in the study edit dialog has been repositioned to the rightmost edge of the dialog so that the scrollbar will not overlay other elements in the panel.

  • Studies that appear in panels can now be underlaid on charts.

TFC enhancements

  • A revised loader for the Trading from Chart plug-in enables users to pass in an account, which is used for trading from the chart. The new loader ensures that the CIQ.Account namespace is available during the loading process. Previously, the CIQ.Account namespace was not available until the CIQ.TFC object had been created.

Series enhancements

  • Software developers can determine whether step lines fast-forward to the current candle even if the candle does not contain complete data by setting the extendToEndOfDataSet parameter of the CIQ.ChartEngine#addSeries method in step mode.

Event enhancements

  • High performance markers now require an argument for either the headline parameter or story parameter (or both) for the markers to be interactive. If you do not provide at least one argument, the marker does not display anything when selected.

  • Performance markers now can be positioned anywhere that a DOM marker can be positioned (above, below, or on a candle; at a value; or at the top or bottom of a chart).

  • Clicking multiple highlighted markers combines their information in a single pop-up.

  • CIQ.Marker.Performance constructor now requires an argument for either the headline or story parameter (or both) to append a node to the DOM.

  • New CIQ.Marker.Performance#drawMarker function draws a canvas marker on the chart and positions the pop-up for the marker if necessary.

  • New CIQ.Marker.Performance#calculateYPosition function calculates the position for the initial y-axis positioning when drawing your canvas marker.

  • New CIQ.Marker.Performance#click function handles click events for performance markers when they are clicked on the canvas.

  • New CIQ.Marker.Performance.drawMarkers function iterates through all high performance canvas markers and draws them on the canvas. Replaces CIQ.ChartEngine#drawMarkers.

  • New CIQ.Marker#click function handles click events for marker DOM nodes.

  • CIQ.ChartEngine#drawMarkers function is scheduled for deprecation in a future release. See CIQ.Marker.Performance.drawMarkers.

Animation enhancements

  • When animation is turned off and the chart is displayed with animation-incompatible styles, like candle, the y-axis no longer animates. Formerly, animation was turned off for the x-axis but not the y-axis. Now, animation is turned off for both axes when the main chart is not animated. See CIQ.Animation.

React plug-ins

  • ChartIQ plug-ins are now easily added and configured in React applications by setting a property of the AdvancedChart component.

New plug-ins

  • Estimize plug-in now available. Estimize is a crowdsourcing platform that gathers earnings and economic estimates from tens of thousands of independent analysts.

Mobile native starter kits

  • To make CSS development easier, a separate CSS file for mobile applications has been added for sample-template-native-sdk.html. The CSS file enables software developers to create their own style rules for mobile charts or override the style rules in the ChartIQ CSS files.

Documentation enhancements

  • A Quick Start guide has been added to the documentation to help new users quickly learn how to create charts, work with quote feeds, and modify the chart user interface.

Other enhancements