One of my first jobs at ODI Leeds has been to create a dashboard to show a quick overview of how we are doing. I started by looking at the excellent ODI HQ dashboard which was built with Dashing. We didn’t need all of the reporting that that dashboard provides so I decided to write something myself but heavily inspired by it. Although ours was going to have fewer features, I added some extra constraints:
- keep the initial page load small to help those with limited bandwidth (e.g. on mobile data plans);
- make the design responsive so that it can adapt to the different screen sizes of mobile devices and desktops.
Here is the result:
Hand-crafting a dashboard
The JSON configuration specifies which CSV file is used for each panel, which columns define dates, and which DOM elements within the panel get content written to them. Each element is assigned a column in the CSV and the code will either add up the values in that column (e.g. the total number of people at events) or count the number of rows (e.g. list the number of sponsors). The rows that are included in this summary value can be limited to specific dates which makes yearly reports easy to create.
When a panel in clicked/tapped, more information is shown. The extra information varies from panel to panel. Where there are time series data (monthly or yearly statistics) the extra content will be a simple time-series bar-chart. Alternatively, it may show a list of logos or links. As logos take up bandwidth, they aren’t loaded until they are actually required. The logos have been created as SVG (scalable vector graphics) so they should be nice and crisp at different screen resolutions (or on high resolution displays). As few organisations or businesses provide vector versions of their logos, I had to make most of them by tracing jpg/png versions using Inkscape (open-source, cross-platform, and free).
Thanks to some compression on Github-pages, the dashboard has an initial page load of about 31kB (for comparison, the ODI HQ dashboard weighs in at about 920 kB). It is hopefully fast, efficient, and should work at a variety of screen resolutions.