Version 6.3.0

Release Date: 1/1/19

  • Please Note: baseline chart now re-centers itself after adjusting the baseline.

  • Please Note: WebComponents.cq-chart-title will now display negative close values as "N/A" for change percentage. Also the tag is now optional.

  • Please Note: CIQ.ThemeHelper#update now also uses chartTypes["Candle/Bar"].even.color to set even bar colors on 'Colored Bar', 'Hollow Candle' and 'Volume Candle' charts, as it already done for 'Candle' charts.

  • Please Note: The panelName parameter on CIQ.Studies.addStudy has been deprecated but maintained for backward compatibility. parameters.panelName should be used instead.

Studies

  • RSI can now be based on any existing field instead of just 'Close'.
  • Stochastics can now be based on any existing field instead of just 'Close'. You can now create a Stochastics RSI, for example.
  • Kagi has been adjusted to better display the first line, which in the past was always shown red.
  • Anchored VWAP enhancements:
    • For more accuracy on initial load, when no anchor date is set, the study will default to the first visible candle instead of the first loaded candle.
    • To prevent time zone confusion when setting anchors, the date and times entered will be assumed to be in the chart display zone, matching the x axis, and internally converted to always match the time zone of the 'masterData'.
  • CIQ.Studies.DialogHelper has been enhanced as follows:
    • If parameter axisSelect is set, the helper will include the axis position and color selection in the parameters section of the helper object, which can be used to build dialogs that allow users to set colors for and move study axis.
    • If parameter panelSelect is set, the helper will include the panel and underlay selection in the parameters section of the helper object, which can be used to build dialogs that allow users to move studies to different panels and decide if the study will be displayed over or under other renderings.
    • If a placeholder attribute of yyyy-mm-dd or hh:mm:ss is set on an input field, the dialog will display a "date" or "time" input type, instead of a string input type (Used on Anchored VWAP).
    • The above functionality has also been implemented into our Web Components, and can be seen in sample-template-advanced.html.
  • CIQ.Studies.getPanelFromFieldName was added as a convenience function to facilitate the location of a panel given a data field name on the dataSet.

cryptoIQ plugin

  • CIQ.ChartEngine#updateChartData can now also take a field named obj on the BidL2 and AskL2 arrays to allow vendor specific data to be maintained and made available for display on the chart tooltip.
  • CIQ.ChartEngine#drawMarketDepth now has parameters to individually set opacity of mountain shading, color of bid volume bars, color of ask volume bars, color of bid line, and color of ask line.
  • CIQ.Renderer.MarketDepth now has a new parameter, headsUp, to control how tool-tip information is displayed by the crosshair. Setting to true will cause information to appear in a box next to the crosshair rather than on the axes.
  • It is no longer necessary to set stxx.manageTouchAndMouse=false; when drawing a market depth chart. This is now done automatically by the renderer.
  • New CIQ.Renderer.MarketDepth.displayPrice function allows to easily customize or even hide, the price/spread display box by simply overriding the function.

scriptIQ plugin

  • Scripts compilation process now runs inside a Sandbox to prevent undesirable commands from executing.

Y-Axis manipulation

  • All renderings can now be inverted (flipped) on their Y-axis. This includes drawings, series and studies.
    • A new option has been added on the sample UI, to invert a chart on its Y-axis. See 'Flipped Chart' under the 'Chart Preferences' section of the Display drop down.
    • WebComponents.cq-study-dialog now also provides a check box allowing users to invert study Y-axis, if not shared with the primary axis.
    • CIQ.ChartEngine.YAxis#flipped is now available to invert individual Y-axis and all their linked renderings.
    • CIQ.ChartEngine#flipChart is now available to invert the chart by its main axis.

UI, Web Components and sample templates

Other enhancement

  • CIQ.ChartEngine.XAxis#formatter now has the ability to 'pass through' any date instead of needing to format all. This allows for more flexibility in cases when only certain dates in the axis need to be customized.
  • CIQ.ChartEngine#addSeries can now take a panel parameter to draw the series on its own panel by creating one, or on any other already existing panel.
  • CIQ.ChartEngine#addSeries can now take a new parameter ,displayFloatingLabel, to suppress floating labels on a series by series basis.
  • New scroll event detection is now available. See CIQ.ChartEngine#addEventListener.
  • New convenience function CIQ.hhmmss is now available to convert a JavaScript Date to hh:mm:ss format.

Version 6.2.0

Release Date: 10/1/18

  • Please Note: CIQ.ThemeHelper and WebComponents.cq-theme-dialog now support setting different colors for the mountain base and mountain peak to achieve a more customizable gradient combination. To use this version with older templates, simply add the following backwards compatibility polyfill:
CIQ.ThemeHelper.prototype.originalUpdate = CIQ.ThemeHelper.prototype.update;
CIQ.ThemeHelper.prototype.update=function(stx){
	this.settings.chartTypes.Mountain.basecolor=this.settings.chartTypes.Mountain.color;
	this.originalUpdate(stx);
}

  • Please Note: The TagAlong QuoteFeed has been discontinued.

  • Please Note: CIQ.ChartEngine.AdvancedInjectable#consolidatedQuote now consolidates Bid and Ask data using the most recent price instead of opening price. This will produce a more accurate L2 market data display.

  • Please Note: CIQ.ChartEngine#formatPrice will now always return a 'string' price. This allows for more uniform handling of the resulting value.

  • Please Note: The TFC plugin now requires an account to be loaded at the time the webComponent is instantiated. This prevents having to modify the main ‘tfc.js’ file just to define an account. As a result, the following changes are needed once you have upgraded to this version of the plug in:

Remove this line:

<cq-tfc></cq-tfc>

and instead call:

new CIQ.TFC({stx:stxx, context:UIContext});

Remove this line:

<!-- <script src="plugins/tfc/components.js"></script> -->

and instead load this:

<!-- <script src="plugins/tfc/tfc-loader.js"></script> -->

Also the following line can be removed as it is now handled internal by the plugin:

if(stx.tfc) stx.tfc.changeSymbol();

For exact location/placement of this code, please compare your template with the sample-template-advanced.html file provided in this package.

New Product

  • New plug-n-play crypto currency workstation
    • Crypto specific layout
    • Order Book
    • Trade Blotter
    • Click-to-trade from order book or trade blotter
    • Historical Market depth chart
    • Current Market depth chart
    • Depth of Market Indicator
    • Just connect your data and deploy
    • Call your account manager to get it!

React starter kit

  • Listing of active studies is now part of the study dropdown.
  • Average line drawing tool: Labels toggle is now functional on this starter kit.

IE11 support

  • 'Grabbing' mode no longer activates when closing study panel.
  • Touch gestures are now supported by the chart engine.

Studies

  • Anchored VWAP study has been added.

cryptoIQ plugin

  • More ‘webpack friendly’ lazy-loading logic for componentUI.js
  • New "Depth of Market" indicator now available as part of the cryptoIQ add on.

scriptIQ plugin

  • The script 'source' object is now automatically added to the Study Descriptor (sd) to facilitate the creation of menus.
  • Convenience function CIQ.Scripting.addCoffeeScriptStudyToLibrary has been added to easily load scripts to the library in one single step.

Share Chart (image generator)

  • This feature was enhanced to produce images with matching background color on Safari browsers.
  • Study panel controls no longer displayed on resulting image, for a less cluttered image.

Y-Axis manipulation

Drawings enhancements

  • New drawing editing capabilities and corresponding Web Components enhancements (CIQ.UI.DrawingEdit,WebComponents.cq-ui-manager) have been added to sample-template-advanced.html. To take advantage of this new functionality, simply replace your template with sample-template-advanced.html, or compare with your current version and make adjustments as needed.
  • rightClickDrawing was enhanced to also dispatch a drawingEditEventListener event if there are any registered listeners.
  • deleteHighlighted was enhanced to make better use of rightClickDrawing.

UI, Web Components and sample templates

  • sample-template-advanced.html now automatically enables y-axis location and panel selection on the default study dialog by including the cq-study-axis and cq-study-panel flags on the cq-study-dialog web component.
  • 'Open', 'High' and 'Low' labels/values are no longer displayed on the dynamic HUD if the corresponding data is not present.
  • Better Translation detection has been added in the Timezone dialog and range selector.
  • WebComponents.cq-fib-settings-dialog has been added to allow for Fibonacci settings changes.

Other enhancement

  • CIQ.ChartEngine#addSeries and CIQ.ChartEngine#removeSeries have been enhanced so they can be decoupled from setChartScale. In the past, when adding a series with the isComparison flag set, the chart scale was automatically set to 'percentage' and when the last series with the isComparison flag was removed the scale was automatically set to 'linear'. This can create some inconsistencies when ‘percentage’ or ‘linear’ are not the desired scales to use. The decoupling allows for better control of the chart state. As such, the isComparison flag on addSeries is now used to decide if a series should be shown in comparison mode ('percentage', 'relative'), but will not automatically set comparison mode when the new forcePercentComparison is explicitly disabled. This way CIQ.ChartEngine#setChartScale can be used instead to set any scale type, or let the active scale remain. Previously, the scale type was hard coded to be automatically set. The default behavior is 'forcePercentComparison=true' to ensure backwards compatibility. Set to false to leverage the enhancement.
  • CIQ.ChartEngine.Chart#allowScrollFuture now also respects studies that render into the future, such as the Ichimoku cloud, so all data is visible.
  • CIQ.ChartEngine.YAxis#justifyRight now also supports ‘null’ to automatically justify text alignment based on the axis position (right axis will justify left, and left axis will justify right).
  • CIQ.ChartEngine#clear has been aded as a convenience function to prevent interaction on charts with no valid data.
  • CIQ.Renderer.Heatmap was enhanced so opacity can be individually set per cell.

Version 6.1.0

