Getting Started on Mobile: iOS

This page will discuss how to integrate the ChartIQ SDK into your native iOS app and how to instantiate and interact with a ChartIQ chart.

Contents:

  1. Overview

  2. Download and Import the ChartIQ SDK

  3. Create a ChartIQ View

  4. Initialize the ChartIQ SDK


1. Overview

The ChartIQ SDK provides a native interface for iOS developers to instantiate and interact with a ChartIQ chart. The interface will create a WKWebView 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 will be hidden, automatic, and not dependent on developer configuration. The developer should be able to instantiate the object as they would any other native component and essentially “feel” like they are working with a native component.

Return to the top

2. Download and Import the ChartIQ SDK

  1. If you have a fresh checkout of the iOS sample application the latest ChartIQ pod is included and you can deploy right away. If not follow the steps below to download the ChartIQ pod.

  2. Create a Podfile in your project directory. If one already exists skip to the next step.

     $ pod init
  3. Add the ChartIQ dependency into your Podfile.

     target 'YourAppTarget' do
         pod 'ChartIQ'
     end
  4. Install the new pod.

     $ pod init
  5. If successful, you should see an output like this:

     $ pod install
     Analyzing dependencies
     Downloading dependencies
     Using ChartIQ (1.0.0)
     Generating Pods project
     Integrating client project
     Sending stats
     Pod installation complete! There is 1 dependency from the Podfile and 1 total pod installed

You've now successfully integrated the ChartIQ SDK. Now, let's create a ChartIQ view in the app.

Return to the top


3. Create a ChartIQ View

  1. Import the ChartIQ library into your app's ViewController.

     import ChartIQ
  2. Create a ChartIQ view in your app's ViewController. Open Main.storyboard and add a UIView to your ViewController. Adjust the dimensions of the UIView as desired.

  3. Open the Editor Assistant so that your Storyboard and ViewController source file are both visible on the same screen.

  4. Control-drag from your newly added view to your ViewController file.

  5. Name this new association 'chartIQView' of type 'ChartIQView'.

  6. Now, in your ViewController, let's add code to preload the ChartIQ chart with simulator data.

import UIKit
import ChartIQ

class ViewController: UIViewController {

    // MARK: - Properties

    @IBOutlet weak var chartIQView: ChartIQView!

    // MARK: - View Life Cycle

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        chartIQView.delegate = self
        chartIQView.dataSource = self
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

   // MARK: - Data

    func loadChartData(by params: ChartIQQuoteFeedParams, completionHandler: @escaping ([ChartIQData]) -> Void) {
        let urlString = "https://simulator.chartiq.com/datafeed?identifier=\(params.symbol)" +
            "&startdate=\(params.startDate)" +
            "\(params.endDate.isEmpty ? "" : "&enddate=\(params.endDate)")" +
            "&interval=\(params.interval)" +
        "&period=\(params.period)&seed=1001"
        guard let url = URL(string: urlString) else { return }
        let task = URLSession.shared.dataTask(with: url) { data, response, error in
            guard error == nil else { return }
            guard let data = data else { return }
            let dateFormatter = DateFormatter()
            dateFormatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ss.sssZ"
            var chartData = [ChartIQData]();
            let json = try! JSONSerialization.jsonObject(with: data, options: [])
            guard let result = json as? [[String: Any]] else { return }
            result.forEach({ (item) in
                let close = item["Close"] as? Double ?? 0
                let dt = item["DT"] as? String ?? ""
                let date = dateFormatter.date(from: dt)!
                let high = item["High"] as? Double ?? 0
                let low = item["Low"] as? Double ?? 0
                let open = item["Open"] as? Double ?? 0
                let volume = item["Volume"] as? Int ?? 0
                let _data = ChartIQData(date: date, open: open, high: high, low: low, close: close, volume: Double(volume), adj_close: close)
                chartData.append(_data)
            })
            completionHandler(chartData)
        }
        task.resume()
    }
}

// MARK: - ChartIQDelegate

extension ViewController: ChartIQDelegate {

    func chartIQViewDidFinishLoading(_ chartIQView: ChartIQView) {
        chartIQView.setDataMethod(.pull)
        chartIQView.setSymbol("APPL")
    }

}

// MARK: - ChartIQDataSource

extension ViewController: ChartIQDataSource {

    public func pullInitialData(by params: ChartIQQuoteFeedParams, completionHandler: @escaping ([ChartIQData]) -> Void) {
        loadChartData(by: params, completionHandler: completionHandler)
    }

    public func pullUpdateData(by params: ChartIQQuoteFeedParams, completionHandler: @escaping ([ChartIQData]) -> Void) {
        loadChartData(by: params, completionHandler: completionHandler)
    }

    public func pullPaginationData(by params: ChartIQQuoteFeedParams, completionHandler: @escaping ([ChartIQData]) -> Void) {
        loadChartData(by: params, completionHandler: completionHandler)
    }
}

Now we're ready to initialize the ChartIQ SDK, connect it to the ChartIQ View.

Return to the top


4. Initialize the ChartIQ SDK

  1. Initialize the SDK in your didFinishLaunchingWithOptions() method. Make sure the chartUrl String is set to the path where your ChartIQ HTML5 library is deployed.

     ```swift
     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    
         // !!!!! adjust `deploypath` as needed match to match the path
         // to get to sample-template-native-sdk.html
         let chartUrl = "http://deploypath/template-native-sdk.html"
     return true
     }
     ```

    Loading “sample-template-native-sdk.html” as a local resource By default, this app is configured to load the sample html template and corresponding library files remotely via http.

    If instead you will load the library files as local resources, it is important to note that iOS WebViews do not automatically follow relative paths. You'll need to ensure that your files can be found by iOS.

    For more information about relative paths in iOS apps, see this tutorial. Or search for 'Add files and folders to a project' in the Apple xcode help site

    You may want to modify the paths on the default html template to resemble something like this:

    <script src="chartiq.js"></script>
    <script src="quoteFeedSimulator.js"></script>
    <script src="hammer.js"></script>
    <script src="object-observe.js"></script>
    <script src="webcomponents-lite.min.js"></script>
    <script src='jquery.min.js'></script>
    <script src='perfect-scrollbar.jquery.js'></script>
    <script src="componentUI.js"></script>
    <script src="nativeSdkAccessibility.js"></script>
    <script src="nativeSdkBridge.js"></script>
    <script src="components.js"></script>

    Note the 'js/' portion of the paths have been removed.

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

Return to the top


Next Steps: