Analytics Dashboard Widgets

Published in Polar Mobile

My manager recently gave me a new project to work on if I have any down time between tasks. Polar Mobile is planning to create several custom dashboards to display internal statistics and metrics about the company. My new assignment is to create several reusable widgets so that these dashboards can be created or destroyed with ease.

The essential idea is that each individual widget should be pluggable into different data sources (likely a small Django-powered API) and should display the information in an aesthetically pleasing manner. I did investigate a variety of different open source options and came across d3.js, which is a framework for easily creating dynamic data driven documents with accompanying animation. d3.js is something that I had heard of before and that I wanted to use but had never had the opportunity. In this case it seemed like it would be a perfect fit.

Those who would be creating the dashboards requested that there should be the following widgets available: Line Graph (mostly for time series), Bar Chart, Pie Chart, Sparkline and a Speedometer-type widget. As I further continued my research I found an entire repository of reusable d3.js graphs and with a little customization and a simple Coffeescript wrapper, line, bar and pie charts had all been implemented. For sparklines, I found a very easy to use JQuery plugin.

I was unable to find any open source speedometer type widgets available so I decided that it would be best to tackle this one from scratch. Using d3.js I have been able to get the majority of the widget functioning correctly. It is very easy to create the appropriate shapes and tweening to get the speedometer needle to animate into place. One thing that I have been having trouble with is getting the widget to update and animate properly when the data has been changed. At this point in time, a new widget is being rendered over top of the existing SVG, which is not the desired effect.

Overall, I must say that I am quite happy with the progress that I have made on this project and the sheer variety in tasks that I have been exposed to this work term has made this a phenomenal experience thus far.

Written By

Andrew Halligan

Published August 1, 2012