Release Date: 7/1/18

  • Please Note TFC restructuring:
    • All required TFC functionality has been encapsulated within the 'plugins/tfc' directory for better distribution.
    • New file '/plugins/tfc/componenets.js' now contains the TFC web component previously in '/js/components.js'
    • '/js/plugin.js' and '/js/thirdparty/iscroll.js' are no longer needed. The plug in has been converted to use 'perfect-scrollbar.jquery.js' as the rest of the library.
      • All functions from CIQ.DialogManager originally in '/js/plugin.js' have been reworked and ported to CIQ.TFC inside '/plugins/tfc/tfc.js'
      • For example:
        • CIQ.DialogManager.dismissDialog(); is now CIQ.TFC.dismissDialog();
        • CIQ.DialogManager.displayDialog('tfcConfirmOrder'); is now CIQ.TFC.displayDialog('#tfcConfirmOrder');
    • To use the new plug in structure with your existing `sample-template-advanced.html, remove:
<script src="js/thirdparty/iscroll.js"></script>-->
<script src="js/plugin.js"></script>-->
<script src="js/components/tfc.js"></script>

And instead include:

<script src="plugins/tfc/components.js"></script>
  • to review all the changes, please run a comparison of all new plug in files against your current release.

New Plugins

Other enhancement

Version 6.0.0

Release Date: 6/26/18

  • Breaking change: In order to allow multiple charts to render directly in a single HTML document without producing duplicate DOM id's, the embedded chart controls have been redesigned to use class names instead of ID tags. If you choose to use our latest templates and CSS files, no changes are required on your part, and all you need to do is copy all files from the new package to your installation. Otherwise, if you wish to continue using the prior html templates or have a custom UI, you will need to sync chartiq.css and stx-chart.css to reflect the required changes. For your convenience, copies of the default 5.2 css files already adjusted to run on 6.0 can be found here:
  • chartiq.css
  • stx-chart.css

Compare these with your current 5.2 CSS files to see the differences.

  • Breaking change: gaps in the primary series are no longer connected by default on lines or mountain charts. To maintain the previous behavior set stxx.chart.gaplines=true; or use CIQ.ChartEngine#setGapLines

  • Please Note: The legacy templets (stx-advanced.html, stx-basic.html, stx-standard.html) are no longer being maintained. As such, starting with this release, the following directories have been removed from the package, but still available on prior releases:

    • legacyHTML
    • js/legacy

Please also note that style entries for legacy related IDs such as #sharedLinkDialog and #themeDialog have also been removed from the chartiq.css file.

  • Please Note: ie8 and ie10 are no longer being supported. As such, starting with this release, the following files have been removed from the package, but still available on prior releases:

    • js/thirdParty/ie8.js
    • js/thirdParty/excanvas.js

  • Please Note: The following plugins are no longer being maintained and have been removed from the package, but still available on prior releases:

    • autochartist
    • news
    • pts
    • stocktwits

  • Please Note: the following CIQ.ChartEngine#addSeries 'gapDisplayStyle' adjustments:

    • gapDisplayStyle is only applicable for line/mountain series.
    • If gapDisplayStyle is not present / gapDisplayStyle set to 'false' / gapDisplayStyle set to "transparent":
      • Show gaps in the lines: Don't connect the dots where there are no contiguous data points.
    • If gapDisplayStyle is set to true:
      • Don't show gaps in the lines: Connect the dots in same style as rest of series.
    • If gapDisplayStyle is set to color/style:
      • Don't show gaps in the lines: Connect the dots in the requested color/style.

  • Please Note: the following CIQ.ChartEngine#addSeries 'fillGap' adjustments:

    • Gaps will only be filled in masterData if global chart parameter CIQ.ChartEngine#cleanupGaps is set.
    • If fillGap not present
      • No gaps will be filled for the series.
    • If fillGap is set to 'false'
      • No gaps will be filled for the series.
    • If fillGap is set to 'true',
      • Gap filling will match 'cleanupGaps'.
    • If fillGap is set to 'carry' or 'gaps'
      • Will use that filling method even if cleanupGap is set differently.

  • Please Note: CIQ.ChartEngine#newChart will now automatically fill data gaps when pushing data using its masterData argument, if CIQ.ChartEngine#cleanupGaps is set. There is no longer a need to call CIQ.ChartEngine#doCleanupGaps manually.

Deprecated functions

To use, replace :

UIContext.setLookupDriver(new CIQ.UI.Lookup.Driver.ChartIQ());

with

UIContext.setLookupDriver(new CIQ.ChartEngine.Driver.Lookup.YourLookupEngine());

and create your YourLookupEngine as needed including an instance of CIQ.ChartEngine.Driver.Lookup#acceptText

All the above have been temporarily maintained for backwards compatibility.

Drawing enhancements

  • Highlight detection for drawings has been enhanced to be more intuitive.
  • The drawing toolBar on the advanced sample template has been enhanced to allow users to set and persistently save drawing tools defaults. Default storage is the browser local storage under "myChartPreferences". Once set, these defaults will then be used for any new drawing added until reset. Internally stored in CIQ.ChartEngine.preferences.drawings. See CIQ.Drawing.saveConfig, CIQ.Drawing.restoreDefaultConfig and CIQ.Drawing.copyConfig.
  • The drawing toolBar has been enhanced to only display relevant settings depending on active drawing tool.
  • The Average drawing tool-bar settings have been enhanced to allow the selection of 1st, 2nd and 3rd standard deviation line options.

Mobile native starter kits

  • Addressed study edit UI limitations.
  • Addressed interval UI drop-down display limitations.

Performance enhancement

  • We have enhanced the underlying architecture of the library to more efficiently support the display of data ranges far into the past. The new methodology no longer requires the sequential pagination and loading of bars from the current candle to the requested range. Instead, only the requested range will be immediately loaded into masterData and additional bars will be paginated forwards or backwards as needed to comply with user panning and zooming requests. This provides a huge performance boost and minimizes back-end data requests. This feature works automatically when using ranges or spans.

Other enhancement

  • Tooltip (sticky) is now also displayed on permanent drawing / series / studies.
  • Aggregation settings menu (Renko, Kagi, etc.) has been enhanced to display the active value even when in 'Auto Select' mode.
  • CIQ.ChartEngine#addSeries has been improved: extendToEndOfDataSet is now fully independent of gapDisplayStyle.
  • CIQ.ChartEngine#addSeries parameters.fillGaps is now a string type and can accept either "carry" or "gap". Setting to true will use the value of stxx.cleanupGaps.
  • quotefeed interface has been enhanced to provide more detailed parameters on fetch requests indicating the required extended hours sessions needed by the chart.
  • CIQ.ChartEngine.Chart#dynamicYAxis has been improved to provide smoother width adjustments as precision increases or decreases.
  • CIQ.UI.HeadsUp now also has internationalizer support for dates. See CIQ.I18N.setLocale or CIQ.I18N.localize.

Version 5.2.0

Release Date: 4/1/18

  • Please Note: The following data input limitation, present in prior releases, is no longer applicable:
          "The time portion of the 'DT' field is ignored and no time zone conversions are done for "daily", "weekly" or "monthly" charts.
          If using 'Date', you must clear out the time portion manually before loading."

    In order to improve data input consistency between all periodicities, it is no longer necessary to specially adjust the DT time offset on interday (daily, weekly or monthly) intervals for input dates with time zones that differ from the instrument’s market time zone. (For example, when sending a GMT+0 timestamp for a NYSE instrument.) As currently required with all intraday periodicities, now each interday bar's DT value should simply represent the start time of the bar. For example, a daily bar's DT for a NYSE instrument can now have a time portion of ‘13:30 GMT’ or '21:30 GMT+8' representing the ‘09:30 ET’ market opening.

    As such, if you have previously added code to specially adjust the DT timestamps for daily, weekly or monthly bars, you must now remove that code and use all of the same time zone offsets for all data records on all periodicities. Continuing to use any adjustment code may lead to inconsistencies in certain time zones.

    It is also no longer necessary to clear the time portion of a daily time stamp when using the Date field.

    However, excluding the time offset portion on a date (Date field) all together, such as 'yyyy-mm-dd', will simply display that date regardless of the dataZone or browser's time zone.

    To accommodate this architectural change, when using the setTimeZone(dataZone) API call, date fields of masterData, dataSet and dataSegment objects, are now immediately converted to the indicated dataZone, on all periodicities, except when the date ('Date' or 'DT') does not include a time offset, such as 'yyyy-mm-dd'. Please be aware of this difference if you have added custom code that references these date fields directly.

    If you are not using setTimeZone(dataZone) or are not making any adjustments to the DT field prior to loading, you will not notice any differences.

    Lastly, as of this release, setTimeZone(dataZone) should only be used for dates that are not timeZone aware. If using the 'DT' fields in your data input records, DO NOT use this function to set the dataZone as it will result in a double conversion.

  • Please Note: CIQ.ChartEngine#doCleanupDates now changes date fields to the time zone indicated by setTimeZone(dataZone), except when the date ('Date' or 'DT') does not include a time offset, such as 'yyyy-mm-dd'.

  • Please Note: The study dialog in the sample template has been converted from a 'helper' (componentUI.js) to a web component called WebComponents.cq-study-dialog. If you have made little or no modifications to the sample-template-advanced.html file, simply replace it with the latest file. Otherwise, anyone continuing to use a previously released UI with this new version, must update their 'HTML/JS' to use the new web component and eliminate the reference to the StudyMenu helper as follows:

    • Replace: <cq-scroll cq-studies> <cq-item class="stxTemplate"></cq-item> </cq-scroll>
    • With:
      <cq-scroll cq-studies>
	<cq-studies>
		<cq-studies-content>
				<template>
					<cq-item>
						<cq-label></cq-label>
					</cq-item>
				</template>
		</cq-studies-content>
	</cq-studies>
</cq-scroll>
    • And replace:
      var UIStudyMenu=new CIQ.UI.StudyMenu($("*[cq-studies]"), UIContext, params);
UIStudyMenu.renderMenu();
    • With:
      $("cq-studies").each(function(){
	this.initialize(params);
});

  • Please Note: CIQ.Drawing.getDrawingParameters has been enhanced to also manage font values. As a result, <cq-annotation cq-section> no longer uses <div>. Instead uses <cq-annotation-italic> and <cq-annotation-bold>. See latest sample-template-advanced.html for exact syntax.

  • Please Note: The Study dialog has been enhanced to better handle vertical spacing and scrolling between the `Inputs', 'Outputs' and 'Parameters' sections. As a result, either use the CSS and HTML files released this version or make the following changes if maintaining prior files.

    • In chartiq.css replace the following classes:
      cq-study-dialog cq-swatch {
  /* Dialog color swatch position */
  float: right; }

cq-study-dialog *[cq-study-inputs] {
  /* Dialog Input area (headings with textfields, etc.) */
  padding: 8px 0 0 0; }

cq-study-dialog *[cq-study-outputs] {
  /* Dialog Output area (headings with color swatches) */
  padding: 0 0 8px 0; }

cq-study-dialog .ciq-select {
  min-width: 75px; }

cq-study-dialog cq-study-parameters div.stx-data input[type="number"] {
  width: 45px;
  margin-right: 5px;
  float: left; }
    • With:
      cq-study-dialog cq-swatch {
  /* Dialog color swatch position */
  float: right;
  margin-left: 5px; }

cq-study-dialog cq-study-inputs hr,
cq-study-dialog cq-study-outputs hr,
cq-study-dialog cq-study-parameters hr {
  display: none; }

cq-study-dialog cq-study-inputs hr:last-of-type,
cq-study-dialog cq-study-outputs hr:last-of-type,
cq-study-dialog cq-study-parameters hr:last-of-type {
  display: block; }

cq-study-dialog .ciq-select {
  min-width: 75px;
  float: left; }

cq-study-dialog cq-study-parameters div.stx-data input[type="number"] {
  width: 45px;
  float: left; }
    • In sample-template-advanced.html replace the following HTML:
      <cq-dialog>
	<cq-study-dialog>
		<h4 class="title">Study</h4>
		<cq-scroll cq-no-maximize>
			<cq-study-inputs>
				<template cq-study-input>
					<cq-study-input>
						<div class="ciq-heading"></div>
						<div class="stx-data">
							<template cq-menu>
								<cq-menu class="ciq-select">
									<cq-selected></cq-selected>
									<cq-menu-dropdown cq-lift></cq-menu-dropdown>
								</cq-menu>
							</template>
						</div>
					</cq-study-input>
				</template>
			</cq-study-inputs>
			<hr>
			<cq-study-outputs>
				<template cq-study-output>
					<cq-study-output>
						<div class="ciq-heading"></div>
						<cq-swatch cq-overrides="auto"></cq-swatch>
					</cq-study-output>
				</template>
			</cq-study-outputs>
			<hr>
			<cq-study-parameters>
				<template cq-study-parameters>
					<cq-study-parameter>
						<div class="ciq-heading"></div>
						<div class="stx-data"><cq-swatch cq-overrides="auto"></cq-swatch></div>
					</cq-study-parameter>
				</template>
			</cq-study-parameters>
		</cq-scroll>
		<div class="ciq-dialog-cntrls">
			<div class="ciq-btn" stxtap="close()">Done</div>
		</div>
	</cq-study-dialog>
</cq-dialog>
    • With:
      <cq-dialog>
	<cq-study-dialog>  <!-- add cq-study-axis cq-study-panel tags to this component to enable that functionality -->
		<h4 class="title">Study</h4>
		<cq-scroll cq-no-maximize>
			<cq-study-inputs>
				<template cq-study-input>
					<cq-study-input>
						<div class="ciq-heading"></div>
						<div class="stx-data">
							<template cq-menu>
								<cq-menu class="ciq-select">
									<cq-selected></cq-selected>
									<cq-menu-dropdown cq-lift></cq-menu-dropdown>
								</cq-menu>
							</template>
						</div>
					</cq-study-input>
					<hr>
				</template>
			</cq-study-inputs>
			<cq-study-outputs>
				<template cq-study-output>
					<cq-study-output>
						<div class="ciq-heading"></div>
						<cq-swatch cq-overrides="auto"></cq-swatch>
					</cq-study-output>
					<hr>
				</template>
			</cq-study-outputs>
			<cq-study-parameters>
				<template cq-study-parameters>
					<cq-study-parameter>
						<div class="ciq-heading"></div>
						<div class="stx-data"><cq-swatch cq-overrides="auto"></cq-swatch>
							<template cq-menu>
								<cq-menu class="ciq-select">
									<cq-selected></cq-selected>
									<cq-menu-dropdown cq-lift></cq-menu-dropdown>
								</cq-menu>
							</template>
						</div>
					</cq-study-parameter>
					<hr>
				</template>
			</cq-study-parameters>
		</cq-scroll>
		<div class="ciq-dialog-cntrls">
			<div class="ciq-btn" stxtap="close()">Done</div>
		</div>
	</cq-study-dialog>
</cq-dialog>

  • Please Note: The 'Fibonacci' drawing tool has been renamed 'Fib Retracement' in the latest UI.

  • Please Note: X-axis labels are now top aligned, instead of vertically centered, regardless of xaxisHeight value.

  • Please Note: quotefeedSimulator has been renamed quoteFeedSimulator (CamelCase in 'quoteFeed' portion).

  • Please Note: The translation module has been further enhanced to improve word recognition and replacement. This improvement leverages the use of zero-width non-joiner (unprintable) characters to delimit the general study name from the specific study parameters. Example: "\u200c"+Aroon+"\u200c"+" (14)". At translation time, the library will split the text into pieces using the ZWNJ characters, parentheses and commas to just translate the required part of a study name. For more information on ZWNJ characters see: Zero-width_non-joiner. Please be aware of these ZWNJ characters, which will now be present in all study names and corresponding panel names; including the layout.studies study keys. Affected fields in the study descriptors could be id , display, name and panel.
    To prevent issues, always use the names returned in the study descriptor. This will ensure compatibility between versions.

Example:
Correct reference:
stxx.layout.studies["\u200c"+"Aroon"+"\u200c"+" (14)"];
Incorrect reference:
stxx.layout.studies["Aroon (14)"];

Deprecated functions

Studies enhancements

  • You can now use any valid renderer as a display function for a study. See Using Renderers to Display Study Output tutorial for details and instructions.
  • New disabled input validation option is now available on checkboxes for the study dialog. When set, the checkbox for the corresponding input will not be clickable and its data will not be used. See Study Input Validation tutorial for details and instructions.
  • Control over the study Y Axis parameters is now possible via properties in the study definition.
  • It is now possible place and move studies as follows:
    • Add multiple studies to any panel. See panelName parameter in CIQ.Studies.addStudy for details and instructions.
    • Place any study as an overlay on any existing panel.
    • Move any study to its own panel (even if normally an overlay)
    • To enable the UI for these new features on the latest HTML sample template (sample-template-advanced.html), you will need to add the cq-study-axis and cq-study-panel attributes to the cq-study-dialog web component; like so:
      <cq-study-dialog cq-study-axis cq-study-panel>
    • See: Advanced Study Editing for all implementation details.
  • Study output colors can now be used within a renderer. See an example in the Using Renderers to Display Study Output section of the Studies tutorial.
  • CIQ.Studies.drawHorizontal can now also accept yAxis and color parameters
  • Pivot Point formulas have been adjusted for more accurate results.

Drawing enhancements

  • Editable and custom Fibonacci levels are now available on the latest HTML sample template. See also CIQ.Drawing.fibonacci#initializeSettings
    • Use the latest HTML sample template (sample-template-advanced.html), or change to previous html template as follows. Following the <cq-fibonacci-settings></cq-fibonacci-settings> tag, add the following new tag:
      <div cq-custom-fibonacci-setting>
	<input class="ciq-heading" type="text">%
	<div class="ciq-btn stx-data" stxtap="add()">Add</div>
</div>
  • Fibonacci Projections are now available.
  • Fibonacci Drawings now includes ‘127.2%’ level on settings drop down

Y axis decimal precision

Other enhancements

  • Static charts can now run without any of the normally embedded HTML controls or event managers, allowing for a much more lightweight interface when no interactivity is needed. See CIQ.ChartEngine#manageTouchAndMouse
  • Any HTML control can now be disabled individually when not used, to minimize overhead. See CIQ.ChartEngine.htmlControls .
  • When the y axis is zoomed in, there will no longer be limitations on vertical panning.
  • Grabbing the x axis to zoom, now matches the chart panel zoom behavior for a more predictable interaction.
  • Improved smoothness of x axis labels movement.
  • New method CIQ.ChartEngine#getDataSegment, returns the visible portion of the dataSegment.
  • CIQ.ChartEngine#updateChartData was updated to produce more predictable results in cases when a partial OHLCV object is sent in to update a bar.
  • Restoration of Spans and Ranges by CIQ.ChartEngine#importLayout are now only executed if managePeriodicity is true and preserveTicksAndCandleWidth is false.
  • Improvements have been made to better identify UI interaction required when using all-in-one touch and mouse devices.
  • Improvements to Web Components to restrict event registration to the chart Container. This allows Web Components to be used in a larger page, without causing any interference with other modules.
  • Vertical grid lines in study panels are no longer dependent on the CIQ.ChartEngine#xAxisAsFooter property and will be always displayed.

