HTML code

Custom Dashboards

Estimated reading time: 3 minutes

I was briefed to come up with a solution for a client who wanted to view their financial data in an easy to understand layout.

Initially it was to simply be a mix of charts & tables. It also had to be adaptable in various browser resolutions. I needed to think about how I would build it, and in the limited time I had available. I did think about using an MVC tech such as AngularJS, React or Backbone, but as I’ve only used some of them a little (and development time was tight), I chose to build it in a technology I am very confident with, jQuery.

I evaluated various supporting libraries that would help me build an effective dashboard, including GridList & sDashboards. The one that stuck out though was Gridster. It seemed to do everything I needed, including the ability to drag/drop & resize. It also had a reasonably active community behind it.

Latency dashboard

For the layout I utilised Bootstrap. Sometimes it can be overkill, but in this situation it was invaluable. I pretty much tweaked its look & feel beyond recognition, as I had a extremely minimalist design in mind (plus there’s a lot of Bootstrap sites out there that ‘look’ like Bootstrap sites...).

Ldashboard header roller of list of icons

I’m not a fan of dashboards that have chunky widgets. I feel, certainly in this context, that the content is the most important aspect, and should be easily presented to the user. A solution I came up with to reduce the widgets impact upon the user was to simplify what was visible to the user. When they roll over the headers, more controls are revealed.

I used a combination of Bootstrap’s Glyphicon icon set, and FontAwesome‘s icon set. Neither offered the complete range of icons I required. I also designed a few icons myself that were not available in either.

Other technologies I utilised included SASS /Compass , Handlebars , Underscore.js , Highcharts & DataTables . I also used the Moment.js library, as the dashboard was to be deployed worldwide, and it was hugely important to display data in the correct timezone.

Latency table

To help develop the site more quickly and efficiently, I used the Grunt task runner with Bower. The various Grunt tasks I used were:

grunt.loadNpmTasks('grunt-contrib-compass'); // compiles the SASS files
grunt.loadNpmTasks('grunt-contrib-concat'); // joins multiple js & css files into single files
grunt.loadNpmTasks('grunt-contrib-cssmin'); // minimises css
grunt.loadNpmTasks('grunt-contrib-jshint'); // alerts me of any errors in my javascript
grunt.loadNpmTasks('grunt-contrib-uglify'); // compressor/minifier for javascript
grunt.loadNpmTasks('grunt-contrib-watch'); // watches for any changes

So then all I had to do was run this in my terminal, and Grunt did all the hard work:

grunt watch

To display the data to the front-end, I used jQuery to interface to the backend via REST APIs.& I also used jQuery’s promises, as this technique proves invaluable when performing multiple asynchronous HTTP (Ajax) requests.

The dashboard is now deployed across many of our client’s systems, and gives users an extremely useful at-a-glance view of multiple data sources.

The banner image is originally a photo by Florian Olivo on Unsplash