Visualising data in a native iOS app using a Html5 charting library

This is something that I had been meaning to add to Html5StarterAppWithSwift for a long time and I was finally able to achieve that a couple of weeks ago.

Background

One of my past jobs involved me working on a web app that did all sorts of data visualisation i.e. drawing charts using Javascript charting libraries. Consequently, I have also applied my data visualisation knowledge to one of my personal projects i.e. PTAapp which should give an indication of how data visualisation fits into my background.

Now let's talk about some of the tech that I used to build charts. In my past job we used Google Charts to draw charts, which at the time at least required an internet connection to work. As I talk about in my previous post I used morris.js to avoid the issue of internet connectivity.

Now that I am involved in making iOS apps and given my background it seemed natural for me to apply my charting knowledge to making iOS apps...and that is the story behind this post.

Visualising data in a native iOS app

The sort of native iOS app that I am talking about here is what Html5StarerAppWithSwift is a starting point for. To know more about the repo, you can either have a look at it's README or read this blog post. It's essentially an Xcode project template for building a native iOS app with Html5 powered UI i.e. the UI is built using Html,CSS and Javascript. 

Ever since I updated the project to the Swift 2 syntax(in Sept 2015), I had been thinking of adding a data visualisation example to it, but being busy updating my recently released iOS app My Day Todos, meant that I only just got around to it a week ago.

So what's the charting solution? 

My aim here was simply to show how and what can be done. So have a look at the screenshot on the right. 

Here we are drawing a chart that shows the muesli bar consumption on weekdays.

Solution details

In this section, I will try to delve into the different aspects of this solution.

Chartist.js why not morris.js?

Initially I thought I should use morris.js for this too, however morris.js depends on jQuery and for this repo, I have not had the need to use jQuery yet. I had to find charting solution that does not depend on jQuery and in my search I came across this excellent SitePoint article, which listed the 15 best Javascript charting libraries, through which I discovered chartist.js.

Code for the visualisation

I would recommend going through the getting started page to get a feel or know more about how chartist draws charts. What I have done in my solution is, draw a simple bar chart using the sample code on the getting started page of Chartist.js.

Remember, the goal here was to simply demonstrate via a simple example. Anyway the only thing that I have done differently is how data is fetched for the chart. For my solution, the data comes from a service called TestData which has the forCharts method.

This is the code for the service,

.factory('TestData', function() {
  var chartTestData = {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      series: [
        [4, 2, 2.5, 0.5,3]
      ]
  };
  return {
    forCharts: function() {
      return chartTestData;
    },
  }
});

For the controller,

.controller('ChartsCtrl', function($scope,TestData){
    var data = TestData.forCharts();
    var options = {
      width: 300,
      height: 200
    };
    new Chartist.Bar('.ct-chart', data, options);
})

For the template,

<ion-view title="Html5 Charts">
    <div style="margin-top:50px;margin-left:5px;" >
        <h5> Muesli bars eaten per day </h5>
        <div class="ct-chart ct-golden-section" id="chart1"></div>
    </div>
</ion-view>

As I said I have intentionally kept things quite simple in order to convey the message about Html5 based charting in a native iOS app.

Conclusion

In addition to hard-coding the data in the service, there are two other ways to fetch data for this sort of app,

1. Using $http service of AngularJS
2. The Swift backend

So if you would like to see a demonstration of any of the above 2 techniques please leave a comment or create an issue here...or better, if you think you can do that, then by all means, fork the repo and create a pull request.