Version 5.1.2

Release Date: 2/9/18

  • New drawing trendline combines a segment and callout to ease of use.
  • New CIQ.ChartEngine#staticRange parameter. When set to true the requested range will be visually preserved between symbol changes and layout imports, even if the data required to fill the left and/or right side of the x axis if not present.

Version 5.1

Release Date: 1/1/18

More predictable spans and aggregations

New series support for additional chart types

Enhanced data manipulation support

Additional enhancements

Version 5.0

Release Date: 10/1/17

  • Breaking change: ChartIQ's Web Component based interface has been revised. If you're using this interface (sample-template-advanced.html) then you will need to make adjustments to your code to be compatible with this release. Not necessary if upgrading from 4.1. Please run a diff between version 4 and version 5 of the template in order to see these changes. For your convenience, they are also listed here:
    • In function startUI():
      • Remove the first parameter to UILayout, resulting in this: var UILayout=new CIQ.UI.Layout(UIContext);
      • Remove UILayout.aggregationDialog UILayout.aggregationDialog=$("cq-dialog[cq-aggregation]");
      • Remove the last parameter to UIStudyEdit, resulting in this: var UIStudyEdit=new CIQ.UI.StudyEdit(null, UIContext);
      • Update views initialization methods, by replacing UIViewsMenu:
      var UIViewsMenu=new CIQ.UI.ViewsMenu($("cq-views-content"), UIContext, {cb:function(){
	this.renderMenu();
}});
      with cq-views:
      $("cq-views").each(function(){
	this.initialize();
});
      • Update overall UI initialization method by replacing :
        UIContext.buildReverseBindings();
      with: CIQ.UI.begin(); at end of startUI().
    • In the HTML portion:
      • Update signature of removeTimezone function call by replacing :
      <div class="ciq-btn" stxtap="Layout.removeTimezone()">Use My Current Location</div>
      with:
      <div class="ciq-btn" stxtap="removeTimezone()">Use My Current Location</div>
      • Update formatting of cq-study-context tag by replacing :
      <cq-dialog cq-study-context>
	<div stxtap="StudyEdit.edit()">Edit Settings...</div>
	<div stxtap="StudyEdit.remove()">Delete Study</div>
</cq-dialog>
      with :
      <cq-dialog>
	<cq-study-context>
		<div stxtap="StudyEdit.edit()">Edit Settings...</div>
		<div stxtap="StudyEdit.remove()">Delete Study</div>
	</cq-study-context>
</cq-dialog>
      • Replace cq-aggregation with cq-aggregation-dialog and update tag formatting by replacing :
      <cq-dialog cq-aggregation>
	// more HTML here, excluded for simplicity
	// (See sample-template-advanced.html for proper placement)
</cq-dialog>
      with :
      <cq-dialog>
	<cq-aggregation-dialog>
		// more HTML here, excluded for simplicity
		// (See sample-template-advanced.html for proper placement)
	</cq-aggregation-dialog>
</cq-dialog>
  • Breaking change: Trade from the Chart Module (TFC):
    • All plugin filenames have changed to eliminate the 'stx-' prefix from them. For example:
