Common mistakes

Include files

A common mistake when customizing sample code and libraries is to alter the include order or totally omit necessary include files.

Your main html page must have all of these include instruction is this exact order:

<script src="js/stxThirdParty.js"></script>
<script src="js/stxTimeZoneData.js"></script>
<script src="js/stx.js"></script>
<script src="js/stxKernelOs.js"></script>
<script src="js/stxLibrary.js"></script> 
<script src="js/stxAdvanced.js"></script>                    <!-- only needed if licensing the advanced module -->
<script src="js/stxSymLookup_Xignite_Svc.js"></script>        <!-- only needed if licensing the Xignte search engine -->

Calling newChart

The newChart function has some optional parameters and some mandatory. Some are dependent of each other and must be present if its corresponding parameter is included. One of such dependencies is the symbol with the dataSet. Although you can call newChart without a symbol when no dataSet is included; a symbol is absolutely required if a dataSet is sent in. Otherwise the chart will not know how to deal with important information such as market holidays and other symbol dependent information.

If the charting engine has not been configured to use a QuoteFeed, the following are invalid calls:

stxx.newChart("SPY");

stxx.newChart(null, yourDataSetHere);

This a valid call:

stxx.newChart("SPY", yourDataSetHere);

If the charting engine has been configured to use a QuoteFeed, then masterData does not need to be passed in. In this case, the following are valid calls:

stxx.newChart("SPY");

stxx.newChart(); //a blank chart will be 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=(STX.pageWidth()-2) + "px";
   },0);
}

Periodicity and Quote feed -- make sure they are in sync!

Please be aware that The kernel by default derives weekly and monthly charts from daily data and is not expecting the data in the masterData array to only have weekly or monthly ticks. Set the 'dontRoll' flag to 'true' in function STXChart(config) - found in stx.js - to bypass this functionality if you have raw week and month data in the masterData.

You must always make sure that all of your raw data is in the same interval. Do not mix intervals in the masterData array or the roll-up and rendering functionality will behave unpredictably

See the Periodicity section of the Data loading tutorial for more details.

Microsoft touch events are not responding

You must 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' The crosshair, zoom, etc are all absolutely positioned so they will slip up to the body if the container isn't relative.

Losing onClick events when rebuilding menus using STX.MenuManager

The library menu manager ( STX.MenuManager ) initializes events (onClick, etc) upon initial page rendering only. This is done in the function runSampleUI() with the following commands:

    // Set up menu manager
    STX.MenuManager.makeMenus();
    STX.MenuManager.registerChart(stxx);

If your code destroys a menu and recreates it, the events for the recreated containers will be lost and you will have to manually re-attach the events.

Alternatively, if you need different items to be dynamically added or deleted from a drop down or other menu element, we suggest the use of a display property to turn it on or off (style="display:none", for example, to turn something off). Your initial HTML rendering will of course need to include all of the available options.

You can always write your own menus and attach the events directly, but then you have to manage the relationship between the different drop downs and the canvas; which is all automatically done by STX.MenuManager