Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Trading
Time Span Events
Term structures
ScriptIQ
Troubleshooting
Glossary
Reference
JSFiddles

Getting Started on Mobile

The ChartIQ mobile SDK provides a native interface for iOS and Android developers to instantiate and interact with a ChartIQ chart. In order to use this mobile SDK you will need a copy of the Charting Library. Please contact info@cosaic.io to obtain an evaluation or permanent license.

See also the WebViews and HTML5 Containers tutorial for information on building hybrid mobile applications using the charting Library.

Installation

The mobile folder in the package contains sample-template-native-sdk.html, a sample template to be used with the iOS and Android GitHub sample projects. The template is a simple HTML application that can be put into a mobile WebView to interface with ChartIQ's JavaScript bridge library, nativeSdkBridge.js (in the mobile/js folder).

To use sample-template-native-sdk.html, move or copy it to the root folder of your library.

In the template script, set the value of the displayDataDisclaimer variable to true if the app uses simulated data; to false, if the app uses production data.

Note: If you are using version 8.1 or later of the ChartIQ library and want to use mobile files from a local file system, you will need to bundle the library using webpack or another module bundler. We include a webpack build specifically for the mobile project in your ChartIQ library package. The steps to create your own bundle are as follows:

  1. Make any necessary changes to chartiq/webpack-example/webpack.config.mobile.js and chartiq/webpack-example/src/sample-template-native-sdk-webpack.js.
  2. Execute npm run build:mobile in the directory that has the package.json file that came with your package.
  3. If everything is correct, a new folder named dist will be created with your bundled library.
  4. By default, the template file will be dist/index.html; change the file name if needed.
  5. Take the dist folder and import it locally into your mobile project. Follow the necessary steps to access index.html.

Important

Although the mobile SDK and the JavaScript library may at times use the same function names and signatures, they are not the same, and they are not interchangeable.

  • When using the mobile API, follow the documentation in the Mobile SDK
  • When directly calling the JavaScript API, follow the documentation in the JavaScript CIQ core library

See Extending the bridge below.

Helper files and templates

ChartIQ version 7.0–7.5

The following files are included in the library package to help you get started:

  • mobile/js/nativeSdkBridge.js — Encapsulates simple functions to our library so any non-native JavaScript language can easily use it, without cluttering your code with string-based queries.
  • mobile/js/nativeSdkAccessibility.js — Provides an add-on for nativeSdkBridge.js that helps hook into the voice accessibility mode in both Android and iOS and allows for custom announcements of quotes.
  • mobile/sample-template-native-sdk.html — Provides a simple HTML application that can be put into a mobile WebView to interface with our JavaScript bridge library, nativeSdkBridge.js. Includes a custom quote feed that can be used by a non-native JavaScript interface. Note: To use the template, copy it to the root directory of your library.

ChartIQ version 8.1 and later

In addition to the above files, the following are included in the library package to allow a webpack build to be used:

  • webpack-example/webpack.config.mobile — A configured webpack config that will build a transpiled version of the mobile project. If you are loading files locally, you will want to use this build, as ES6 module imports will be blocked by CORS policy.
  • webpack-example/src/sample-template-native-sdk-webpack.js — A webpack entry point for the mobile project. It contains all the necessary module imports, JavaScript, and tree shaking configuration. To learn more about tree shaking, please see the "Architecture" section of the 7.5.0 to 8.0.0 upgrade notes.
  • mobile/partials/sample-template-native-sdk-context.html — The HTML partial that webpack uses to generate the application. Modify this file if you want to change any DOM element on the chart.
  • mobile/css/ciq-mobile.css — All the stylesheet entries that the mobile project uses. Modify this file if you want to overwrite any current class values on the chart and its components.

How to deploy the mobile project

Mobile-specific library settings

Crosshairs offset

By default, the crosshairs location is slightly offset so the user can see where the crosshairs are located (instead of rendering the crosshairs right under the user's finger). This is especially important on small devices where the user's finger covers a large area.

You can adjust the crosshairs offsets by modifying the following properties:

Device identification

The following flags are available to identify devices:

Extending the bridge

The mobile SDK is essentially a layer on top of the core library. The nativeSdkBridge.js file contains a large number of wrapper functions that adapt functions from the core library. For example, here's the mobile SDK wrapper for the CIQ.ChartEngine#addSeries function:

function addSeries(symbol, hexColor, isComparison) {
    var parameters = {
        color: hexColor,
        isComparison: isComparison
    };
    // Call the core API function.
    stxx.addSeries(symbol, parameters);
}

You can similarly extend nativeSdkBridge.js with your own wrapper functions of the core library API to provide capabilities not already in the bridge.

Next steps

See the following: