iOS App Development Template for Data Visualization

ios app development template logo

Integrate the LightningChart JS library into your project with the iOS app development template for data visualization.

The iOS app development template will boost your project development when making mobile applications for the Apple hardware environment.

Additionally, LightningChart has launched 10+ data visualization templates that’ll help you implement LightningChart JS charting library into your different desktop, mobile, and web applications development.

Getting Started with the iOS App Development Template

Please, open the project with XCode and run it on an emulator or using a real iOS device. Apple provides more information on iOS development if needed.

The chart runs within a WKWebView.

In order to display the data, these will be sent from a native swift code to the WKWebView. Find the charts source code from /iOS/assets. 

index.html is the page that is running inside the WKWebView and contains the JavaScript code for configuring the chart. 

lcjs.iife.js is the IIFE packaged version of LightningChart JS that can be found inside the NPM package.

Note: in order for the chart to work, the JavaScript has to be enabled by default on the iOS device on the WebView.

Sending data to LightningChart JS

The evaluateJavaScript method is used to send data from the native Swift code. See below.

chart.evaluateJavaScript("setData(\(self.yData), \((self.xData)));") { (any, error) in

if((error) != nil){ print("Error : \(String(describing: error))")}

}

The setData is a JavaScript method that has been defined inside the WKWebView. The evaluateJavascript method will call that method to set data in the chart. The contents of yData and xData are provided as the arguments to the setData method.

function setData(ySet, xSet){

if(ySet.length && xSet.length){

const chartData = xSet.map( ( itr1, itr2 ) => ( { x: itr1, y: ySet[itr2] } ) )

lineSeries.add(chartData)

}

}

This iOS app development template is part of a series of data visualization templates that can be downloaded directly from GitHub. You can also check the rest of the ready-made data visualization templates available for Android, iOS, Xamarin, React, UNO Platform, and more!

Happy coding!