Maldaba logo

Graphing with jqPlot

By Digby 13th August, 2015

Agile, Analytics, Application Framework, Graphs, JavaScript, jqPlot, Software

I recently worked on the Red Light Green Light project for our client the Vaccine Confidence Project, at the London School of Hygiene & Tropical Medicine.  Red Light Green Light is a Gates-funded application for helping hospitals in Uganda see what services they can improve on based on rapid patient feedback. We created web-based browser analytics dashboard that aggregates patient responses. For example how did the patient find the hospital service, was their doctor was helpful, and so on.

I needed to show these statistics in a graphical format. Maldaba’s Application Framework (MAF) has a graphing module that uses jqPlot.  jqPlot provide a lot of flexibility for using different graph types (lines, pie charts, bars, etc.) and chart styles very easily. Each question that is asked was represented by one graph.

At first we decided to uses bar charts for all statistics and display one weeks worth of data at a time. I simply played with jqPlot by creating bar chart, pie chart and line charts to begin with before attacking the real code. It was not that complicated to change the graphs so then I went to the next step which was adding the data into the charts. This was very tricky because I had to create a generic function. The reason for this is if the client decides to add new questions then the graph would be automatically added to the statistics page. As I had created a generic function I anticipated to pass in the type of chart and the data into the function in case the client wanted to change graph types.

There where a few difficulties whilst doing the generic function such as showing the different labels for each graph and displaying them in the right order. For example most of the graphs had two labels: positive and negative. If no negative answers were recorded for the reporting period, then the label did not appear in the graph.

After showing the first draft to the client they came back by asking that the first question graph would be a bar chart and all other to be changed into pie chart. Thanks to jqPlot the changes were very simple to make. Because of this the pie charts were very easy to display. We no longer had to show the results of each day but each week. We also had to change the colours of pie chart, jqPlot made it easy to implement all of these changes.

This was a good experience for me as a junior. It enabled me to learn more about JavaScript and how to use the graph module in MAF.