Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Plug-ins
Compact Chart
Troubleshooting
Glossary
Reference
JSFiddles

Getting Started on Android — Legacy

For ChartIQ versions 7.0.5–7.5.0

In this tutorial you will learn how to integrate the ChartIQ mobile SDK into your native Android app and instantiate and interact with a ChartIQ chart.

Contents:

Overview

The ChartIQ mobile SDK provides a native interface for Android developers to instantiate and interact with a ChartIQ chart. The interface will create a WebView and populate it with a predefined HTML file that loads the ChartIQ JavaScript library, supporting CSS, and a JavaScript bridge file which interfaces with the native interface.

What occurs in the WebView is hidden, automatic, and not dependent on developer configuration. You should be able to instantiate the object as you would any other native component and essentially feel like you are working with a native component.

Helper files and templates

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.

Android ProGuard rules

You should be careful not to use proguard rules that may modify the library code in ways not intended. That will cause it to malfunction.

If when enabling proguard rules your application stops working, disable them and review this article to create an optimal configuration for your needs: Shrink, obfuscate, and optimize your app.

Important

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

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

Requirements

See the ChartIQ Android SDK Legacy README.

Download and import the ChartIQ mobile SDK

There are two ways of integrating the ChartIQ mobile SDK into your app. Please choose one integration method to avoid build issues.

GitHub

  1. Download the Android legacy sample app from GitHub.

  2. Load the project in Android Studio.

  3. The ChartIQ Java mobile SDK (chartiq-release) is already included and configured to the sample application.

  4. Obtain a copy of the ChartIQ HTML5 charting Library and install it on a web server. (Your application will load this dynamically when the app starts.)

  5. Copy sample-template-native-sdk.html from the mobile directory into the root directory of the library package.

  6. Set string chartUrl = "your-server-url-location/sample-template-native-sdk.html" in MainActivity.java.

  7. Run the application.

.aar import

  1. Download the legacy ChartIQ sample app from GitHub.

  2. Copy the chartiq-release.aar from the chartiq-release directory.

  3. Import ChartIQ.aar via File --> New --> New Module --> Import JAR/AAR Package.

  4. Open Project Structure, select your application's module, and create a dependency to the newly imported ChartIQ mobile SDK module.

  5. Open your main module's .gradle file and add three (3) additional dependencies:

    dependencies {
	implementation 'com.android.support:appcompat-v7:27.1.1'
	implementation 'com.android.support:recyclerview-v7:25.1.1'
	implementation 'com.google.code.gson:gson:2.8.0'
}

  6. Import the ChartIQ library into your main activity.

    import com.chartiq.sdk.ChartIQ;

  7. Obtain a copy of the ChartIQ HTML5 charting Library and install it on a web server. (Your application will load this dynamically when the app starts.)

  8. Set string chartUrl = "your-server-url-location/sample-template-native-sdk.html" in MainActivity.java.

  9. Build and run your app. If there are no build issues, you've successfully integrated the ChartIQ mobile SDK into your project. Now, let's initialize the ChartIQ mobile SDK and create our first chart.

Initialize the ChartIQ mobile SDK

  1. Add a ChartIQ view into your main activity's XML layout. This view will display the ChartIQ chart.

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.chartiq.sdk.ChartIQ
        android:id="@+id/chartiq"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true" />

</RelativeLayout>

  2. In your activity's onCreate() method:

    • Create a ChartIQ object and attach it to the ChartIQ view.
    • Make sure the chartUrl string is set to the path where your ChartIQ HTML5 library is deployed.
    • Initialize the ChartIQ mobile SDK, the ChartIQ library path and a success callback.
    • Initialize the data loading methods using setDataMethod() and setDataSource().
    • Add code to let the chart know how to load your data (see loadChartData).

    This is an example on how to do that using the ChartIQ simulator data-server.

    You should replace the code in the ViewController with your own implementation.

    import com.chartiq.sdk.ChartIQ;
import com.chartiq.sdk.model.OHLCChart;
import com.google.gson.Gson;

import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;
import java.util.TimeZone;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

      	// !!!!! adjust `deploypath` as needed to match the path
        // to get to sample-template-native-sdk.html
        String chartUrl = "https://deploypath/template-native-sdk.html";

        // attach ChartIQ object to the view
        final ChartIQ chartIQview = (ChartIQ) findViewById(R.id.chartiq);

        // set up your quote feed
        chartIQview.setDataSource(new ChartIQ.DataSource() {
            @Override
            public void pullInitialData(Map<String, Object> params, ChartIQ.DataSourceCallback callback) {
                // put code for initial data load from your feed here
                loadChartData(params, callback);
            }

            @Override
            public void pullUpdateData(Map<String, Object> params, ChartIQ.DataSourceCallback callback) {
                // put code for data updates from your feed here
                loadChartData(params, callback);

            }

            @Override
            public void pullPaginationData(Map<String, Object> params, ChartIQ.DataSourceCallback callback) {
                // put code for pagination loads from your feed here
                loadChartData(params, callback);

            }
        });

        // init the rest of the ChartIQ mobile SDK and library path
        chartIQview.start(ChartIQLibraryPath, new ChartIQ.CallbackStart() {
            @Override
            public void onStart() {
                // set 'PULL' data loading method
                chartIQview.setDataMethod(ChartIQ.DataMethod.PULL);
                // set the symbol for the chart
                chartIQview.setSymbol("APPL");
            }
        });

    }

  // Sample code for loading data form your feed.
  private void loadChartData(Map<String, Object> params, final ChartIQ.DataSourceCallback callback) {
        if(!params.containsKey("start") || params.get("start") == null || "".equals(params.get("start"))) {
            params.put("start", "2016-12-16T16:00:00.000Z");
        }

        if(params.containsKey("end") || "".equals(params.get("start"))) {
            TimeZone tz = TimeZone.getTimeZone("UTC");
            DateFormat df = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm'Z'");
            df.setTimeZone(tz);
            String endDate = df.format(new Date());
            params.put("end", endDate);
        }

        boolean isMinute = params.containsKey("interval") && TextUtils.isDigitsOnly(String.valueOf(params.get("interval")));
        params.put("interval", isMinute ? "minute" : params.get("interval"));
        params.put("period", isMinute ? 1 : params.get("period"));

        StringBuilder builder = new StringBuilder();
        builder.append("https://simulator.chartiq.com/datafeed?");
        builder.append("identifier=" + params.get("symbol"));
        builder.append("&startdate=" + params.get("start"));
        if (params.containsKey("end")) {
            builder.append("&enddate=" + params.get("end"));
        }
        builder.append("&interval=" + params.get("interval"));
        builder.append("&period=" + params.get("period"));
        builder.append("&seed=1001");

        final String url = builder.toString();
        new AsyncTask<Void, Void, String>() {
            @Override
            protected String doInBackground(Void... params) {
                String body = "";
                try {
                    URL connectionUrl = new URL(url);
                    HttpURLConnection connection = (HttpURLConnection) connectionUrl.openConnection();
                    connection.setRequestMethod("GET");
                    connection.setRequestProperty("Content-Type", "application/json");
                    connection.connect();
                    int code = connection.getResponseCode();

                    InputStream is;
                    StringBuilder builder;
                    if (code >= 200 && code < 400) {
                        builder = new StringBuilder();
                        is = connection.getInputStream();
                    } else {
                        is = connection.getErrorStream();
                        builder = new StringBuilder("Error("+code+"): ");
                    }
                    if (is != null) {
                        BufferedReader reader = new BufferedReader(new InputStreamReader(is));
                        String line;
                        while ((line = reader.readLine()) != null) {
                            builder.append(line);
                        }
                        body = builder.toString();
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }
                return body;
            }

            @Override
            protected void onPostExecute(String body) {
                if(!body.startsWith("Error") && !"invalid symbol".equals(body)){
                    OHLCChart[] data = new Gson().fromJson(body, OHLCChart[].class);
                    callback.execute(data);
                }
            }
        }.execute((Void[]) null);
    }
}

  3. Build and run your app. You should see a ChartIQ view loaded and populated with a chart.

Next steps

See the following: