Version 7.3.0

Release date: 1/23/20

Please Note:

  • As of this release, chartiq.js and chartiq-lite.js are fully obfuscated and minified to reduce production deployments overall footprint. Developers wishing to use more readable versions of these files should use their -DEV-ONLY-source.js counterparts, intended for internal use only.

Deprecated functions

  • CIQ.ChartEngine#setCrosshairColors function now outputs a console message advising software developers to use CSS to set the crosshairs color.

New products

  • Term structure

    Term Structure

    • Term structures are graphs of financial instrument values typically ordered by date of delivery. Term structures enable you to create charts for all kinds of financial instruments, not just stocks.

      ChartIQ's new Yield Curve chart is a term structure that compares financial instrument yields at various maturity dates, such as from one month to 30 years. The curve can also compare bid or ask prices or the midpoint of the price spread (the difference between the bid and ask) at each maturity date.

      Yield Curve enables users to predict economic growth and prepare for transitions in the economic cycle.

    • New cq-datepicker web component enables users to select dates from a graphical calendar.

    • New CIQ.TermStructure constructor creates a term structure chart.

    • New CIQ.ChartEngine#drawTermStructure function draws a term structure chart.

    • New CIQ.ChartEngine#drawTermStructureShading function draws the shading for a term structure chart.

    • New CIQ.Renderer.TermStructure constructor creates a term structure renderer.

    • New CIQ.Renderer.TermStructure#drawIndividualSeries function draws a term structure chart and the corresponding shading (if specified programmatically or selected in the user interface) and invokes the crosshairs handler.

    • New CIQ.Renderer.TermStructure#determineMax function determines the minimum and maximum values of the term structure y-axis.

    • New CIQ.Renderer.TermStructure#createXAxis function creates the x-axis representation of the term structure chart.

    • New CIQ.Renderer.TermStructure#updateCrosshairs crosshairs handler for term structure charts.

    • New CIQ.TermStructure#createDataSegment function is the term structure override of the default createDataSegment method.

    • New CIQ.TermStructure#calculateScaledSpacingUnits function calculates the term structure scaled spacing units.

    • New CIQ.TermStructure#calculateInstrumentSpacing function calculates the term structure instrument spacing.

    • New CIQ.TermStructure#getInstrumentShadingColor function returns the shading color of a term structure instrument.

    • New CIQ.TermStructure#updateTitleDate function updates the date in the chart title with the time the most recent update was received.

    • New CIQ.TermStructure#animateUpdates function animates chart updates.

    • New CIQ.TermStructure#setSpacingType function sets the term structure spacing type and triggers a redraw.

    • New CIQ.TermStructure#setShading function sets the shading flag to the value of the bool parameter and triggers a redraw.

    • New CIQ.TermStructure#setDataField function sets the data field of the term structure and triggers a redraw.

    • New CIQ.TermStructure#setCurveDate function sets the date for a curve.

New features

  • Data forecasting

    Data Forecasting

    • Data forecasting enables visualization of predicted trends. Chart series and studies can now be extended into the future by appending forecasting data to historical data. Forecasting data is displayed in a variety of distinctive line styles and colors, making the forecast portion of a series or study readily identifiable.

    • New CIQ.PlotComplementer constructor creates an add-on that allows a series to complement another series.

    • New CIQ.PlotComplementer#resetRenderingParameters function resets rendering parameters back to the default settings.

    • New CIQ.PlotComplementer#setQuoteFeed function sets a quote feed for the PlotComplementer.

    • New examples/feeds/quoteFeedForecastSimulator.js file has been added to support the data forecasting sample.

  • Full-screen mode

    Full-Screen Mode

    • Charts can now fill the screen. A new control (next to the zoom-in and zoom-out controls) enlarges the chart to fill the entire display area, hiding the browser chrome and removing the chart's top and bottom toolbars. Full-screen mode optimizes the visual presentation on mobile devices and provides an uncluttered viewing experience on screens of all sizes.

    • New CIQ.FullScreen constructor creates the user interface control that expands and contracts the chart to and from full-screen display.

    • New cq-chartcontrol-group web component creates a wrapper element for chart UI controls, enabling the controls to be placed on top of the chart.

    • New SVG images (accessed by CSS) added to implement full-screen mode controls.

  • Custom life cycle event markers

    Custom Life Cycle Event Markers

    • Indicators for life cycle events (also known as time span events) can now be custom icons. For example, an alert icon Alert could denote events that require special attention.

    • Sample images for markers (alert and news) are provided in a new images directory (plugins/timespanevent/images).

    • Life cycle events also now include special visual indicators (for example, Ongoing Event Indicator Back or Ongoing Event Indicator) when an event is ongoing.

    • The highlighting of trade execution events now includes horizontal dashed lines (price lines) that connect the starting and ending trades of an order to values on the y-axis.

    • On the Events menu, the option to show/hide the life cycle events panel has been removed.

      Events Menu

      • Now, the panel opens when the check box for a life cycle event type (in the PANEL EVENTS section) is selected.
      • The panel closes when all of the check boxes are cleared.
    • The CIQ.Marker.TimeSpanEvent constructor has added the following parameters:

      • img — Specifies an image to use as the event marker
      • isActive — Sets the event as active or inactive
      • showPriceLines — Specifies whether to draw price lines on the chart
    • CIQ.Marker.TimeSpanEvent#drawOnChart function has added the following parameters:

      • firstPrice — Sets the first price in the event data, which causes a price line to be drawn if showPriceLines is set to true
      • lastPrice — Sets the last price in the event data, which causes a price line to be drawn if showPriceLines is set to true
      • showPriceLines — Specifies whether to draw price lines on the chart
  • Study search field

    • A search field has been added to the Studies menu to make study selection quick and easy. The search field is a type-ahead input field that reduces the number of entries on the Studies menu as they successively approximate the input.

      Study Search

  • React component toolkit

    • The new React component toolkit facilitates development of custom React charting applications without using web components. The toolkit provides a comprehensive set of React components that enable you to easily add charts to your applications and build chart user interfaces with precisely the features you need.

      Use the AdvancedChart component to create a complete charting solution. AdvancedChart is the React equivalent of ChartIQ's sample-template-advanced.html charting implementation. Exceptionally configurable with more than 200 properties, AdvancedChart makes future upgrades a snap because it can be customized using only its configuration parameters and CSS.

      See chartiq-react-app for an example implementation of the new React components.

Drawing enhancements

  • Shapes now anchor and resize in synchronization with chart candles. For example, arrow drawings are now anchored to candles by their tip rather than their center position. As a result, when charts zoom in and out, the tip of the arrow continues to point to the correct candle. Formerly, arrows were anchored by their center point; when the chart was zoomed in and out, the arrows would point to candles other than the candle to which the arrow was anchored.

  • New CIQ.Drawing.shape#setRotationOnInitialDraw property enables/disables rotation when creating a drawing.

  • New CIQ.Renderer#getDependents function returns an array of all renderers that depend on a given renderer.

  • New CIQ.Renderer#undraggable function returns whether the renderer can be dragged to another axis or panel.

  • New CIQ.ChartEngine#getRendererFromSeries function returns the first renderer found that contains a series.

  • New CIQ.ChartEngine#drawChannelChart function draws a channel chart, shading the areas between a high and the close and between a low and the close.

  • CIQ.ChartEngine.AdvancedInjectable#drawSeries function has been modified to always draw the y-axis price label of the series even if the series is a comparison or study and the y-axis of the series is combined with the y-axis of the primary series — except when the series parameter displayFloatingLabel is set to false.

  • CIQ.ChartEngine#modifySeries function has added the noRecurseDependents parameter. If the parameter is set to true, the panel and y-axis changes of the modified series do not propagate to the renderers of dependent series.

  • CIQ.ChartEngine#plotDataSegmentAsLine function can now use parameters.shiftRight to shift the drawn line a certain number of pixels to the right and parameters.lineTravelSpacing to space each point based on a lineTravel value included in the quote.

Study enhancements

  • Studies such as Moving Average, Alligator, and Ichimoku Clouds now generate data into the future.

    • New CIQ.Studies.StudyDescriptor#appendFutureTicks function adds extra ticks to the end of the scrubbed array, which are added later to the data set. This function can be used to add extra ticks, such as offsets into the future, to the data set to be plotted ahead of the current bar.
  • The Alligator study can now hide its Jaw, Teeth, and Lips lines, enabling users to show only the fractal arrows. To hide the lines, clear the Show Lines checkbox in the study settings panel.

    Alligator Study Settings Panel

  • New CIQ.Studies.StudyDescriptor#undraggable function determines whether a study can be dragged to another axis or panel.

