Troubleshooting

My library stopped working. The charts don't display any more

All libraries are time locked to match your contract renewal date. If your library stopped working, and you have not made any changes, it probably expired. You can check the expiration date by opening the js/chartiq.js file and reviewing the first few lines.

Sample header:

/*
x.x.x
Generation date: yyyy-dd-mmThh:mm:ss.mmmZ
Expiration date: yyy-mm-dd
Domain lock: 127.0.0.1;localhost;*.sample.com;*.sample2.com
License type: annual
Full Bundle
*/

Additionally, the license may also be domain locked. As such it will only work if running from the registered domains as listed on the chartiq.js file.

My code after loadChart() won't run

Remember CIQ.ChartEngine#loadChart is asynchronous. So always use the corresponding callback to run code after a chart has loaded. Otherwise, it may run too early or out of sequence; making it look as if it didn’t run at all.

Chart is slowly resizing when it is in an iframe

This generally happens on ios devices which treat frame width differently than other browsers. You probably have an element on your page that is extending beyond the right edge of the iframe. This could be an invisible element or it could be a border, padding or margin on an element.

What happens is that this element causes the iframe width to expand (not on most browsers, but on ios). This in turn causes a resize event. If the chart is resized to the new iframe width then it will push your element further to the right which will cause it to happen over again.

To fix this issue, first make sure no elements are extending off the edge of the screen (either check every piece or use overflow:hidden). Next, resize your chart container to 2 pixels less than the actual width of the screen.

Finally, the reverse can happen when changing orientation from landscape to portrait. The workaround here is on a resize even to first reduce the size of the container to something small (say 10 pixels). Then, in a setTimeout(fc,0) resize the chart to the actual width in the fc function. This allows the ipad to complete the frame size change before you draw, and accidentally increase the width:

function resizeFunction() {
	chartContainer.style.width = "10px";
	setTimeout(function() {
		chartContainer.style.width = CIQ.pageWidth() - 2 + "px";
	}, 0);
}

Microsoft touch events are not responding

You may have removed the following line from the css file:

html,
body {
	-ms-touch-action: none; /* This is necessary to allow the chart to grab windows touch events */
}

Crosshairs displaying outside the chart container

The chart container div must be styled with position: relative or position: absolute. The chart's embedded elements (crosshair, zoom, etc) are all absolutely positioned within the container. If the container itself is not absolutely or relatively positioned, they will slip up to the body.

Error: "No locale data has been provided for this object yet"

The Intl.js polyfill is failing because it cannot locate locale data on your webserver. This polyfill is only used by older Safari and Safari mobile browsers. See Localization Tutorial for information on configuring the Intl.js polyfill.

I am getting a strange webpack warning for a 'Critical dependency'

WARNING in ../chartiq/dist/lib/chartiq.js
23:11942-12025 Critical dependency: the request of a dependency is an expression

You can safely ignore this. Our chart sharing code relies on html2canvas. This is a heavy library and so if it's not already defined, the code will attempt to dynamically load it. The obfuscation is turning this into an expression.

For example:

require([(c9+w7+I+r8+A9+X)]

vs.

require(["html2canvas"]

Typescript can't compile because it can't find 'chartiq'

If Typescript is not able to figure out where you have put the library it may have trouble compiling. Make sure that you have told your tsconfig file where to look for the charting library by setting up the path to the library. Below is an example of what your tsconfig.json should look like:

{
	"baseUrl": ".",
	"paths": {
		"chartiq": ["src/chartiq_library/js/chartiq"]
	}
}

For more help refer to the official Typescript documentation on resolving modules.

There are scrollbars on the chart window

The charting window by default has been configured to prevent scrollbars from appearing in most screen sizes.

If after integrating the library into your display window you notice scroll bars displaying even though the screen appears large enough to render the chart, the issue is probably caused by an improperly sized body overlay. This is an invisible DIV that the chart uses whenever a menu is shown. It sits just underneath the menu, so that when a user clicks on a drop down item outside of the top menu frame, it registers the click.

.stxBodyOverlay is the class in stx-standard.css. It should be overflow:hidden and width:99% to avoid scrollbars.

Here is the complete class as it should appear on your implementation:

.stxBodyOverlay,
.stxDialogOverlay {
	position: absolute;
	width: 99%; /* prevent scollbars */
	height: 100%;
	top: 0px;
	overflow: hidden;
	display: none;
	background: rgba(
		255,
		255,
		255,
		0
	); /* fully transparent. If this is left out then IE9 won't detect clicks on the overlay */
}

Next Steps: