A dashboard is an easy to read, single-page graphical presentation of current status within an organization. With the increasing popularity of BI solutions and web applications as a delivery platform, there has been an increasing demand for easy to implement web portals that operate as functional dashboards.
A typical dashboard can be separated out into three functional layers, the dashboard UI layer, charting components or tabular representations of data and a data retrieval layer. The UI layer comprises the overall look & feel of the dashboard. It determines the structure of a dashboard in terms of header, footer and menu system components. It provides a subsystem of panels that can house charting components or tabular summaries of organizational data. The data retrieval layer is not unique to dashboards, it is an essential part of most non-trivial web applications and as is treated as out-of-scope for this article. We will focus on implementing the UI layer and a charting system that can be replicated for various types of dashboards.
The attached solution contains two projects. One project (
HighchartsWebApp) demonstrates the use of the ASP.NET control to create the dashboard. It is a minimalistic demo for those of us desiring a mostly C# based dashboard solution. The second and primary project (
Highcharts) that I selected for this demo. I have implemented both projects to provide alternate paths to our goal of creating a generic dashboard.
Please download the attached file (HighchartsWebFinal.zip), unzip and open the Visual Studio 2012 solution so you can refer to the code while reading the rest of this article.
You can alternately run the second project by right-clicking the ‘
I have put in less effort into the
HighchartsWebApp’ project, you can check the website for Highcharts.Net, an open source project (http://highcharts.codeplex.com/).
Dashboard - Operation
The screenshot above shows an annotated view of the initial dashboard screen. Note, the last (green background) section has been intentionally left empty. Clicking on this section brings up the equivalent of a drill down/popup report (see next screenshot).
Note, the header changes to reflect a title for the drill down report. The Metro UI themed arrow appears to allow navigation back to the main dashboard.
Assuming you have the solution open in VS2012, the above information should be sufficient to guide most of you in getting the project to execute, you could even start modifying it for your individual requirements. For those wanting a deeper dive, let us now look into the code so we can get a clearer vision of its operation.
Part 1: Dashboard
The dashboard code as previously mentioned is based on a free template released by the folks at TechGYO. The majority of the code is contained in the file ‘index.html’, the adjacent screen snippet shows a collapsed view of this file with highlights & labels calling out various functional areas within the code. Note, the code has been collapsed in Visual Studio to provide this bird’s-eye view.
If you examine the code that draws each dashboard panel (lines 112 – 125), you will notice that it consists of a hyperlink enclosing an empty
div and not much else.
Part 2: Drawing the Charts
Linechart) is placed inside Panel 1. Lines 245 – 257 define the series data being displayed on the chart. Note,
Highchart objects are defined using JSON. If you are unfamiliar with JSON, you should look up one of the many tutorials available on the web. A good starting reference is the one at http://www.w3schools.com/json/.
Part 3: Merging Application Data with Chart Code
You may have realized that the example until this point is of limited utility as the data is hard-coded into the page. Most use case scenarios involve reading data from a data source and dynamically populating the chart. This section seeks to get you started on that path. In the interest of brevity and focus, I do not plan to cover how data is to be extracted from your data source. I assume you are able to write the code to read your application data. For what it’s worth, I have included some commented code that I used for my application. The item to note in the code below is that we are using some variables (arrays defined at the class-level) to store the values that will be the input for our chart.
- Visual Studio 2012 (http://www.microsoft.com/visualstudio/eng/downloads)
- Highcharts Charting Library (http://www.highcharts.com/products/highcharts)
- Highcharts.Net (http://highcharts.codeplex.com/) – not affiliated with Highcharts Charting Library
- Metro UI Template by TechGYO.com (http://techgyo.com/index.php/free-metro-ui-html-template-by-techgyo/)
Dashboard Implementation Reference Websites
- The Geckoboard Blog (https://demo.geckoboard.com/dashboard/B6782E562794C2F2/)
- jSlate (https://github.com/rasmusbergpalm/jslate/graphs)
- D3 (https://github.com/mbostock/d3/wiki/Gallery)
- Vaadin Dashboard (https://vaadin.com/demo)
- 04 July 2013 - Initial draft