STX.loadWidget("../plugins/tfc/stx-tfc", function(err)

Must be changed to :

STX.loadWidget("../plugins/tfc/tfc", function(err)

  • The sample class STX.Account.Demo has moved out of the main plugins/tfc.js into plugins/tfc/tfc-demo.js, and needs to be explicitly included if necessary.

  • The WebComponent cq-tfc has been updated to reflect above changes. See TFC.prototype.initialize for reference.

  • Legacy template stx-advanced.html has also been updated reflect above changes and can be reviewed for reference.

  • Breaking change: Function signature for CIQ.prepareChannelFill, CIQ.preparePeakValleyFill and CIQ.fillIntersecting has changed. Quotes argument has been removed. Instead, dataSegment will always be used.

  • Breaking change: CIQ.mmddhhmm will now also output seconds and milliseconds if present on the input string.

  • Breaking change: CIQ.destroy() convenience method for destructing the chart instance and accompanying UI elements is no longer supported. Instead execute stx.container.parentNode.removeChild(stx.container); to remove the chartContainer DOM elements, and then call CIQ.ChartEngine#destroy to remove the chart engine itself.

  • Please Note: CIQ.ChartEngine#setSpan new behavior. When 1 'day' is requested data displayed will differ if current day is market day or the market is closed to ensure the span will have enough data. See function parameters for more details.

  • Please Note: Momentum swipe on Touchpads was corrected (reversed) to match the direction of the swipe on left left/right gestures as well as zoom-out with an up swipe and zoom-in with a down swipe.

  • Please Note: The floating "tooltip" in sample-template-advanced.html is no longer enabled by default. To enable, uncomment new CIQ.Tooltip({stx:stxx, ohl:true, volume:true, series:true, studies:true});

  • Quote feed functions quotefeed.fetchInitialData, fetchUpdateData and fetchPaginationData now also allow for a timeout parameter.

  • Volume underlay study now has border colors enabled. Driven by the 'border-left-color' attribute of the stx_volume_underlay_down and stx_volume_underlay_up styles.

  • Addresses requirejs issue with "html2canvas" on share.js

  • CIQ.ChartEngine#xAxisAsFooter now defaults to true

  • CIQ.ChartEngine#xaxisHeight now defaults to 30 px

  • New parameter CIQ.ChartEngine#escapeOnSerialize. When true serialize methods may escape their values with encodeURIComponent

  • New parameter CIQ.ChartEngine.Chart#lineApproximation. When candleWidth<1, setting to true will create approximation of a line chart to improve rendering performance.

  • CIQ.ChartEngine#setChartScale can now also set to "percent".

  • deleteHighlighted now deletes a renderer from the chart if it has no series attached to it.

  • CIQ.ChartEngine#zoomSet will now will keep left edge stable and zoom to the right when white space is present on the left.

  • If using a quoteFeed, when checking for more data to load in the process of displaying a requested span or range, the feed will try to fetch a larger set of bars with every recurring attempt to capture the requested range within the 10 allotted tries.

  • CIQ.ChartEngine#attachQuoteFeed now accepts a bufferSize parameter in its behavior object to prevent temporary gaps on studies while paginating.

  • quoteFeedSamples.js no longer included in the distribution package. All legacy templates have been modified to use quoteFeedSimulator.js instead.

  • sample-template-advanced.html no longer allows the "dynamic" heads up on mobile devices, as it is unnatural to use on touch devices.

  • New parameter CIQ.ChartEngine.Chart#comparisonYAxisAsPrice. The format of the yaxis when displaying a comparison can now either be in percent or price format.

  • CIQ.ChartEngine#doDisplayCrosshairs no longer allows the crosshair to be enabled if mouse pointer is outside the chart.

  • CIQ.ChartEngine#importLayout will now also import extended hours settings.

  • In CIQ.ChartEngine#exportLayout the obj.symbols element will be explicitly removed from the serialization if withSymbols is not true.

  • In CIQ.ExtendedHours It is no longer necessary to explicitly set stx.layout.marketSessions or stx.layout.extended to manage sessions; instead call mew method CIQ.ExtendedHours.prepare or CIQ.ExtendedHours.set

  • New tooltipParams.showOverBarOnly now available in CIQ.Tooltip to show tooltip only when over the primary line/bars.

Version 4.1

Release Date: 7/1/17

  • Please Note: The translation module has been enhanced to improve word recognition and replacement. This improvement leverages the use of zero-width non-joiner (unprintable) characters to delimit the general study name from the specific study parameters. Example: "\u200c"+"Aroon"+"\u200c"+" (14)". At translation time, the library will split the text into pieces using the ZWNJ characters, parentheses and commas to just translate the required part of a study name. For more information on ZWNJ characters see: Zero-width_non-joiner. If you are directly accessing the layout.studies object, please be aware of the ZWNJ characters.

Version 4.0.3

Version 4.0

  • Breaking change:

  • Breaking change:

  • Breaking change: CIQ.DropDownManager no longer included in the library.

  • Breaking change: share.js no longer provided as a separate add-on and instead, if used, it will be part of the chartiq.js bundle.

  • Breaking change: CIQ.Renderer#removeSeries now completely removes series data from masterData if no longer used by any other renderers.

  • Breaking change: Outputs Up Border and Down Border no longer available for vol undr study library entry. To set border colors use CSS "stx_volume_underlay_up" and "stx_volume_underlay_down" instead.

  • Please Note: CIQ.ChartEngine#reconstructDrawings and CIQ.ChartEngine#serializeDrawings have been deprecated in favor of CIQ.ChartEngine#importDrawings and CIQ.ChartEngine#exportDrawings respectively, but maintained for backward compatibility.

  • Please Note: All CIQ.ChartEngine#callbacks have been deprecated in favor of CIQ.ChartEngine#addEventListener, but maintained for backward compatibility.

  • Please Note: If you have created your own study display functions, we have replaced plotLineChart() with plotDataSegmentAsLine(), which allows for gaps to be plotted with different colors and/or patterns. Will also extend lines off the chart properly when there is a gap on the left or right edge.

  • Please Note: changes to periodicity (period/interval) will now also cause quotefeed.subscribe and quotefeed.unsubscribe calls.

  • Please Note: CIQ.ChartEngine.YAxis#goldenRatioYAxis now defaults to true

  • A series of optimizations to the rendering algorithm specifically focused on performance improvements for mobile devices. See CIQ.ChartEngine#disableBackingStoreDuringTouch.

  • New CIQ.RangeSlider is now available. See it on sample-template-advanced.html under the Display drop down.

  • New drawing tool: Average Line.

  • WebComponents.cq-chart-title now updates the browser tab with stock symbol and latest price using cq-browser-tab attribute.

  • WebComponents.cq-language-dialog is now available. This creates a dialog that can be used to change the language from the UI.

  • New css/img/languages.svg file added and cq-flag style added to css/chartiq.css to support Language Dialog.

  • CIQ.displayableDate is now available and used in CIQ.ChartEngine.AdvancedInjectable#headsUpHR to ensure the date formats are in sync throughout the chart.

  • All templates have been renamed from 'template-xxx.html' to 'sample-template-xxx.html' to better illustrate their purpose.

  • Display time zone and language are now retained by default between sessions when using sample-template-advanced.html, or if a developer implements the preferences callback (which works just like layout callback). WebComponents.cq-language-dialog saves CIQ.ChartEngine#preferences.language and triggers a callback. CIQ.ChartEngine#setTimeZone now saves the user selected timezone (displayZone) in the CIQ.ChartEngine#preferences and triggers a preferences callback. Developers should now look for stxx.preferences.timezone instead of stxx.displayZone. New CIQ.ChartEngine#importPreferences and CIQ.ChartEngine#exportPreferences are available, and used by helper functions savePreferences and restorePreferences on sample-template-advanced.html.

  • Ability to reverse candle colors based on language. This is primarily for Chinese and Japanese languages where Red is used as positive and Green as negative colors. See CIQ.I18N.localize .

  • New HLC box charts.

  • New "hlc" (bar), "colored_hlc" (bar) and "colored_step" (line) chart types. See CIQ.ChartEngine.layout.chartType.

  • Enhancements to CIQ.ChartEngine#@addSeries to better handle adding and removing gaping for series so no unnecessary bars are left once a series is removed.

  • Highlight detection improved to be more accurate on large candles.

  • Fibonacci settings webComponent added to sample-template-advanced.html. See WebComponents.cq-fib-settings-dialog.

  • Mouse wheel zooming can now be centered by the mouse position by setting CIQ.ChartEngine#preferences.zoomAtCurrentMousePosition to true.

  • You can now color a 'colored bar' or a 'volume' bar based on difference between open and close, rather than difference between previous close and close. See CIQ.ChartEngine#colorByCandleDirection.

  • Gaps on the main chart line can now be styled differently to highlight the absence of data. See CIQ.ChartEngine#setGapLines.

  • doubleTap callback listener has been added. See CIQ.ChartEngine#addEventListener.

  • Preferences can now be imported and exported in addition to the chart layout. See CIQ.ChartEngine#importPreferences CIQ.ChartEngine#export.Preferences.

  • CIQ.ChartEngine.Chart#legendRenderer now works for all Line Renderers not just legacy.

  • Grids lines can now be styled "solid", "dotted" or "dashed" by setting the CSS "border-style"

		.stx_grid { /* Default Grid */
			color:#efefef;
			opacity:1;
			border-style:dotted;
			}

Version 3.0.10

(Patch release with new functionality.)

Version 3.0.9

(Patch release with new functionality.)

  • Now, backing store can be disabled between 'touchstart' and 'touchend' events (pan, scroll) and swipe. This can improve performance on slow devices. See CIQ.ChartEngine#disableBackingStoreDuringTouch for details.
  • New Fibonacci settings web component is now available with the drawing tool-bar on template-advanced.html

Version 3.0.7

(Patch release with modified behavior.)

  • Support asynchronous nameValueStore on Views Menu. An additional optional callback has been added to CIQ.UI.ViewsMenu .
  • Optionally make the focus control in study panels expand the panel into the full charting area in the canvas. See CIQ.ChartEngine#soloPanelToFullScreen.
  • Update to translations.js
    • We updated our translations list with 301 additional key words.
    • The library now has the ability to use double quotes in translations.js to handle commas in the phrases to be translated.

Version 3.0.6

(Patch release with modified behavior.)

  • Enhancement on logic to properly handle adding series that may go beyond the range of the main symbol. The fetch behavior has been changed to set the end date to 'right now' and make an initial fetch request instead of making an update request. This is a modification of the Version m-2016-12-01.4.7 change to remove the requirement of having to use an update fetch call in the quote feed, allowing for better backward compatibility.

Version 3.0.0

  • Breaking change: The following parameters and functions are no longer used in the library. Now, all x axis rendering is done with CIQ.ChartEngine#createTickXAxisWithDates

    • CIQ.ChartEngine.hasNTBAxis
    • CIQ.ChartEngine.XAxis.axisType
    • CIQ.ChartEngine.createNumericXAxis

  • Breaking change: intl.js is no longer included in the chartiq. js build. All major browsers now include Intl by default. The sole exception is Safari 9. Customers wishing to support those users can manually include intl.js from the thirdparty directory.

  • Breaking change: The animation plug-in is now part of addOns.js. Previously, it was provided as a standalone animation.js file.

  • Breaking change: When using a quoteFeed, the initial comparison fetch now only includes the startDate in the fetch params to allow the series to load up to the current date. Essentially making an update call to the quoteFeed, instead of a range call.

  • Breaking change: CIQ.ChartEngine.XAxis#futureTicksInterval now defaults to 1 minute instead of 10 minutes.

  • Breaking change: In CIQ.ChartEngine#addSeries, parameters.forceData is no longer used. Now all initial data sent in will be forced into the chart by forcing a materData element where one was missing. The new bar inserted will only include the Date, DT and the value for the series. No OHLC values will be carried over. This could create gaps in studies. To prevent gaps created by the new series, you must ensure the new data exactly matches the master data dates.

  • Breaking change: CIQ.ExtendedHours has a new function signature to support real-time market session filtering. Setting params.filter to true performs a filter of masterData rather than a reload of the data from the server.

  • Breaking change: CIQ.ChartEngine#createDataSet now automatically filters the masterData to exclude any points outside the active market sessions. See CIQ.Market for details on how to set market hours for the different exchanges.

  • Please Note: CIQ.ChartEngine#serializeDrawings has been replaced with CIQ.ChartEngine#exportDrawings but maintained in this version for backward compatibility.

  • Please Note: CIQ.ChartEngine#reconstructDrawings has been replaced with CIQ.ChartEngine#importDrawings but maintained in this version for backward compatibility.

  • Please Note: CIQ.ChartEngine#setPeriodicityV2 has been replaced with CIQ.ChartEngine#setPeriodicity but maintained in this version for backward compatibility.

Enhancements and additions

  • Semantic versioning is now being used. For the details see: https://semver.org/
  • "histogram" and "step" chart types are now supported. See CIQ.ChartEngine.layout.chartType and CIQ.ChartEngine#setChartType for more details.
  • Architecture for real time aggregation and study calculations was enhanced to improve performance; especially on rapidly updating charts using streaming and animation. The new paradigm prevents the complete recalculation of the data set when an item is added to the end of it. This change affects calculateHeikinAshi, calculateKagi, calculateLineBreak, calculateRenkoBars, calculateRangeBars, calculatePointFigure, and all studies and indicators.
  • Refactoring of the canvas manager was implemented to address browser latency on 4k monitors.
  • New parameter CIQ.ChartEngine#maxMasterDataSize was added to prevent the masterData array from growing excessively large. Older data will be sliced off the array, when the max setting is reached, as new bars are added on the right side of the chart. By default masterData is unlimited and will grow forever.
  • quotefeed.fetchInitialData is no longer being called for series pagination requests. Now quotefeed.fetchPaginationData will be called for both the primary instrument and all additional series.
  • New parameter CIQ.ChartEngine#displayGridLinesInStudies is now available to manage the display of horizontal grid lines on studies.
  • New parameter CIQ.ChartEngine.Chart#defaultPlotField is now available for line and mountain type charts to allow a field other then "Close" to drive the rendering of the chart.
  • Aggregated chart types (renko, kagi, etc.) now have a user interface that allows users to configure aggregation settings (see template-advanced.html).
  • CIQ.ChartEngine#appendMasterData now also takes last sale data to directly allow for streaming capabilities. This can now be used instead of streamTrade.
  • New CIQ.InactivityTimer class was added as an add-On that puts the chart into "sleep mode" after a period of inactivity.
  • CIQ.I18N.setLanguage now also takes a root parameter to limit the translations scope to the desired container.
  • CIQ.ChartEngine.XAxis#formatter now is also available for year and month boundaries.
  • New CIQ.createLabel method is now available to allow developers to control the text inside the y axis floating label. Developers can override as needed to create the desired effects on the text.
  • Function signature changed on CIQ.tickedRect, CIQ.roundRect, CIQ.roundRectArrow, CIQ.semiRoundRect, CIQ.rect and CIQ.noop. These functions now take a single argument object instead of 8 individual parameters.
  • CIQ.addMemberToMasterdata now automatically forces all data into the chart. Dates are no longer required to be exact matches in order to show up in comparisons.
  • CIQ.Renderer#removeSeries was modified to remove the series even if series parameter permanent is set to true. The permanent parameter only prevents right click user interaction and not programmatically requested removals.
  • New CIQ.ChartEngine#useBackingStore parameter was added to allow developers to manage the use of the backing store for the canvas. Enabling the backing store results in crisper display but with a noticeable performance penalty in some browsers.
  • New parameters CIQ.ChartEngine#preferences.highlightsRadius and CIQ.ChartEngine#preferences.highlightsTapRadius were added to allow developers to set the radius for the invisible intersection box around the cursor used to determine if it has intersected with an element to be highlighted. Used on items removed with a right click such as series and drawings.
  • New CIQ.ChartEngine.YAxis#drawSeriesPriceLabels parameter was added to allow developers to hide the series price labels in the main panel y-axis.
  • New CIQ.ChartEngine.XAxis#noDraw parameter was added to allow developers to suppress the x axis from the chart.
  • CIQ.ChartEngine#setLocale was modify to include the additional maxDecimals parameter to allow developers to set the decimal precision when using a particular Locale.
  • CIQ.postAjax was modified to include timeout and ungovernable parameters.
  • All studies now dispatch a symbolChange event type if there are symbols in the study stx.dispatch("symbolChange", {stx:stx, symbol:s, action:action});
  • CIQ.Studies.displayError was added to allow developers to display a watermark on a panel for a study with sd.error set.

Version m-2016-12-01.4.9

(Patch release with breaking changes.)

  • Breaking change: All legacy CIQ.Comparisons quotefeed operations and CIQ.ChartEngine#addSeries quoteFeed updates and paginations now trust the data being returned for the new series and will add gaps on the masterData to fit the comparison bars. The new bars inserted will only include the Date, DT and the value for the series. No OHLC values will be carried over. This could create gaps in studies. To prevent gaps created by the new series, you must ensure the new data exactly matches the master data dates.

Version m-2016-12-01.4.7

(Patch release with breaking changes.)

  • Breaking change: To properly handle adding series that may go beyond the range of the main symbol, the fetch behavior has been changed to make an update request instead of an initial fetch request when calling addSeries. This allows the feed to return all available data from that startDate regardless of primary symbol last tick.

Version m-2016-12-01

  • Breaking change: The library files have been reorganized as follows:

    • The names of the HTML template files have changed to be more representative.
      • chartiq.html is renamed to template-advanced.html
      • chartiq-basic.html is renamed to template-basic.html
      • stx-quickstart.html is renamed to helloworld.html
    • The legacy templates (stx-advanced.html, stx-standard.html, stx-basic.html) have moved to the legacyHTML directory along with their required css and img directories.
    • The legacy UI interface and helper functions have been moved to the 'js/legacy` directory.
    • The sample data files have moved to the new example-data directory .
    • As a result of the reorganization, a modified set of external script files now needs to be included as follows:

      • The following is a sample of the external scripts that can be included in the advanced Web Components template (template-advanced.html):

        <script src="js/chartiq.js"></script>
<script src="js/animation.js"></script>
<script src="js/thirdparty/splines.js"></script>
<script src="js/quoteFeedSamples.js"></script>
<script src="js/quoteFeedSimulator.js"></script>
<script src="js/thirdparty/iscroll.js"></script>
<script src="js/plugin.js"></script>
<script src="js/translations.js"></script>
<script src="js/addOns.js"></script>
<script src="js/thirdparty/object-observe.js"></script>
<script src="js/thirdparty/webcomponents-lite.min.js"></script>
<script src="js/componentUI.js"></script>

      • The following is a sample of the external scripts that can be included in the advanced legacy template (stx-advanced.html):

        <script src="js/chartiq.js"></script>
<script src="js/animation.js"></script>
<script src="js/quoteFeedSamples.js"></script>
<script src="js/thirdparty/iscroll.js"></script>
<script src="js/plugin.js"></script>
<script src="js/translations.js"></script>
<script src="js/addOns.js"></script>
<script src="js/legacy/comparison.js"></script>
<script src="js/legacy/quotes.js"></script>
<script src="js/legacy/ui.js"></script>
<script src="js/legacy/lookupXignite.js"></script>
<script src="js/plugin.js"></script>

      • The following is a sample of the external scripts that can be included in the basic and standard legacy template (stx-basic.html & stx-standard.html):

        <script src="js/chartiq.js"></script>
<script src="../js/quoteFeedSamples.js"></script>
<script src="../js/thirdparty/iscroll.js"></script>
<script src="../js/legacy/quotes.js"></script>
<script src="../js/legacy/ui.js"></script>
<script src="../js/legacy/lookupXignite.js"></script>

      • See the following Core Functionality section as well as the updated sample templates for more details.

  • Breaking change: Functionality previously found in stxShare.js is now included in chartiq.js. Additionally, the STXSocial namespace is now CIQ.Share.

  • Breaking change: on mobile or desktop webview implementations where you are hosting the stxKernelOs.js file in a web server instead of embedding it in the application bundle, you will now need to embed js/chartiq.js. This new file replaces the legacy stxKernelOs.js.

  • Breaking change: Timezone library originally in stxTimeZoneData.js, is now bundled in the chartiq.js library file and has been trimmed using 2016 data and modularization to reduce size. Any data no longer included by default, can be manually added back by extending the timezoneJS object.

  • Please Note: The library base namespace has been changed from STX to CIQ. Legacy name is still being allowed for backward compatibility.

  • Please Note: The new STXChart call used to instantiate a chart engine has been changed to new CIQ.ChartEngine. Legacy name is still being allowed for backward compatibility.

Core Functionality

  • The ChartIQ library has been modularized to provide more packaging flexibility.

    • The "core" library is now in a single file:js/chartiq.js. This new bundle replaces many of the individual legacy files including stxKernelOs.js.

    • Custom modular packaging of the chartiq.j bundle is now supported for special needs and in order to minimize library footprint (contact us for more information).

    • All other functionality not in chartiq.js, has been moved to the following individual files which can be included or excluded as needed:

      • js/quoteFeedSimulator.js example of new quotefeed API; connects to ChartIQ's new data simulator
      • js/quoteFeedSamples.js legacy demo quotefeed samples
      • js/componentUI.js UI web components used in template-advanced.html
      • js/thirdparty/iscroll.js third-party support for smooth scrolling
      • js/thirdparty/splines.js third-party spline-plotting functionality
      • js/thirdparty/object-observe.js third-party support for asynchronously observing an object
      • js/thirdparty/webcomponents-lite.min.js third-party support for web components used in templates
      • js/translations.js support for internationalization
      • js/addOns.js rare addons including ExtendedHours and ToolTip (for crosshairs)
      • js/animation.js plugin to enable specialized chart animation
      • js/plugin.js additional code required to support plugins (TFC, stocktwits, etc.) in the web components template (template-advanced.html)

  • A new Quotefeed API simplifies integrating your own data. A new tutorial provides an overview with links to the new API. template-advanced.html provides an example using the new quotefeed API. The legacy STX.QuoteFeed is still being maintained.

  • Animation performance improvements.

  • Heads up display enhancements.

  • Theme enhancements.

  • New Price-Related Study

  • CIQ.ChartEngine#cleanupGaps now supports "carry" and "gap" values. Setting to non-false will default to "carry" for backward compatibility with prior versions.

    • carry will cause the closing price to be carried forward, resulting in dashes on a candle/bar chart or continuous line on a line or mountain chart.
    • gap will cause physical breaks to occur on the chart in the gapped position.

  • New CIQ.ChartEngine#captureMouseWheelEvents parameter added. If set to false it will allow up/down mouseWheel / touchPad swiping to pass through the chart container so the main page can manage it. This allows a user swiping up and down to swipe through the chart instead of having the chart capture the event and prevent the page from continue moving. It therefore produces a more natural up/down sliding of the page.

New Tutorials

  • Many new tutorials have been written and a few old ones rewritten. The new tutorials are flagged on the main tutorial page of the library documentation.

Version 09-2016-19

  • Breaking change: If using splines, it is now required to include the following: <script src="js/splines.js"></script> and corresponding js/splines.js file.
  • Breaking change: In chartiq.html comparisons are now reset and not carried over between symbols.
  • Breaking change: Templates no longer included in the license package: stx-phone.html and stx-basic.html
  • Breaking change: CIQ.ChartEngine#addSeries parameters.data.useDefaultQuoteFeed is no longer needed to be specified. If no parameters.data is provided the quotefeed will be automatically used, and no longer tries to use an existent masterData field.

Core Functionality

  • New template chartiq-basic.html (web components)
  • Library now provides support for CommonJS and NodeJS or RequireJS
  • New advanced studies:
    • VWAP
    • Performance Index
    • Beta
    • Balance of Power
    • Trend Intensity Index
    • Vortex Indicator
    • ZigZag
    • Psychological Line
    • Moving Average Deviation
  • New advanced drawing:
    • Crossline
    • Speed Resistance Arc
    • Speed Resistance Line
    • Gann Fan
    • Time Cycle
    • Regression Line
    • Tirone Levels
    • Quadrant Lines
  • Added studyOverBoughtValue and studyOverSoldValue selectors to study dialog.
  • Modified CIQ.ChartEngine.stxx.markerDelay to immediately cause markers to move. Prior setting had a 25ms delay.
  • Chart aggregations (Heikin-Ashi, etc.) now preserves server side data on dataSet.
  • Studies can now use attributes to set allowable ranges for numeric inputs. Example:
"Hist Vol": {
	"name": "Historical Volatility",
	"calculateFN": CIQ.Studies.calculateHistoricalVolatility,
	"inputs": {"Field":"field", "Period":10, "Days Per Year":[252,365], "Standard Deviations":1},
	"attributes": {
		"Standard Deviations":{min:0.1,step:0.1} // this limits the range of Standard Deviations to a minimum of 0.1 and only allows changes in 0.1 steps.
	}
}
  • Added "Points Or Percent" input field to "Price Oscillator" study
  • Added "Moving Average Type" input field to "RAVI" study
  • Added "Period" input field to Elder Force Index study
  • New CIQ.Renderer.Shading is now available to shade between series lines.
  • New CIQ.Tooltip module is now available to display datapoint details on the current crosshair location.
  • CIQ.ChartEngine#addSeries parameters.data.DT can now also take an epoch number.
  • CIQ.ChartEngine#addSeries now allows a series to be added on an empty chart.
  • new function CIQ.ChartEngine#moveMarkers moves the markers from one panel to another. Useful when renaming panels

Web Components UI

  • Added CIQ.UI.ViewsMenu for Views support (cq-view-dialog)
  • Added Key up/down support for search windows
  • Study legend renderer now displays the 'display' name insted of the ID
  • Added Trading Central support (cq-tradingcentral and cq-tc-number)
  • Added basic details component (cq-details)
  • Heads up tooltip (stx-hu-tooltip)

Enhancements

Version 07-2016-16

Core Functionality

  • Added a Smoothing Period parameter to the ADX study.
  • New parameter CIQ.ChartEngine#minimumZoomTicks to set the minimum number of ticks that must remain on the chart when zooming in. (07-2016-16.6)
  • New parameter CIQ.ChartEngine#cloneDrawing is now needed to clone a drawing. A developer can toggle it based on the control key to maintain the previous functionality. (07-2016-16.7)
  • FloatDate now stays pinned to the left size if there isn't enough room to display (prevents it from being clipped).(07-2016-16.7)
  • Safety check for negative study periods added -- if a negative number is selected it is reset to 1. (07-2016-16.7)

Web Components UI

  • Custom themes added
  • Study legend component added ( cq-study-legend )
  • Close price added to comparison legend ( cq-comparison )
  • Added study zones parameters to UI. (07-2016-16.7)
  • Corrected line not centered on drawing line style drop down. (07-2016-16.7)

Enhancements

  • Comparison no longer causing error if chart is panned all the way to the left showing just the first tick.
  • Fixed identical studies causing infinite loop -- corrected study name-relationship logic. (07-2016-16.7)
  • Corrected moving Average not allays working on volume study. (07-2016-16.7)
  • Undo/Redo drawing button now resets when a symbol is changed. (07-2016-16.7)
  • CIQ.colorToHex - fixed bug with missing leading 0's. (07-2016-16.7)
  • Fix for zoom bug on iOS. (07-2016-16.7)
  • Callbacks.longhold no longer triggered when pinching (catching two finger situation). (07-2016-16.7)
  • Corrected setRange issue causing shifted renderings with white space on left. (07-2016-16.7)
  • Fixed calculateRandomWalk divide by 0 issue. (07-2016-16.7)

Version 06-2016-21

(Minor release.)

Version 05-2016-10

Core Functionality

  • CIQ.ChartEngine.Chart#lockScroll can now be set to true to stop the chart from auto-scrolling when new data arrives

  • stxx.preferences.currentPriceLine can now be set to true to display a horizontal line at the current price.

  • stxx.preferences.horizontalCrosshairField can now be set to lock the crosshair Y value to the value of the specified field name.

  • stxx.xAxisAsFooter can now be set to display the xaxis at the bottom of the screen instead of the bottom of the chart panel.

  • CIQ.ChartEngine#setSpan will now save the desired span in stxx.layout. Users will get the same span when they change symbols, and the span will now be saved and restored with the layout between sessions

  • "Equal Citizen" series. Series may now be added without dependency to the start or end date of the primary series and without setting a masterData. This is done by using parameters.forceData which will create a masterData entry if none exists for that DT. See CIQ.ChartEngine#addSeries for details.

  • Users can now pan chart all the way to the left (previously 1/3 or the screen would always be taken by the chart). Use CIQ.ChartEngine#minimumLeftBars to set the minimum amount of chart to always display on the left side of the screen.

  • Equation charts now work for comparison symbols, relative price symbols and any other condition where a study requires a symbol other than the master.

  • New Marker placement options: yPositioner="on_candle", "under_candle", "top", "bottom", "value" to position the market on top of, or underneath the candle, at the top or bottom of the panel, or at the specified value. See CIQ.Marker

  • Autocalculated values now available in chart.dataSet automatically: "hl/2" - Median Price "hlc/3" - Typical Price "hlcc/4" - Weighted Close "ohlc/4" - OHLC divided by 4

  • Library now compatible with "use strict".

  • CIQ.ChartEngine#importLayout and CIQ.ChartEngine#exportLayout can now optionally also restore/save the stock symbol using the "withSymbols" parameter

  • Market.getOpen(dt), getClose(), getNextOpen(), getNextClose(), getPreviousOpen(), getPreviousClose() convenience functions

  • New baseline_delta_mountain and colored_mountain chart types are available.

Web Components UI

There is now a new file chartiq.html which is an updated, responsive UI that is based off of Web Components. The webcomponents-lite.min.js polyfill (included) are required to run this on browsers other than Chrome. object-observe.js polyfill is currently required (this requirement will be removed in an upcoming release).

Recent changes:

  • cq-toggle now a true webcomponent
  • cq-side-panel webcomponent now used to house side panel plugins (trade from chart)
  • Any cq webcomponent can now be loaded as a marker with the cq-marker attribute.
  • All cq webcomponents now automatically have this.node as a jquery accessor.
  • All cq click bindings now pass an "activator" object (instead of a node) to their action methods. This object contains the node, event and optional parameters.
  • cq-focus on an input tag inside of a menu will cause the input to receive focus immediately when the menu is activated.
  • cq-color-picker now repositions itself it is off screen.
  • cq-comparison-description if exists will display the description of a comparison symbol in the legend.
  • cq-tooltip tag replaces css :after elements, allowing them to be translated

Enhancements

  • Held draggable elements will no longer trigger an inadvertent mouse click if they are dragged underneath a button (TFC).

Version 03-2016-11

  • Breaking change: A new Market class replaces LegacyMarket class. If calling any functions from LegacyMarket, please replace them with equivalent Market functions. The Market class now allows a market's hours and holidays to be defined with a market definition file. Market iterators allow you to move forward and backward in time, with the Market automatically skipping over time when the market is closed. See CIQ.Market for all instructions and details.

  • Breaking change: chart.xAxis.useDataDate is not longer available. Instead use CIQ.ChartEngine.XAxis#adjustTimeZone with inverted logic.

  • Breaking change: The Twiggs study now requires attribution. Please see the attribution information in stx-advanced.html.

  • Breaking change: iscroll4 was removed from stxThirdParty.js. (iscroll5 remains)

  • Improved mobile gestures for smoother and more accurate pinch and swipe.

  • You can now swipe a chart with the mouse.

  • Equations are now supported (when using a QuoteFeed). Start equations with "=". Example =IBM+AAPL. CIQ.ChartEngine#allowEquations

  • Home button animates the chart to home instead of skipping immediately.

  • Color picker colors can now be customized by redefining the values in CIQ.colorPickerColors

  • CIQ.Studies.replaceStudy method now available to replace an existing study.

  • Support for fractional y-axis values (treasuries and treasury futures) CIQ.ChartEngine.YAxis#fractional

  • New improved semi-log y-axis CIQ.ChartEngine.YAxis#prettySemiLog

  • Multiple identical studies can now be added. Each one will have a name that ends in -1, -2, -3 (to support adding studies without a dialog)

  • Advanced template: Menus now automatically resize and allow scrolling if there is not enough vertical space.

  • Advanced template: up and down arrow keys now zoom the chart

  • Performance improvements when many (especially old) drawings on the screen

  • Resolved issue with focus (solo) button overlapping studies y -axis when activated.

  • Charts on mobile devices will pass scroll up and down to the parent app by setting CIQ.ChartEngine#captureTouchEvents to false

  • New callbacks CIQ.ChartEngine#callbacks.layout and CIQ.ChartEngine#callbacks.drawing will be called when the layout is changed or a drawing is changed, added or deleted.

  • CIQ.ChartEngine#addEventListener to allow multiple listens on a callback.

  • New CIQ.QuoteFeed.Subscriptions object can manage subscriptions in order to combine query (for historical) with streaming updates. This QuoteFeed type will callback when new symbols are required or old symbols are removed by the user from the chart.

  • Multiple Markers on the same chart bar will now stack.

  • CIQ.ChartEngine#newChart parameter stretchToFillScreen can be set to increase the candleWidth to fill the left-side gap created by a small dataSet.

  • Trade From Chart:

    • Forex hedging now optionally supported
    • Positions markers are now displayed on the chart.

Version 12-2015-08

(Minor release.)

Fixed crosshair positioning bug on touch devices.

Added flag to control side-swipe touch pad scrolling. set stxx.allowSideswipe=false to disable.

Version 11-2015-01

  • Breaking change: stxx.cleanupGaps now defaults to false. We've found that most customers who have gaps in their date prefer this behavior. If you wish to fill gaps with "dashes" then set this value to true.

  • Breaking change: Translations have now been moved into an optional translations.js file which you only need to include if you are supporting multiple languages.

  • Breaking change: New file stxShare.js contains the code for chart sharing. If you were previously supporting chart sharing you will need to include this file.

  • Breaking change: stx-demo.html and stx-demo.css have been renamed stx-standard.html and stx-standard.css. Please be sure to update your include references.

  • Breaking change: stx-drag-chart class is now added to the chart container when dragging, no longer the document.body

  • Breaking change: the stxx.callbacks.studyOverlayEdit function definition in stx-advanced.html was slightly updated. You will need to replace the function on your project with the latest one to ensure overlay studies properly delete.

  • Breaking change: CIQ.ChartEngine.YAxis#drawPriceLabels now controls the rendering of all y axis labels (using CIQ.ChartEngine#createYAxisLabel). Setting this to false will turn off y-axis labels regardless of any other settings. For study series, stxx.preferences.labels now controls the rendering. Example: stxx.preferences.labels=false;. This flag can be set to false before calling CIQ.Studies.displayIndividualSeriesAsLine or CIQ.Studies.displaySeriesAsLine and then set back to true to disable labels just for that one study.

  • Breaking change: The up/down arrow buttons on the main chart control panel as well as the focus (solo) button on all panels have been removed on the stx-advanced.html sample template. To re-enable them, comment out the display:none; line on the following style controls found in stx-advanced.css

	/* comment out if you want the main chart controls on. */
	.stx-panel-control.stx-chart-panel .stx-btn-panel{
		display:none;
	}

	/* comment out if you want the focus button on. */
	.stx-panel-control div:nth-of-type(3) { /* solo button */
		display:none;
	}
  • Breaking change: the stxx.callbacks.studyOverlayEdit function in your project (originally in) stx-advanced.html must be replaced with the latest code to allow for a custom removal process needed on special studies.

Specifically this portion of the function:

	CIQ.safeClickTouch(remove, function(){
		CIQ.DialogManager.dismissDialog();
        var removeFN=sd.libraryEntry.removeFN?sd.libraryEntry.removeFN:CIQ.Studies.removeStudy;	// <---- changed
        removeFN(stx,sd);																	      // <---- changed
        var closeIcon=$$$("#menuWrapperStudies #" + sd.type.replace(" ","-"));
        if(closeIcon) {
        	CIQ.clearSafeClickTouches(closeIcon);
        	closeIcon.style.display="";
        }
	});

  • A new "pretty" algorithm is the default for calculating y-axis grid levels. Set CIQ.ChartEngine.YAxis.prototype.pretty=false for the old algorithm.

  • The number of decimal places to use in the current price label is now calculated by the callback calculateTradingDecimalPlaces. The default implementation now looks at the most recent 50 trades rather than the entire masterData. This reduces the risk of displaying too many decimal places due to unscrubbed data. This methodology can be overridden if desired (for instance if a source exists for the actual number of decimal places). See CIQ.ChartEngine#callbacks

  • Charts with second and millisecond periodicities are now supported. Pass an optional third parameter timeUnit into setPeriodicityV2 to qualify the periodicity number. For instance to create a 5 second chart from 5 second data: setPeriodicityV2(1, 5, "second").

  • Added CIQ.yyyymmddhhmmssmmm method to support second and millisecond charts. Drawings will now save in this format but will remain backward compatible with drawings saved prior to this upgrade.

  • Added volume_candle chart type.

  • New studies:

    • Darvas Box study
    • STARC Bands study
    • Supertrend study

  • New views in TFC positions panel. Easily add protection to current positions. Display P&L. Display "trades" view for Forex systems. New Enhanced positions configs:

    • config.closeAll drives the close all button
    • config.tradeActions controls the protection view
    • The presence of account.trades drives the lots view and the ability to protect/close a trade.

  • Practice Trading Simulator is now available as a plugin.

  • Autochartist is now available as a plugin.

  • To improve layout efficiency , the default study menu in stx-advanced.html now contains a lookup capability. Only the most popular studies will be displayed in the initial drop down. This initial list can be modified by altering the HTML in stx-advanced.html. Clicking "all" will pull up a scrollable list of studies.

  • Drawing undo button now available in stx-advanced.html

  • Added new "HeatMap" renderer. See CIQ.Renderer.Heatmap

  • Horizontal trackpad/mouse wheel support

  • Fixed clipping issues with IE8 excanvas.

  • Candles are now "centered" in their allocated space. Previously candles were left aligned. This would not have been noticed in most cases but was counter-intuitive for developers who were writing code to draw directly on the canvas.

  • CIQ.Studies.addStudy can now be called directly. CIQ.Studies.quickAddStudy is deprecated but still supported.

  • QuoteFeed now receives both a symbol and a symbolObject. A symbolObject can contain additional information used to identify a security, for instance exchange code. See {@CIQ.QuoteFeed#fetch} and CIQ.ChartEngine#newChart for details on how to use a symbol object in your chart.

  • CIQ.ChartEngine#addSeries now supports a symbol and a symbolObject.

  • CIQ.Comparison.add was enhanced - compareSymbol now supports a symbol and a symbolObject.

  • CIQ.ChartEngine#newChart is now capable of setting periodicity and span via params settings.

  • CIQ.ChartEngine#setMaxTicks Function signature updated:

    • params added as an additional argument.

  • CIQ.ChartEngine#appendMasterData - Function signature updated:

    • params bypassGovernor and allowReplaceOHL were added
    • params force was deprecated. Every call will update the tick to maintain the proper volume and createDataSet is now controlled by sp.maxTicks, sp.timout or params.bypassGovernor

  • CIQ.LegacyMarket.getNextOpen, CIQ.LegacyMarket.getPreviousClose - Function signature updated:

    • stx is now a required parameter

  • CIQ.ChartEngine.YAxis#shadowBreaks was added. This is an array that determines how many decimal places to print based on the size of the shadow (the difference between chart high and chart low). The array consists of tuples in descending order. If the shadow is less than n1 then n2 decimal places will be printed. Set to CIQ.ChartEngine.YAxis.defaultShadowBreaks by default.

  • CIQ.ChartEngine#mouseWheelAcceleration was added - Set to false to turn off mousewheel acceleration

  • New Drawing tools and constructors:

    • Callout drawing tool. This is like an annotation except it draws a stem and offers a background color and line style.
    • New Shape constructor - CIQ.Drawing.shape is a default implementation of a CIQ.Drawing.BaseTwoPoint drawing which places a "shape" on the canvas. It can be rotated and/or stretched. It is meant to be overridden with specific shape designs, such as arrows, etc.

  • New side-swipe scrolling. 2 finger side-swipe motion on touch pad (left/right) scrolls the chart.

Version 08-2015-01

This is a minor release containing mostly tweaks or minor bug fixes.

  • Please Note: The fibonacci drawing tool has been renamed "retracement" although the old name is supported for backward compatibility.

  • Added mutual fund support in Xignite quote feed

  • Fibonacci timezones, arcs, fan

  • Fibonacci settings

  • Resizing the chart now automatically maintains scroll position

  • IOS8 fixed:position bug workaround in stx-phone

  • Removal of markers bug fix

  • Removed small canvas used for floating last/current price label. It is now directly drawn on the chart canvas using CIQ.ChartEngine#createYAxisLabel The following styles in stx-chart.css are no longer needed:

.stx-float-price {/* Floating horizontal value */
    margin-left: -13px;
}

.stx-float-price-canvas {
    margin-top: 7px;
    margin-left: 2px;
}
.stx-float-price-arrow {
    color: #333;
}
.stx-float-price-inner {
    position: absolute;
    top: 10px;
    padding-left: 13px;
}

Version 07-2015-01

  • Breaking change: CIQ.Comparison.quoteFeedCallback should no longer be set on the QuoteFeed. Comparisons (series) quote fetching is now done automatically when using a QuoteFeed.

Example:

var quoteBehavior={
  refreshInterval: 15,
  //callback: CIQ.Comparison.quoteFeedCallback <<<---- remove this line if you want to use the new automatic series data loading
};

For backwards compatibility, the CIQ.Comparison.quoteFeedCallback function will still be called instead of the new automatic QuoteFeed fetching if defined in the quoteBehavior. But it is important that if you wish to continue using the legacy architecture, you must ensure you continue to flag series properly so the quoteFeedCallback continues to update data as needed. So if your quoteFeedCallback function uses quoteFeedCallbackRefresh as the flag for series that use the QuoteFeed for data, you must continue to include this flag in your series parameters.

  • Breaking change: All drawings and studies have been moved into stxLibrary.js (previously in CIQ.js) except those that are only available with the advanced package which are now in stxAdvanced.js.

  • New drawing types: Gartley, Pitchfork, Channel, Callout, Shapes (arrow, heart, etc). Shapes includes a facility for developers to draw custom shapes by specifying a series of vectors.

  • New Studies: Choppiness Index, Ulcer Index, Disparity Index, Rainbow Oscillator, Rainbow Moving Average, Pring's Know Sure Thing, Pring's Special, Price Momentum Oscillator

  • Support for multiple y-axis, including y-axis on the left side of the chart. See CIQ.ChartEngine.YAxis#position and Renderers

  • The floatHR element (y-axis value that moves with crosshair) is no longer a DIV element but is now painted on to a new transparent canvas called floatCanvas. This was done to facilitate multiple y-axis, where each one would need a separate floating element.

  • Updated, simplified, Markers interface. See Markers. Trade From the Chart, panel icons, home button, etc all modified to use the new Marker interface.

  • New Renderer concept allows developers to build custom "renderers" for building time series based visualizations. Initial Renderer.Line and Render.Histogram can be used for adding multiple series to the chart in either line or stacked histogram format, with optional left y-axis. See Renderers

  • Callbacks object for for developers to tap into commonly requested callbacks such as tap, move, studyOverlayEdit, studyPanelEdit. See CIQ.ChartEngine#callbacks (In stx-advanced.html CIQ.editCallback was replaced with stxx.callbacks.studyPanelEdit and stxx.callbacks.studyOverlayEdit)

  • A new server side symbol lookup module is available for customers who utilize Xignite market data.

  • stx-advanced.html now includes a context menu when right clicking on study overlays. The context menu allows users to either edit or delete the overlay.

  • Charts will now display partial bars on both left and ride side of the chart for a more seamless look. dataSegment as a result can now contain references to bars that are not entirely on the screen. Canvas clipping has been implemented more rigorously to accomodate this new functionality.

  • Baseline Delta charts now have a user draggable centerpoint.

  • Default studies in stx-demo.html have been changed to reduce clutter. Original studies are still available, just manually add them back if you need them.

  • Changes to stx-phone.html to better support full-screen mode, especially on older phones.

  • All browsers other than Chrome now use requestAnimationFrame by default. Set stxx.useAnimation to override this behavior. This improves performance on Firefox and Safari.

  • chart.left, chart.right, chart.width, etc all now refer to the space occupied by the chart panel itself, minus the axis. Similarly panel.left, panel.right, panel.width, etc is available for every panel. Finally, stxx.left, stxx.top, etc now refer to the position of the chartContainer on the page. stxx.width references the width of the chartContainer.

  • A chart object is now required by the LookupWidget (to facilitate language translation).

  • CIQ.destroy() convenience method for destructing (cleaning up) the chart instance and accompanying UI elements.

  • Added CIQ.ChartEngine.YAxis#justifyRight and CIQ.ChartEngine.YAxis#textBackground parameters.

  • stxx.yaxisLeft and stxx.yaxisWidth have been deprecated in favor of CIQ.ChartEngine.YAxis#width and CIQ.ChartEngine.YAxis.left.

  • stxx.preferences.zoomInSpeed and stxx.preferences.zoomOutSpeed now available to set the zoom sensitivity. See CIQ.ChartEngine#preferences

  • Example built in themes in stx-advanced.html use names "White" and "Black". You can keep the old "Light": true, "Dark": true if desired.

  • excanvas.js now supports rudimentary clipping.

  • All convenience price conversion functions now take an optional yAxis argument. See for instance CIQ.ChartEngine#pixelFromPrice.

  • A number of minor syntactical changes were made throughout the library to reduce warnings from jshint.

Version 05-2015-15

  • Chart title reverted back to display by default. Un-comment 'display:none' to hide.
.stx-panel-control.stx-chart-panel{ /* hide chart controls */
	/*display:none;*/
}

  • Added logic to properly remove any studies that relied on the old panel ID name, for instance a moving average on RSI(14) is no

  • stxx.streamParameter.maxWait set to default to 1 second.

  • stxx.allowZoom flag now also enables/disables mousewheel events.

  • Added logic to properly translate between camel and hyphenated preventing style error in order native Chrome browsers.

  • Fixed MA study line dropping to zero at head-end of the chart if not enough data is available in the dataSet.

  • Improved scrolling stability control by reducing the amount of accidental vertical scrolling when panning left/right.

  • Improved performance of appendMasterData.

Version 04-2015-24

  • Breaking change: The library files have been reorganized from the last version into subdirectories: js, css, img. The advanced package also includes a "plugins" subdirectory. See Library Directory Structure for more details.

  • Breaking change: A new file stxLibrary.js now contains a library of studies, drawing tools and quote feeds that were previously contained in the kernel.

  • Breaking change: New SVG elements are now included in the img directory. These are used to render some chart components such as the icons on the chart panels.

To maintain IE8 compatibility, please ensure the following code is included:

// IE8 doesn't support svg as background image. This will cause a png to be used instead.
if(!document.implementation.hasFeature("https://www.w3.org/TR/SVG11/feature#Image", "1.1"))
  CIQ.appendClassName($$$("body"), "no-svg");

  • Breaking change: QuoteFeed implementations should now support startDate<->endDate. This specific date range functionality is required by the chart when loading comparison symbols.

  • Breaking change: the chart is now market hours aware. As such a valid symbol must be used in stxx.newChart(symbol, masterData); so the library can activate the proper exchange hours. To disable market hours and default to 24x7, set stxx.calendarAxis=true;. stxx.beginHour, stxx.beginMinute, stxx.endHour, stxx.endMinute are no longer relevant.

  • Breaking change: CIQ.ChartEngine#setSpan and CIQ.ChartEngine#setRange will now intelligently fetch appropriate data when called, if a QuoteFeed is attached and the masterData does not contain all data required to render the range selected. This makes it much easier to build range pickers. setSpan now also supports "all", "ytd" and "today" as possible values. Be aware the functions will now override the selected periodicity and automatically choose the best periodicity for the selected range according to the following rules map:

      	[
  		{range:CIQ.WEEK, periodicity:1, interval:5}, // Any range less than a week, load 5 minute bars
  		{range:CIQ.MONTH, periodicity:1, interval:30}, // Any range less than a month, load 30 minute bars
  		{range:CIQ.MONTH*7, periodicity:1, interval:"day"}, // Any range less than a year, load daily bars
  		{range:CIQ.DECADE, periodicity:1, interval:"day"}, // Any range less than a decade, load daily bars
  		{range:CIQ.DECADE*10, periodicity:1, interval:"month"}, // Any range less than a century, load monthly bars
  		{range:Number.MAX_VALUE, periodicity:12, interval:"month"} // Anything greater than a century, load yearly bars
  	]

See CIQ.ChartEngine#setSpan and CIQ.ChartEngine#setRange for usage details and parameters needed to override the new defaults.

  • Breaking change: The panel control buttons layout has been restructured. There is a new div called stx-btn-panel and new background files.

Previous version panel controls layout:

<div class="stx-panel-control" style="display: none;"><div class="stx-panel-title"></div><div class="stx-btn stx-ico"><span class="stx-ico-up"> </span></div><div class="stx-btn stx-ico"><span class="stx-ico-focus"> </span></div><div class="stx-btn stx-ico"><span class="stx-ico-down"> </span></div><div class="stx-btn stx-ico"><span class="stx-ico-edit"> </span></div><div class="stx-btn stx-ico"><span class="stx-ico-close"> </span></div></div>

This version panel controls layout:

<div class="stx-panel-control"><div class="stx-panel-title"></div><div class="stx-btn-panel"><span class="stx-ico-up"></span></div><div class="stx-btn-panel"><span class="stx-ico-focus"></span></div><div class="stx-btn-panel"><span class="stx-ico-down"></span></div><div class="stx-btn-panel"><span class="stx-ico-edit"></span></div><div class="stx-btn-panel"><span class="stx-ico-close"></span></div></div>

You will need to make sure your CSS contains the following (IF NOT COMPLETELY REPLACING WITH THE NEWLY PROVIDED CSS FILES) :

/* Panel Buttons */

.stx-btn-panel,
.stx-btn-panel span {/* Button Defaults */
 display:inline-block;
 width:25px;
 height:25px;
 cursor:pointer;
   -webkit-transition: -webkit-transform .2s;
   transition: transform .2s;
}
.stx-btn-panel {/* Button Spacing */
 margin:3px 2px;
 }
.stx-btn-panel:hover span,
.stx-btn-panel:active span {/* Make buttons full opacity on hover or hit */
 opacity:1;
 }
.stx-btn-panel:active {/* Scale up when active */
 -webkit-transform: scale(1.2, 1.2);
 -ms-transform: scale(1.2, 1.2);
 transform: scale(1.2, 1.2);
}
.stx-btn-panel span {/* Button Icons */
 background-image:url(../img/stx-sprite-panels.svg);
 opacity:.6;
   -webkit-transition: opacity .2s;
   -moz-transition: opacity .2s;
   transition: opacity .2s;
}
.no-svg .stx-btn-panel span {/* Button Icons for non SVG browsers */
 background-image:url(../img/stx-sprite-panels.png);
}
.stx-btn-panel > span.stx-ico-up {background-position: -150px -25px;}
.stx-btn-panel > span.stx-ico-down {background-position: -200px -25px;}
.stx-btn-panel > span.stx-ico-close {background-position: -250px -25px;}
.stx-btn-panel > span.stx-ico-edit {background-position: -300px -25px;}
.stx-btn-panel > span.stx-ico-focus {background-position: -350px -25px;}

.stx-panel-control.stx-chart-panel{ /* hide chart controls */
 display:none;
}

.stx-panel-control div:nth-of-type(3) { /* solo button */
 display:none;
}

You may need these as well if you don't have it:

.stx-panel-control {/* Panel Control buttons template */
 position: absolute;
 left: 0px;
 overflow: hidden;
 z-index: 30;
 display: none;
}

.stx-panel-control * {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.stx-panel-control.stx-show {
 display: inline-block;
}

.stx-panel-title {/* Panel/Chart Titles */
 margin: 5px 10px;
 float: left;
 display: inline-block;
 color: #333;
 padding: 0 10px;
 line-height:22px;
 font-size: 12px;
 text-align:left;
 text-transform: uppercase;
 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
 -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
 box-shadow: 0px 1px 1px rgba(0, 0, 0, .2);
 cursor: auto;
 background-color:#fff;
}

.stx-panel-control .stx-btn {/* Float all icons so they stay in line on the left */
 float: left;
}

Use this for the light theme (replace existing):

.Light .stx-btn-panel > span.stx-ico-up {background-position: -150px -25px;}
.Light .stx-btn-panel > span.stx-ico-down {background-position: -200px -25px;}
.Light .stx-btn-panel > span.stx-ico-close {background-position: -250px -25px;}
.Light .stx-btn-panel > span.stx-ico-edit {background-position: -300px -25px;}
.Light .stx-btn-panel > span.stx-ico-focus {background-position: -350px -25px;}

Use this for the dark theme (replace existing):

.Dark .stx-btn-panel > span.stx-ico-up {background-position: -150px -50px;}
.Dark .stx-btn-panel > span.stx-ico-down {background-position: -200px -50px;}
.Dark .stx-btn-panel > span.stx-ico-close {background-position: -250px -50px;}
.Dark .stx-btn-panel > span.stx-ico-edit {background-position: -300px -50px;}

Make sure to add the new background-image:url(../img/stx-sprite-panels.png) and background-image:url(../img/stx-sprite-panels.svg)

  • Breaking change: The "focus" icon which temporarily hides the other panels has been eliminated. It can still be added back for users who want backward compatibility by changing this line in stx-advanced.css:
.stx-panel-control div:nth-of-type(3) {
    display: none;
}
  • Breaking change: The chart title (symbol displayed on the upper left corner of the main chart) has been eliminated in the advanced package in favor of the input symbol box which also displays it. It can still be added back for users who want backward compatibility by changing this line in stx-advanced.css:
.stx-panel-control.stx-chart-panel{ /* hide chart controls */
	display:none;
}

  • It is no longer necessary to include stxTimeZoneData.js unless you wish to support the Timezone UI widget (standard and advanced packages). The default implementation now includes just the timezone information for New York and UTC which is necessary to support market hours logic. If you require logic for other timezones then you should include stxTimeZoneData.js.

  • Smooth scrolling. Charts now scroll pixel by pixel instead of candle by candle. This results in a smoother looking scrolling. An animation is used when pressing the zoom and home buttons. CIQ.ChartEngine.micropixels now contains the offset in pixels from the basepoint of the first candle.

  • New chart types Heiken Ashi, Kagi, Line Break, Renko, Point & Figure. (Advanced Package).

  • Gartley drawing tool. (Advanced Package).

  • New Studies: Relative Volatility, Market Facilitation Index, Relative Vigor Index, Alligator, Gator

  • New optional StockTwits and RSS News plugins. (Advanced Package).

  • studyLibrary now contains a friendly "name" member which can be used to drive automatic generation of menus.

  • Custom studies that require data to be fetched from a remote server can now do so by attaching a custom CIQ.QuoteFeed to the study.

  • Drawing tools now take into consideration shifting timezones, so that a user's drawings will appear in the right spot when they move to another timezone. Use the CIQ.Drawing#setPoint method to accomplish the same when building custom drawings.

  • CIQ.ChartEngine.layout.chartScale="log" is now the preferred way to enable log scale (CIQ.ChartEngine.layout.semiLog is maintained for backward compatibility).

  • YAxis Features: yAxis.min and yAxis.max can be used to set fixed minimum and maximum values for the y-axis. (For instance 0 and 1 on a percentage chart) yAxis.drawCurrentPriceLabel - set to false to not draw the current price label yAxis.drawPriceLabels - set to false to not draw price labels on that axis only yAxis.goldenRatioYAxis - will attempt to create grid lines that approximate the golden ratio. This creates an "airy" modern looking chart

yAxis parameter object can now be passed directly into the CIQ.ChartEngine constructor.

  • A custom yAxis parameter object can now be specified as part of the studyLibrary entry for a study.

  • More refinements to the non-time-based axis algorithm. xAxis.axisType="ntb" now provides superior x-axis label alignments under most conditions. This axis is enabled by default for range bars, kagi, renko and p&f

  • stxx.allowZoom and stxx.allowScroll can now be set to false to disable zooming or scrolling. Must be sent in as a config parameter to CIQ.ChartEngine. Example: var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer"), allowZoom:false, layout:{"candleWidth": 16, "crosshair":true}});

  • Injections can now be made to independent chart instances (as well as the prototype that affects all charts).

  • CIQ.addMemberToMasterdata can now be used to add a raw data series to the chart. (this is used internally by CIQ.ChartEngine#addSeries).

  • Fixed bug in CIQ.ChartEngine#tickFromPixel where the tick was being multiplied by the periodicity.

  • An injection was added to stx-advanced.html and stx-demo.html to provide a mechanism for deleting studies that don't support right click.

  • Performance improvements on createDataSet.

  • Complex security types are now supported. That is, a security object can be passed into newChart now instead of a string. Your QuoteFeed will receive this object. Set object.symbol to the unique label you want to print on the chart.

  • #chartContainer deprecated in favor of .chartContainer in css

  • Revised and simplified styling for chart components based on scalable svg elements.

  • z-index values of chart components have been re-arranged.

Version 01-2015-20

  • Breaking change: createVolumePanel() has been deprecated. Previously volume charts were created within CIQ.ChartEngine.displayChart(). Now they follow the same loading process as any other study. As such, the layout of the storage and retreival format has changed.

To make this change transparent to the end users, you can either

1- Add the following line at the end of displayChart() if the "vchart" panel is present:

if(stxx.panels.vchart) CIQ.Studies.addStudy(stxx, "volume", {}, {"Up Volume":"#8cc176","Down Volume":"#b82c0c"});

2- Add code in the restoreLayout() function to append the following to the layout data before calling stxx.importLayout(d) :

vchart:{
	type:"vchart",
	inputs:{
		id:"vchart",
		display:"Volume"
	},
	outputs:{
		Up Volume:"rgb(227, 100, 96)",
		Down Volume:"rgb(184, 44, 12)"},
		panel:"vchart",
		parameters:{
			chartName:"chart",
			editMode:true
		}
	}
}

It assumes the layout already includes the pannel "vchart":

panels:{
	chart:{"percent":0.7622929936305733,"display":"SPY","chartName":"chart"},
	vchart:{"percent":0.2377070063694267,"display":"Volume","chartName":"chart"}
}

Here is the function where you need to add the code:

function restoreLayout(){
	var datum=CIQ.localStorage.getItem("myChartLayout");
	if(datum==null){
		return;
	}
	var d=JSON.parse(datum);

	/****************************************************************/
	/********** add code here to include d.studies.vchart  **********/
	/****************************************************************/
	if(d.panels.vchart && d.studies && !d.studies.vchart)
		d.studies.vchart=	{
								type:"vchart",
								inputs:{
									id:"vchart",
									display:"Volume"
								},
								outputs:{
									Up Volume:"rgb(227, 100, 96)",
									Down Volume:"rgb(184, 44, 12)"},
									panel:"vchart",
									parameters:{
										chartName:"chart",
										editMode:true
									}
								}
							};
	stxx.importLayout(d);
	if(stxx.layout.semiLog) CIQ.appendClassName($$$(".stxLog"), "true");
	if(stxx.layout.aggregationType=="heikinashi") CIQ.appendClassName($$$(".stxHeikinashi"), "true");
	else if(stxx.layout.aggregationType=="kagi") CIQ.appendClassName($$$(".stxKagi"), "true");
	else if(stxx.layout.aggregationType=="linebreak") CIQ.appendClassName($$$(".stxLinebreak"), "true");
	else if(stxx.layout.aggregationType=="pandf") CIQ.appendClassName($$$(".stxPandf"), "true");
	else if(stxx.layout.aggregationType=="renko") CIQ.appendClassName($$$(".stxRenko"), "true");
	else if(stxx.layout.aggregationType=="rangebars") CIQ.appendClassName($$$(".stxRangebars"), "true");
}

  • minMax miscalculations on studies with negative values due to use of MIN_VALUE

  • Studies can now be specified as singletons by including "singleton=true" in the library entry. This will prevent this study from being loaded in multiple panels.

  • Editing studies of studies now works correctly, daisy chaining all the way from parent to youngest child study

  • Additional moving average types

  • New Study : Volume profile

  • CIQ.ChartEngine and UI Singletons now have destroy() methods to clean up their memory heaps

  • Default timezones for pacific islands modified based on customer feedback

  • minimumCandleWidth member of CIQ.ChartEngine now specifies the smallest user zoom (1 pixel by default, previously 0.25)

  • Bug fix for chart borders on studies with "zones"

  • More efficient createDataSet() method

  • Formula corrections for pivot points

  • Iscroll5 is now "probe edition"

Version 12-2014-02

Breaking change: stxThirdParty.js and stxTimeZoneData.js are now required includes because our market date logic (used to compute the x-axis) is now timezone aware. Please includes these two scripts before CIQ.js.

Breaking change: The floating price label is now based off of a small canvas. CSS changes are necessary for a smooth transition. These are included in the updated stx-chart.css

.stx-float-price {/* Floating horizontal value */
    margin-left: -13px;
}

.stx-float-price-canvas {
    margin-top: 7px;
    margin-left: 2px;
}
.stx-float-price-arrow {
    color: #333;
}
.stx-float-price-inner {
    position: absolute;
    top: 10px;
    padding-left: 13px;
}

Breaking change: The DrawingToolbar has changed. To maintain compatibility please copy the <div class="stx-toolbar" id="stx-toolbar">...</div> section from the new stx-demo.html or stx-advanced.html to your existing system.

CIQ.ChartEngine now accepts a config object. The config object can contain any member variable or subvariable for the CIQ.ChartEngine object. For instance to set up a mountain chart:

var stxx=new CIQ.ChartEngine({chartType:"mountain", container:$$("chartContainer")});

Aesthetic improvements: + Capitalized months by default on x-axis + Optional borders on chart enabled with stxx.axisBorders + More pleasing volume study and volume underlay + User customizable colors for volume and volume underlay + Crisper drawings + Options for y-axis label pointers. Default is now pointy arrow. See yaxisLabelStyle in CIQ.js + initialMarginTop and initialMarginBottom now default to 10 pixels to create buffer space at bottom and top of chart + More intuitive y-axis numbering + Support for billions and trillions in CIQ.condenseInt() for studies such as on balance volume + yTolerance stiffened so that horizontal panning is more natural for users. yTolerance exposed for developer override stxx.yTolerance + stxx.extendLastTick extends line and mountain charts to left and right edge of candleWidth for continuous look.

New baseline_delta chart type displays green above first (opening) tick and red below first tick.

New colored_line chart type alternates green/red on up down days

Range bar charts now available by setting stxx.layout.aggregationType="rangebars". A default range will be selected or programmatically set stxx.layout.range to your desired range. Note that this is only available programmatically.

Candle shadows (wicks) can now have different up/down colors. Custom colors on mountain charts can now support user controlled gradient.

Custom chart callbacks can now be used to program chart types where the color is determined programmatically.

Drawings may now be repositioned by end users.

Annotations now support user defined font/size/color.

Fibonacci now supports printing prices rather than levels (programmatically by setting CIQ.ChartEngine.currentVectorParameters.fibonacci.printValues=true)

Non-Time-Based x-axis for supporting tick, range bars and other chart types that have non-linear dates on the x-axis. Set xAxis.axisType="ntb" or stxx.layout.interval="tick".

xAxis variables exposed for developer override. See CIQ.ChartEngine.XAxis. xAxis.formatter callback can be used to completely control x-axis formatting.

Stochastics now defaults to displaying overbought/oversold zones (similar to RSI).

New "0 to max" study type now supported. Studies such as OBV and TVI now extend the full height of their axis to show their range over the course of the chart.

CIQ.DropDownManager for creating drop downs. This class uses document level events rather than an overlay to detect "tap to close".

stxx.streamParameters can now throttle inbound ticks to streamTrade().

stxx.cleanupGaps when set to true the chart will automatically identify gaps in a linear chart sequence and populate those gaps with last close dashes

Async callbacks now allow developers to know when a chart has rendered when it depends on asynchronous date (for instance a study that makes a call out to a server for data). See CIQ.ChartEngine#startAsyncAction, CIQ.ChartEngine#completeAsyncAction, CIQ.ChartEngine#registerChartDrawnCallback

CIQ.ChartEngine#postAdjustScroll and CIQ.ChartEngine#preAdjustScroll can be used to maintain a chart scroll position between resize events,such as if you need to adjust the size of the chart container.

DrawingToolbars can now be set up for multiple charts on one screen.

Iscroll5 is now available in stxThirdParty.js. We will be migrating from Iscroll4 to Iscroll5. Iscroll5 has much better support, particularly support for active scrollbars.

Dropped support for legacy class names such as STXStudies (now CIQ.Studies). It is no longer necessary to set stx_namespaced=true.

Version 08-2014

Breaking change: as of this version many of the CSS styles have been changed. In general we have added stx- in front of styles. So what previously was "btn" would now be "stx-btn". This was done to avoid conflicts with toolkits such as Bootstrap and Angular.js which are now using many of the same names.

If you're using a prior version and have either customized the HTML or CSS there will be some effort to convert forward. You can compare the new stx-demo.html or stx-advanced.html files with the previous ones to see the CSS changes. If you have not heavily modified the code then you should be able to use a merge tool to quickly make the transition.

At the bottom of stx-demo.html and stx-advanced.html we have included a function called stxClassReplacer() to assist in the transition. This function will automatically convert any old CSS names to the new CSS names in real-time. The way to use this is:

  1. replace the old stx-demo.css file with the two new files (stx-chart.css and stx-demo.css)
  2. Copy the stxClassReplacer() function to your current code
  3. Uncomment the conversion map

Now your old code should work with the new CSS. We recommend running this way as a temporary solution. Now:

  1. Comment each line in the conversion map
  2. Manually convert the class name in your HTML. For instance, change all instances of class="btn" to class="stx-btn"
  3. Make sure nothing is broken
  4. Repeat

After finishing this process your code should now be converted to the new CSS.

  • New file stx-chart.css contains the basic CSS required for a chart, but none of the CSS required for widgetry such as is found in stx-demo.html.
  • Removed stx-demo-theme-1.css and stx-demo-theme-2.css. These files are no longer necessary for theming. Instead, the class "Light" or "Dark" is automatically added to the BODY tag when a theme is enabled, causing CSS to be overridden by the higher specificity. The themes are thus included directly in stx-demo.css. You can of course override these themes if desired.
  • stx-print.css is now included. This formats the chart properly for printing.
  • A new phone interface is available in the Advanced package. This includes the new files stx-phone.css, stx-phone.html, stx-sprite-phone.png and stx-sprite-phone@2x.png.
  • STX_SAMPLE_30MIN.js and STX_SAMPLE_5MIN.js are no longer included. Demonstration intraday data is now generated randomly by CIQ.QuoteFeed.Demo
  • New Trade From Chart package
  • Ichimoku Cloud study now available in Advanced package
  • New CIQ.QuoteFeed class now makes it much easier to integrate a custom quote feed using an event driven callback model.
  • Most classes now using STX namespace. STXDialog becomes CIQ.Dialog. The old classes are still available for backward compatibility.
  • The library is now compatible with Require.js.
  • All global functions have now been moved into the STX namespace. The global functions are still available for backward compatibility.
  • STX#loadScript can now dynamically load JavaScript content.
  • "Right click to delete" message now appears when hovering on drawings or overlay studies.
  • Y-axis labels are now added for user drawn horizontal lines
  • Measure tool now available in Advanced package
  • Zoom by grabbing y-axis or x-axis with mouse
  • Charts now automatically detect container size changes through 1 second polling mechanism. Turn off by setting stxx.resizeDetectMS=0
  • Charts now default to displaying gaps when Close=null for a data point
  • CIQ.ChartEngine#setStyle function now available to programmatically change chart styles
  • CIQ.ChartEngine#removeDrawing function to programmatically remove user drawings
  • CIQ.ChartEngine.AdvancedInjectable#drawXAxis now separates out functionality from CIQ.ChartEngine#createXAxis so that either can be ammended through the Injection API
  • Smarter x-axis layout code to avoid unnecessary gaps and handle overlapping labels
  • yAxis.minimumPriceTick can be set to specify that the y-axis vertical grid be drawn with specific ranges. eg stxx.chart.panel.yAxis.minimumPriceTick=.25
  • Automatic selection of text color for y-axis labels
  • Vertical zoom is now pixel based rather than price based making for much smoother zooming
  • stxx.initialMarginTop and stxx.initialMarginBottom can now be used to add space to top or bottom of chart
  • Candle rendering is crisper and wicks are now always centered
  • series can now be added using the CIQ.ChartEngine#addSeries method
  • CIQ.ChartEngine#watermark now supports vertical and horizontal centering
  • Data can now be initialized either as a string for Date or as a JavaScript Date object (DT). See CIQ.ChartEngine#newChart, CIQ.ChartEngine#setMasterData

Version 05-2014

  • Added loadWidget method to dynamically load html/css/js functionality
  • Added safeClickTouch, safeMouseOver, safeMouseOut, safeDrag functionality for supporting complex UI with mouse and touch devices
  • dragToDraw capability now supports optional draggable drawing tools
  • Mountain chart color can now be user selected
  • CIQ.ChartEngine.yaxisLeft can now be used in conjuction with yaxisWidth to control positioning of the y-axis (for instance the y-axis can now be on top of the chart)
  • Timezone calculation performance improved with caching
  • Clearing drawings can now be undone with undo()
  • Improvements to x-axis time/date scaling
  • Performance improvements when scrolling and zooming chart
  • “chart-title” class can be used to style the symbol label on a chart
  • Smoother zooming. Better Apple Magic Mouse support.
  • z-indexes of chart controls raised by one
  • Fixed faulty GMT timezone choice

Standard Package

  • Added vertical line drawing tool
  • Added full screen capability

Advanced Package

  • Added freeform and continuous drawing tools
  • Added optional side panels to stx-advanced.html

Version 02-2014

  • Chart "componentry" is now dynamically created. No need to include these html elements in your chart container unless you wish to override them.
  • Added support for "series" overlays
  • Added last sale streaming capability
  • Drawings can now be made in panels
  • Mousewheel zoom
  • "Mountain" chart type
  • Y-Axis labels are now native canvas and not DOM. Optionally display labels for all indicators and overlays.
  • Native importLayout() and exportLayout()
  • Consolidation of file structure.
  • Create a new chart using newChart() function which consolidates setMasterData(), initializeChart(), createDataSet() and draw().
  • Injection API now support multiple append and prepend functions.
  • Increased developer control over the y-axis on charts and studies
  • Built in modalBegin() and modalEnd() functions
  • floatDate now a built in capability
  • currentPanel now always equals the current panel that the cusor is within
  • priceFromPixel() now takes an optional second "panel" parameter and can be used on indicator panels
  • Further performance enhancements
  • Less sensitive vertical scrolling (horizontal pans are now more even)
  • Better pinching (pinches now occur where the user places her fingers and more consistent with the motion of the pinch)
  • Automatic resizing of chart canvas even when container is resized dynamically
  • Developer control over Fibonacci tool layout
  • Added createDrawing() convenience function
  • Undo functionality now built in using undoLast() function
  • deleteAllPanels() function now available

Version 11-2013

  • Performance tuning. A significant effort has been put into performance tuning the application so that it can provide quicker rendering and user interface.
  • Support for HTML5 Canvas animation by setting ‘CIQ.ChartEngine.useAnimation=true’. Animation is automatically enabled for Android devices.
  • Drawing tool overhaul. A new drawing tool architecture has been released. Building custom drawing tools is much easier. Rectangles and ellipses are now supported natively. Line width and pattern can now be selected. Annotations no longer include a "stem".
  • Right hand side whitespace is now automatically maintained when a user selects a chart. This provides an improved experience for end users.
  • A new translation API and toolkit now included in stxI18N.js. See the documentation on Localization.
  • Logarithmic charting display has been improved. Users can now pan and resize logarithmic charts without affecting the aspect ratio.
  • Improved pinching and zooming. The chart is now intelligent about its placement when zooming, especially when pinching on touch devices.
  • Scatterplot chart now supported for datasets with more than one value per x-axis location.
  • CIQ.ChartEngine#getStartDateOffset, CIQ.ChartEngine#setStartDate, CIQ.ChartEngine#leftTick methods provide convenient programmatic access to chart navigation.
  • Vertical line tool.
  • tickFN functionality now deprecated. seriesFN should be used for all custom indicators in order to boost performance.

Version 9-2013

  • Added stx-quickstart.html file.
  • Added stx-demo.html sample file – supports changing chart colors, enabling themes, smart menus, smart dialogs, symbol lookup widget, Scrolling manager, Timezone selector, Storage manager, drawing toolbar, heads up display
  • Added stx-demo.css, stx-demo-theme-1.css, stx-demo-theme2.css files.
  • Added stxUI.js library file.
  • Renamed sample.html to stx-sample.html and included more coding examples.
  • Consolidated images into stx-chart-icons.png and stx-ui-icons.png sprite files.
  • $$$() convenience function for using css selectors
  • clearCanvas() renamed STX#clearCanvas. Now supports clearing of canvas on old (defective) Android devices. Enable this functionality by setting global CIQ.ChartEngine.useOldAndroidClear to true.
  • Default color palette for drawing modified to more useful, web friendly colors
  • STX#newChild convenience function for creating new HTML elements
  • stxStudies – library now supports "auto" colors which will automatically be white or black depending on the brightness of the chart background
  • CIQ.Studies.quickAddStudy – convenience function for programmatically adding new studies.
  • RSI now defaults to display of overbought and oversold lines. Override the CIQ.Studies.studyLibrary "parameters" to eliminate or change the defaults.
  • Studies may now be programmatically created with the "permanent" flag which will prevent users from deleting them.
  • Optional "yaxis" library parameter can override drawing the y-axis for a study.
  • Default study y-axis spacing reduced to provide more y-axis points.
  • Line drawings that go off screen no longer display horizontally at top or bottom of the chart.
  • Dashed and dotted line drawings now supported.
  • Timezone support.
  • CIQ.ChartEngine.Chart.beginHour, CIQ.ChartEngine.Chart.beginMinute, etc now automatically default to 24 hour trading unless overridden.
  • CIQ.ChartEngine.Chart.minutesInSession now automatically calculated.
  • CIQ.ChartEngine.registeredCharts eliminated in favor of CIQ.ChartEngine.registeredContainers which contains references to the HTML containing elements.
  • showMeasure html element eliminated (consolidated with mSticky)
  • x-axis drawing and layout improved to eliminate gaps and overlaps
  • CIQ.ChartEngine#formatPrice now available to format price in locale format
  • CIQ.ChartEngine.constructVector now takes a "parameters" parameter which describes the width and pattern of the line, segment, etc.
  • Candle borders now supported.
  • “hollow" candle chart type now supported.
  • Panel close icon moved to top of panel, and changed from trashcan to "X"

Version 7-2013

This version adds support for the following:

  • Internationalization – See tutorial Localization and new files stxI18N.js as well as the Intl.js library for more details.
  • Multiple Charts – Multiple charts may now be displayed on the screen without the use of iframes. See the new stx-multi.html sample file.
  • Internet Explorer 8 Support – Using the excanvas.js shim library. Note that in order to support IE8 charts must not be created until the document body has been fully loaded. sample.html therefore no longer calls 'loadChart' inline but instead calls it via body onload.
  • Improved layout of x-axis eliminates gapped spacing and overlapping labels.
  • CIQ.ChartEngine objects may now be set to manage their own mouse and touch events by setting CIQ.chart.manageTouchAndMouse= 'true'. When this is done the document level mouse and touch events can be eliminated from the main html page.
  • Some minor changes were made to sample_style.css to better support the menu layouts in sample.html. measureLit and measureUnlit classes were deprecated.
  • CIQ.Studies.go now accepts an CIQ.ChartEngine object as a second parameter. This is necessary to support translation.
  • {link CIQ.displayInitialized} variable is now set when a chart is rendered. The old method of checking CIQ.chart.crossX!=null is no longer valid.
  • A streaming chart simulator was added to sample.html in order to better demonstrate the usage of CIQ.ChartEngine#appendMasterData.
  • CIQ.ChartEngine may now be constructed with a container DIV reference. That container may be accessed at CIQ.ChartEngine.chart.container.
  • References to HTML navigational componentry are not included in CIQ.ChartEngine.chart. These include mSticky, showMeasure, annotationSave, annotationCancel and chartControls.
  • CIQ.MenuManager.registeredCharts now contains an array of all CIQ.ChartEngine objects on the page.
  • Right clicking through context menu can now be overridden by replacing document.oncontextmenu. See CIQ.ChartEngine

Version 5-2013

Important! stxModulus.js has been added as a new file. Please be sure to include this in your application before stxKernelOs.js with the charset="ISO-8859-1" attribute.

Important! The CIQ.computeLength() object has been modified. It no longer takes a height but instead takes two prices, high and low. This was necessary to support logarithmic charts which cannot by their nature support linear length calculations. If you've used this function in your code then please modify those cases to the new signature.

Important! STXMarket.nextPeriod() and STXMarket.prevPeriod() both now require an interval. This was necessary for supporting intraday charts with n-period intervals. If you've used these functions independently then please modify your code to use the new signature.

Important! Div objects that previously were placed outside of the chart containing object must now be positioned within the chart containing object. In sample.html this is the section under the "CHART TEMPLATES" comment. This decision was driven by the increasing complexity of positioning the objects on charts that are being used in many different ways. By placing these objects within the chart container the library has fewer calculations to make and the likelihood of bugs is decreased.

  • The layout of mSticky and showMeasure have changed slightly.
  • Also in this version div tags have been added for the crosshairs. In previous versions the crosshairs were created dynamically by the library but this now gives web developers more control over these tags. (note that the z-index for crosshairs has also been reduced from 3 to 2).
  • A currentHR tag has been added that displays the current price on the Y-axis in green or red depending on whether the security is currently up or down.
  • A button has been added to toggle crosshairs on or off.
  • Semi-Logarithmic scale is now supported. Set stxx.layout.semiLog=true to turn on semi-log scaling.
  • A new periodicity function stxx.setPeriodicityV2(period, interval) allows more flexible periodicity for intraday charts. See the new section in this documentation on periodicity. (Note that setPeriodicity() remains functionally deprecated).
  • The functions for floatDate and floatHR in sample.html have been modified to reflect the changes in the contained objects. If you've copied these functions into your own code be sure to modify it to reflect these changes. -The mouse and touch events section in sample.html main() function have been modified to provide better support for Windows8 touch events. The library is now compatible with "all in one" computers that use both touch and a mouse. For complete touch support please migrate to this new functionality.
  • A new library stxSocial.js is available. This library supports chart image creation and sharing. Please contact us if you'd like to license this package.
  • CIQ.ChartEngine.appendMasterData() can now be used to implement auto-updating or streaming charts. See the new section in the above documentation.
  • CIQ.Studies.removeStudy() can now be used to programmatically remove a study.
  • Several new convenience functions have been added to stxUtilities.js.

Version 3-2013

  • This version remains unchanged but sample.html now includes an example of an intraday chart.

Version 2-2013

  • Charting performance is greatly improved in this version thanks to smarter rendering algorithms to the HTML5 Canvas. Zooming and panning have also been improved for a better overall user experience.
  • This version includes support for Windows 8 touch events which makes it compatible with Windows Surface. We've also improved our support for Android devices (please note that there is a bug in the current Android browser that causes it to crash under heavy load such as can be experienced on tablets. We recommend that users use Android Chrome which does not crash and has much better performance).
  • This version uses a different image nomenclature for the icons. In this package you should find several icons that begin with "stx". The icons are the same as the previous versions but this new naming system is less likely to conflict with other naming conventions.

New features include:

  • A label "currentHR" which shows the current price on the y-axis in red or green.
  • Colored bar charts (red if the stock is down, green if it is up)
  • Crosshair offset can be set programmatically and the default has changed on touch devices to be a little easier for users to see
  • Magnet mode allows drawing tools to snap to points on the chart
  • CIQ.ChartEngine.Chart#symbolDisplay allows programmatic change of the display label on the charting panel
  • Sharp display on iPad retina displays

New tools

  • CIQ.Plotter – High performance drawing on the canvas
  • CIQ.Plotter.dashedLineTo - Dashed line drawing support
  • CIQ.textLabel – Convenience tool for drawing a text label on the canvas