Open source HTML5 visualisation library to draw charts on the web (morris.js)

At work(ongoing,full-time contract) we use the Google Visualizaton library for our various data visualisation needs. So naturally when I was building this tool to streamline the process of Post Traumatic Amnesia(PTA) assessment, my first thought was to use Google Visualization library for the tool's data visualisation needs. However that was only till I realised that the tool needs to work offline. Google Visualisation is a very good library but it only works when the the web app is online, so after some looking around I found a tool that works offline too i.e. morris.js. It uses the fantastic Raphael.js library to render beautiful SVG based charts, on the web.

Problem

The objective is to visualise data in a web application, so it can be easily interpreted without having to go through raw numbers. The web application needs to be demoed on....say a laptop and the places where it could potentially be demoed may not have internet connectivity. It could also be in a place where the mobile phone network may be non-existent or poor, hence you cannot tether either. All in all, the solution needs to work offline. Let me put that into context, so my objective with my Post Traumatic Amnesia assessment app was to have it used across all the medical facilities in NSW, Australia, that may have brain injury patients. In NSW, there is this government body called the Agency of Clinical Innovation which promotes innovations in the health industry. You can read more about what they do in the about page of their website. Anyway somehow I managed to get a 30 mins meeting with one of its directors and another very important person who oversees brain injury rehabilitation across NSW. All in all I had 30 mins to demo the app in their office which was on floor X of their office building. Now I had no idea if I would have internet connectivity there of any sort? I may or may not have cell phone reception, so tethering was also doubtful. Therefore I assumed the worst and in order to make sure I can highlight the data visualisation features of the app, I incorporated a visualisation solution that would work offline.

Solution

For the sake of this blog post, I will just focus on drawing a bar chart. Now morris.js is an neat little tool for data visualisation and let's jump straight into a solution without wasting too much time. Firstly let us create some mock data.

function getMockData(){
    var d = {a:10,b:15, y:"2010"}, d1 = {a:9,b:13, y:"2011"};
    var d2 = {a:13,b:17, y:"2009"}, d3 = {a:16,b:15, y:"2008"};
    var subData1 = [d,d1, d2, d3]; subData1.title ="iOS market";
    var s = {a:12,b:12, y:"2008"}, s1 = {a:11,b:15, y:"2009"};
    var s2 = {a:16,b:15, y:"2010"}, s3 = {a:17,b:15, y:"2011"};
    var subData2 = [s,s1, s2, s3];
    subData2.title ="Android market"
    var chartData = [subData1,subData2];
    return chartData;
}

Now we have 2 sets of mock data, one shows the market penetration of Android and iOS, both in terms of software and devices. So now we will draw two separate bar charts for both Android and iOS and each of them will show a bar each for device and software.

function createCharts() {
    var chartData = getMockData();
    var noOfCharts = chartData.length;

    var divChartId = "chart";
    for(var i= 0; i < noOfCharts; i++){
        var data = chartData[i];
        var container = document.createElement("div");
        var containerId = "graphContainer_"+i;
        container.id = containerId;
        container.className+="graph-container";
        document.getElementById("page-wrapper").appendChild(container);

        var header = document.createElement("div");
        header.id ="header_"+i;

        header.innerHTML = "<div class='caption'><h4>"+data.title+"</h4></div>"
        document.getElementById(containerId).appendChild(header);

        var div = document.createElement("div");
        div.id = divChartId +"_"+i; //assign the div a unique id
        div.setAttribute("style","width:900px; height:500px;");
        //add the div to the chart container
        document.getElementById(containerId).appendChild(div);
        var barGraphRows = [];

        for(var j=0; j < data.length; j++) {
            var response = data[j];
           //morris bar chart expects an object with y, a and b properties.
            var row = {
                y: response.y,
                a: response.a,
                b: response.a
            };
            barGraphRows.push(row);
        }  
        Morris.Bar({
            element: div.id,
            data:barGraphRows,
            xkey: 'y',
            ykeys: ['a', 'b'],
            labels: ['Software', 'Devices'],
        });
    }
}

The PTA app mentioned in this post is an open-source project and you can fork it or clone the repository from Github, here, whether you want to see what the Post Traumatic Amnesia app is all about or how morris.js has been used in it. Alternatively, there is a website for the app and there is a youtube video of how the app works.