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 thestartUI
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:
- 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
-
CIQ.ChartEngine#dragPlot — Replaced by CIQ.ChartEngine#dragPlotOrAxis.13099
-
CIQ.ChartEngine#dragYAxis — Replaced by CIQ.ChartEngine#dragPlotOrAxis.13099
New products
-
Time span events14902
-
Many events occur over a span of time; for example, institutional trades (which take hours and comprise multiple transactions), Federal Open Market Committee meetings, economic trends.
ChartIQ can now track and graphically display time span events (also known as life cycle events), including ongoing events.
A new option on the Events menu opens a panel (below the chart) that contains swim lanes of time span event markers. The markers indicate the type of event, the start and end of the event, and the intervening time period.
When the user's mouse hovers over a time span event marker, the time span of the event is highlighted on the chart. When a marker is clicked, a pop-up window opens, displaying information that summarizes the event.
-
New CIQ.Marker.TimeSpanEvent constructor for time span event markers.
-
New CIQ.Marker.TimeSpanEvent.placementFunction determines the placement of the time span events.
-
New CIQ.Marker.TimeSpanEvent#drawSpanEvent function draws a span event on the time span event panel.
-
New CIQ.Marker.TimeSpanEvent#drawSingleOrDurationEvent function draws a single or duration event on the time span event panel.
-
New CIQ.Marker.TimeSpanEvent#placeLabelOnYAxis function places a time span event label on the time span event panel y-axis.
-
New CIQ.Marker.TimeSpanEvent#drawSelected function draws the highlights when hovering or activating a time span event.
-
New CIQ.Marker.TimeSpanEvent#drawOnChart function draws the shaded area and x-axis labels when a time span event marker is activated.
-
New CIQ.Marker.TimeSpanEvent.createSpanDateObject helper function ensures the data is only drawn on the visible chart and whether an indicator is needed to show the event continues.
-
New CIQ.Marker.TimeSpanEvent.truncateString helper function takes a string that is too long and adds an ellipsis on the end of the string.
-
New CIQ.TimeSpanEventPanel constructor creates the Time Span Event panel that contains and displays all the time span events created by the user.
-
New CIQ.TimeSpanEventPanel#display function creates and displays the panel or destroys the panel depending on the state.
-
New CIQ.TimeSpanEventPanel#showTimeSpanEvent function displays a time span event on the panel.
-
New CIQ.TimeSpanEventPanel#removeTimeSpanEvent function removes a time span event from the panel.
-
New CIQ.TimeSpanEventPanel#removeChartArtifacts helper function removes all the injection and markers from the main chart.
-
New CIQ.TimeSpanEventPanel#renderTimeSpanEvent function takes event data and makes time span event markers.
-
New CIQ.UI.TimeSpanEvent UI helper object manages the time span event options for showing markers on the chart.
-
New CIQ.UI.TimeSpanEvent#showMarkers function shows or hides the time span event markers.
-
New CIQ.Marker.TimeSpanEvent#click function is called when a time span event marker is clicked.
-
New features
-
Chart grid12163
-
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 palettes14210
-
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 drop13099
-
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 andtoNewPanel
is set totrue
, the study is moved to the new panel.
-
-
Install with npm12038
- 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.15457
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.11562
-
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.11982
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.11212
-
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.12192
-
Studies that appear in panels can now be underlaid on charts.15137
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.13646
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.14692
Event enhancements
-
High performance markers now require an argument for either the
headline
parameter orstory
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
orstory
parameter (or both) to append a node to the DOM.14957 -
New CIQ.Marker.Performance#drawMarker function draws a canvas marker on the chart and positions the pop-up for the marker if necessary.14957
-
New CIQ.Marker.Performance#calculateYPosition function calculates the position for the initial y-axis positioning when drawing your canvas marker.14957
-
New CIQ.Marker.Performance#click function handles click events for performance markers when they are clicked on the canvas.14957
-
New CIQ.Marker.Performance.drawMarkers function iterates through all high performance canvas markers and draws them on the canvas. Replaces CIQ.ChartEngine#drawMarkers.15020
-
New CIQ.Marker#click function handles click events for marker DOM nodes.15020
-
CIQ.ChartEngine#drawMarkers function is scheduled for deprecation in a future release. See CIQ.Marker.Performance.drawMarkers.15020
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.12784
React plug-ins
- ChartIQ plug-ins are now easily added and configured in React applications by setting a property of the AdvancedChart component.13683
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.15713
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.15396
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.14624
Other enhancements
-
The CIQ.ChartEngine#updateChartData method now rolls up ticks if period is greater than 1.12975
-
CIQ.ChartEngine#attachQuoteFeed function added parameter
findHeadOfData
. When the argument is true, the chart attempts to load more data (and find the most recent) if the initial load returned no data.13559