Comparison enhancements

  • A flag has been added to specify the first data point of a series comparison. Comparisons can start at the previous data point regardless of whether that point is on the screen, or they can start at the first data point that is displayed.

Web component enhancements

UI enhancements

  • The Share modal dialog box has a new and improved user interface. The dialog box enables users to create an image of a chart and share the image by means of a URL. A new button on the dialog box copies the URL of the image to the clipboard, enabling users to easily create a link to the image. The Share control on the bottom toolbar of sample-template-advanced.html opens the dialog box.

    Share Dialog Box

  • When multiple studies produce errors, the error messages are now vertically stacked at the bottom center of the canvas.

Quote feed enhancements

  • CIQ.ChartEngine#attachQuoteFeed function has added a filter parameter which enables multiple quote feeds to be attached to the chart engine. The argument is a function that takes as a parameter an object that contains properties used to determine whether the quote feed should be used by the chart engine.
  • New CIQ.ChartEngine#detachQuoteFeed function detaches a quote feed and stops the quote driver when all quote feeds have been detached.

Miscellaneous API enhancements

ScriptIQ plug-in

  • ScriptIQ can now fill channels (the area between study lines, such as the price channels of Bollinger Bands or the space between a MACD line and its signal line) and plot user-defined histograms.

    Developers can create distinctive-looking histograms based on custom computations. Visual emphasis can be added to studies by filling channels using custom color and opacity settings. For example:

    ScriptIQ Custom Study

    study("Custom MACD")
    field = input("Field", "field")
    fast = input("Fast MA Period", 12)
    slow = input("Slow MA Period", 26)
    period = input("Signal Period", 9)
    fastMA = ema(field, fast)
    slowMA = ema(field, slow)
    macd = fastMA - slowMA
    signal = ma(macd, period)
    macdPlot = plot(macd, color: "blue")
    signalPlot = plot(signal, color: "orange")
    fill(macdPlot, signalPlot, color: "#ffff00", opacity: 0.5)
    histogram(macd - signal, colorIncreasing: "#00ffff", colorDecreasing: "#ff00ff", opacity: 0.9) if signal?
  • A new third party utilities library, esutils.js, has been added to the plugins/scriptiq/thirdparty folder.

  • ScriptIQ now has an example directory with sample script (.siq) files, which can be shared with your customers.

Sample template enhancements

  • A new sample-template-term-structure.html template has been added to showcase the new term structure yield curve.
  • Video markers have been added to sample-template-advanced.html, making video content accessible at any point in the chart time series. To enable the markers, open the Events menu and select Video under CHART EVENTS.
  • A new basic charting package has been created. The package includes the basic-chart.html template and a simplified version of chartiq.js.
  • The 7.1 versions of helloworld.html, sample-template-basic.html, and sample-template-advanced.html are now compatible with the 7.2.0 and 7.3.0 versions of the library.

Other enhancements

  • Developers can now create empty charts (and eventually add secondary series) just by instantiating the chart with an empty array; for example (any of the following):

    stxx.loadChart("", []);
    stxx.loadChart(null, []);
    stxx.loadChart("Unused Symbol", []);
  • The Trade from the Chart product has been added to the Angular seed project to provide developers with an example of using plug-ins in Angular.

  • The U.S. holidays for 2020 have been added to the quote feed simulator.

  • The js/thirdparty/object-observe.js file is no longer being distributed as of this version. The file is not needed as of version 7.2.0; a result of architectural redesign to improve performance.

  • For clients who are creating a custom implementation of chartiq.js, the js/advanced/equations.js file has been renamed to equationsAdvanced.js in the technical analysis package. The filename is unchanged in the basic chart package.

  • The following files have been added to support the new video marker sample: examples/markers/videoSample.css and examples/markers/videoSample.js.

Documentation enhancements

  • The Navigating the Charting Interface tutorial has been updated with the latest drawing palette features and drag and drop capabilities related to studies, comparisons, and y-axes.