Jquery library to draw charts

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. In this post, I will talk about how to use Morris.js, a jquery library to draw charts that works offline in a web app.

Problem

The objective is to visualize 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 visualization features of the app, I incorporated a visualization solution that would work offline.

Jquery library to draw charts

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 visualization 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'],
        });
    }
}

If you find any of my posts useful and want to support me, you can buy me a coffee 🙂

https://www.buymeacoffee.com/bhumansoni

Or you can  buying or even try one of my apps on the App Store. 

https://mydaytodo.com/apps/

Also, if you can leave a review on the App Store or Google Play Store, that would help too.