It’s 2018, and the world’s now certifiably mobile-first.

Around 56% of us access the internet on smartphones. Last we checked, iTunes had over 2 million apps. And interestingly, after gaming, the most popular category is business – an area ripe for data analyses and insightful visualizations.

Whether you’re targeting individuals or organizations, whether you’re making a weather app, a stock market monitoring tool, or a powerful tool for monitoring on-floor performance, chances are you could use a chart. To stand out in the crowd, you need apps that aren’t just useful, but also beautiful – (and brownie points, if it does both expertly).

And if you’re not sold on the power of visualization in iOS, take a look at this incredible responsive visualization of all the data in Wikipedia.

FusionCharts makes interactive charting easy, customizable, and exciting – with these steps, you can build visuals that’ll fit seamlessly into your next iOS app. This tutorial showcases how you can create interactive charts for iOS applications using FusionCharts.

Requirements

Before we start the step-by-step procedure to create interactive charts in iPhone or iPad apps, make sure that you have the following components downloaded in the local machine:

  • FusionCharts XT [Download Link]
  • Xcode [Download Link]
  • Step 1: Create a Project in XCode

    Once you have Xcode installed on your system, open it and create a new xcode project with ‘Single View App’ template.

    Step 2: Create a HTML File to Show the Chart

    Navigate to project navigator sidebar in Xcode project, and create an empty html file as chart.html.

    In the HTML file, include chart instance which will render the chart in our app inside WKWebView which we will learn to create later. First, we will include the core packages in our HTML file and then create chart instance.

    Include the FusionCharts Core Package JS Files
    Given below is the code to include the FusionCharts core package JS files (fusioncharts.js and fusioncharts.charts.js) in the HTML code:

    <html>
    <head>
    <!-- including FusionCharts core package JS files →
    <script src="fusioncharts.js"></script>
    <script src="fusioncharts.widgets.js"></script>
    </head>
    </html>
    

    Note: Please copy the files downloaded to project folder. Make sure that path specified in chart.html for FusionCharts core package JS files is accessible to the application. Also include these files in Build Phases -> Copy Bundle Resources.

    Create chart instance
    Chart instance include parameters like chart type, dimensions, chart container ID, data format and data source for the chart which is used to render the chart. Given below is the code for creating the chart instance:

    <!-- chart instance -->
    <script>
    FusionCharts.ready(function() {
    var appChart = new FusionCharts({
    type: 'doughnut2d',
    width: '100%',
    height: '350',
    renderAt: 'chartContainer',
    dataFormat: 'json',
    dataSource: {
    "chart": {
    "caption": "New vs Retruning Users - 2017",
    "captionFontSize": "17",
    "captionFontBold": "0",
    "subCaption": "ACME Inc.",
    "subCaptionFontSize": "15",
    "paletteColors": "#D68554, #DC4D52",
    "bgColor": "#212831",
    "canvasBgColor": "#212831",
    "bgAlpha": "100",
    "canvasBgAlpha": "0",
    "showBorder": "0",
    "showLabels": "0",
    "showLegend": "1",
    "legendBorderAlpha": "0",
    "legendShadow": "0",
    "use3DLighting": "0",
    "showShadow": "0",
    "drawCustomLegendIcon": "1",
    "pieRadius": "100",
    "doughnutRadius": "60",
    "showPercentValues": "1",
    "legendIconSides": "2",
    "legendIconBorderThickness": "0",
    "baseFont": "Source Sans Pro",
    "defaultCenterLabel": "Total Visitors: 1.39M",
    "centerLabel": "$label Visitors: $value",
    "centerLabelBold": "0",
    "baseFontSize": "13",
    "startingAngle": "70",
    "enableSlicing": "0",
    "legendBgAlpha": "0",
    "baseFontColor": "#FFFFFF",
    "showTooltip": "0",
    "showPlotBorder": "0"
    },
    "data": [
    {
                                    "label": "Returning",
                                    "value": "862736.82"
                                },
                                {
                                    "label": "New",
                                    "value": "528774.18"
                                }
                            ]
    }
    }).render();
    });
    </script>
    

    Given below is the complete HTML code of chart.html:

    <!doctype html>
    <html>
        <head>
            <title>FusionCharts - iOS Example</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- including FusionCharts core package JS files -->
            <script src="fusioncharts.js"></script>
            <script src="fusioncharts.charts.js"></script>
            <style>
    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
                
                body { background-color: #212831; }
            </style>
            <!-- chart instance -->
            <script>
                FusionCharts.ready(function() {
                   var appChart = new FusionCharts({
                       type: 'doughnut2d',
                       width: '100%',
                       height: '350',
                       renderAt: 'chartContainer',
                       dataFormat: 'json',
                       dataSource: {
                           "chart": {
                               "caption": "New vs Retruning Users - 2017",
                               "captionFontSize": "17",
                               "captionFontBold": "0",
                               "subCaption": "ACME Inc.",
                               "subCaptionFontSize": "15",
                               "paletteColors": "#D68554, #DC4D52",
                               "bgColor": "#212831",
                               "canvasBgColor": "#212831",
                               "bgAlpha": "100",
                               "canvasBgAlpha": "0",
                               "showBorder": "0",
                               "showLabels": "0",
                               "showLegend": "1",
                               "legendBorderAlpha": "0",
                               "legendShadow": "0",
                               "use3DLighting": "0",
                               "showShadow": "0",
                               "drawCustomLegendIcon": "1",
                               "pieRadius": "100",
                               "doughnutRadius": "60",
                               "showPercentValues": "1",
                               "legendIconSides": "2",
                               "legendIconBorderThickness": "0",
                               "baseFont": "Source Sans Pro",
                               "defaultCenterLabel": "Total Visitors: 1.39M",
                               "centerLabel": "$label Visitors: $value",
                               "centerLabelBold": "0",
                               "baseFontSize": "13",
                               "startingAngle": "70",
                               "enableSlicing": "0",
                               "legendBgAlpha": "0",
                               "baseFontColor": "#FFFFFF",
                               "showTooltip": "0",
                               "showPlotBorder": "0"
                           },
                           "data": [
                                {
                                    "label": "Returning",
                                    "value": "862736.82"
                                },
                                {
                                    "label": "New",
                                    "value": "528774.18"
                                }
                            ]
                       }
                   }).render();
               });
            </script>
        </head>
        <body>
            <!-- chart container -->
            <div id="chartContainer">Chart will render here!</div>
        </body>
    </html>
    

    Step 3: Import WebKit and Create WKWebView

    Now that you have the chart instance ready, let’s move on to view the application and create webview which will render the HTML file.

    To use WebKit import it by running the following command at the top of ViewController.swift:
    import WebKit

    While creating the web view, store it as a property for later reference. Add the property of web view to ViewController class. Refer to the following command:
    var webView: WKWebView!

    Now, we will add loadView( ) before viewDidLoad(). Refer to the following command:

    override func loadView() {
    let webConfiguration = WKWebViewConfiguration()
    webView = WKWebView(frame: .zero, configuration: webConfiguration)
    webView.uiDelegate = self
    view = webView
    }
    

    Include override keyword for loadView() to load the layout from the storyboard.

    To load the chart in webView, insert the code given below to refer the HTML file (chart.html) created in the viewDidLoad() method:

    let webView = WKWebView()
    let htmlPath = Bundle.main.path(forResource: "charts", ofType: "html")
    let htmlUrl = URL(fileURLWithPath: htmlPath!, isDirectory: false)
    webView.loadFileURL(htmlUrl, allowingReadAccessTo: htmlUrl)
    view = webView
    

    Given below is the complete code for webView( ):

    import UIKit
    import WebKit
    
    class ViewController: UIViewController, WKUIDelegate {
        
    var webView: WKWebView!
        
    override func loadView() {
    let webConfiguration = WKWebViewConfiguration()
    webView = WKWebView(frame: .zero, configuration: webConfiguration)
    webView.uiDelegate = self
    view = webView
        }
    
    override func viewDidLoad() {
    super.viewDidLoad()
            
    let webView = WKWebView()
    let htmlPath = Bundle.main.path(forResource: "charts", ofType: "html")
    let htmlUrl = URL(fileURLWithPath: htmlPath!, isDirectory: false)
    webView.loadFileURL(htmlUrl, allowingReadAccessTo: htmlUrl)
    view = webView        
    }
    
    override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
    }
    
    }
    

    Step 4: Build Project and Render the Chart (Simulator)

    The final chart looks like as shown in the image below:

    If you have a developer mode apple device, you can also check out output on your device. You can download the source code from GitHub repo.

    Take your data visualization to a whole new level

    From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

    Explore FusionCharts

    Leave a comment

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    2 responses on “Create Stunning Charts In Your iOS Apps

    1. Awesome tutorial and library. I`ve been using it for a school project where I have to show a Bar Chart and a Spreadsheet like report, where it explains the data shown in the Chart.
      But I`ve been having some trouble to show the webView inside a containerView and not as the whole view.

      Could you help me with that?

    Your next great dashboard starts here

    With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards

    Explore FUSIONCHARTS