A screenshot of the ODI Leeds dashboard

ODI Leeds Dashboard

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:

  1. keep the initial page load small to help those with limited bandwidth (e.g. on mobile data plans);
  2. make the design responsive so that it can adapt to the different screen sizes of mobile devices and desktops.

Here is the result:

A screenshot of the ODI Leeds dashboard

A screenshot of the ODI Leeds dashboard

Hand-crafting a dashboard

Rather than use a large Javascript library, I decided to go back to basics by writing the site in vanilla HTML/CSS/Javascript with progressive enhancement. Reminding myself that you might not need jQuery would also help me keep the file size low.

The panels are set out using CSS with the colour palette taken from the ODI branding page. The data are stored in the same repository on Github in the form of CSV files. CSV has the advantage of being human-readable, easy to update, and easy to read/parse with things like Javascript. The panels are configured with a bit of JSON included in the top of the page. However, I also add HTML links in each panel so that the raw data can still be accessed by the end user even if Javascript isn’t available (or if it breaks for whatever reason).

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).

I’ve made use of Javascript’s history object to monitor jumps to page anchors (selecting a panel). These trigger the appropriate panel’s content and mean that a specific panel can be linked to directly e.g. Tweet impressions.

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.

For those that are interested, the code for the dashboard is on Github and I’ve written a bit more detail on setting it up in the README.

Posted in Miscellaneous.