Troubleshooting

My code after newChart() won't run

CIQ.ChartEngine#newChart is asynchronous. Use the callback returned from newChart to run code after a chart has loaded.

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:

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.