On my work, technology and related stuff....

1 comment

There are many options available to display charts within your [native] iOS apps. You could write one yourself (why?) or use one of the many third party libraries that are available . Check out this GitHub repo for a list of charting libraries in swift/ ObjC.
However, if you are interested in using Highcharts within your app, then read on . Highcharts is a popular JS charting engine and you can learn more about it at http://www.highcharts.com.
 This  post will demonstrate how you can load a Highcharts based chart into a iOS native app.  We will use the example charts available as part of the Highcharts library. A more interesting and complete example that demonstrates how you can dynamically load chart data is available at https://github.com/rajagp/iOS_Highcharts_Sample.

1)   Download the sample xcode app project from http://www.priyaontech.com/wp-content/uploads/2017/01/HighchartDemo.zip.  This is a simple single view application that will load a .html file into a WKWebView.

2)   Download the Highcharts library from http://www.highcharts.com/download

3)   Once downloaded , unzip its contents and examine it. You should see contents list similar to screenshot below

4) Navigate to the “examples” folder

5) Copy the “index.htm” file from any of the examples into your project. Make sure you copy it into your project

6)  Your project should look something like this

7) In your xcode project, open and review the the index.htm file that you just copied over. It contains a JS function that creates a chart  using the Highcharts chart API as defined in http://api.highcharts.com/highcharts/chart. The chart data and options are defined statically. 

8) Now, open the “ChartViewController.swift” file and review it.  This is a simple view controller that manages a WKWebview and loads the index.html into the web view. 

 Look for  the “loadContainerPage” function . This is where the index.htm is loaded.

9) That’s it !  Run the app and you should see the sample chart load …

 The chart data and chart options were statically predefined as part of the JS function. In a real world application, you would probably want to load the chart data and options dynamically.

A complete example that demonstrates how you can dynamically load chart data is available at https://github.com/rajagp/iOS_Highcharts_Sample.

Tags: , , , , , , ,

1 comment

  1. Jay Bazile

Trackback e pingback

No trackback or pingback available for this article

Leave a Reply