Integration with other applications

ChartIQ can be integrated into native mobile applications such as iOS, Android, Java and Windows. This is accomplished by loading the application in a WebView. Each operating system has its own WebView capability but they all essentially work the same way. A WebView can access either a webpage on a remote server, or a web file that is bundled with the application. Such applications that combine HTML5 and Native Code are referrer to a "hybrid apps".

You'll need to decide whether to use native controls for your UI or whether to build your UI in the WebView. Either approach is fine. stx-phone.html can be used right away with a full screen WebView, with UI built into the web page. Or you can start with stx-quickstart to display just the chart component, laying out your WebView amongst other native controls.

To adjust screen size to match the different device models, simply use standard logic to set the width and height. Generally when you resize a WebView, the web page that is contained will receive a screen resize event.window.innerHeight and window.innerWidth can be used to determine the size of the screen. Remember that the size will change when the orientation of the device changes, so be sure to catch resize events on the window. stx-phone.html contains sample code for resizing the screen.

Framework7 is an excellent html5 based mobile toolkit that will allow you to build any kind of mobile app. We highly recommend it.

Reminder: Trial versions of the library are mobile ready and will run on any mobile OS. However, when implementing a production app, please be sure to request a mobile version of the permanent library. Mobile versions ONLY run on a particular OS, so please be sure to request a different package for each mobile OS you intend to support (IOS or Android). Additionally, you will not be able to run the mobile OS kernel on a desktop, even if using a webView; so all development must be done on a standard package if developing from a desktop, and just replace the kernel before the final app packaging. If developing using a webView from the desktop, you will also need an OS locked kernel for your desktop operating system since a domain locked kernel will not run in webView.

For building Android applications we strongly recommend using Intel crosswalk SDK. Crosswalk automatically bundles the latest Chromium build which improves performance on Android devices prior to version 4.4.

iOS WebView does not automatically follow relative paths. You'll need to ensure your files are located where they can be found

There are two ways to do this:

  • Set the "Create folder references for any added folders" option to true
  • Move all js and css files into the root directory (and change references in stx-phone.html)

To deal with kernel expiration on mobile apps, we suggest hosting stxKernelOs.js on a web server instead of packaging it with the app. When the app loads, it will take the kernel file from the remote location and cache it until the next time the users restarts the app. This way the kernel file can be replaced at any time, preventing it from ever expiring. This approach will of course lock the user to a specific version of the library, requiring them to download a new package to use any upgrades.

A more flexible approach would be to have all library assets loaded on-line so that you never needing to push upgrades to mobile users!

To accomplish the above, make sure you adjust your <script src="library asset here"></script> tags accordingly.

Sample Projects

Each project has a readme which should provide all the information necessary for a developer to get started. The mobile project links to a demo library running on the chartIQ servers so it works out of the box. The Angular and React projects each require to explicitly include your chartIQ library to work.

Java integration documentation

ChartIQ HTML5 Charts For Java

Mobile documentation


Crosswalk SDK

WebView Documentation

iOS WebView

Microsoft WebView

DotNet Browser

Java FX WebView


Webview memory monitoring

From time to time it is necessary to monitor memory usage on a mobile Integration.

Using the Chrome debugging tool, you can capture a heap snapshot and use the "Record Heap Allocations" tool for further analysis.

You'll need to use Chrome Remote Debugging:

And then you can use these tools under "Profiles". Use "Record Heap Allocations" to capture memory use over time.