logo

Flexible Angular.js Dashboard

Overview

There is no shortage of dashboard solutions. Most of these applications though focus on real-time monitoring, limiting the number of potential users to relatively small groups in an organization. Our flexible dashboard developed in the ORBIT project has an entirely different goal: The system, based on flexible Angular JS, is designed to let everyone create and maintain overview pages, which provide key information at a glance. The key idea is to have not only few, but hundreds and potentially thousands of people get a quick overview of relevant data – usually simply by passing a screen displaying that information.

This page provides all the information needed to install and use the results of this particular project outcome.

Note that the code is open source. 

Page Structure:

  • Background and Goals
  • Demo
  • Manuals and Source Code

Background and Goals

The ORBIT dashboard was designed to let project managers visualize progress or status in a very simple way: Create a new page, add „widgets“ to display data from different sources. Create an element, add the data source, publish. Most existing solutions, e.g. Nagios/Incinga are more difficult to set-up and serve other purposes. In todays enviroment though everyone in an organization is to some extend a stakeholder in the numbers produced by digital systems. From server availability to usage numbers to social media to other metrics. The core idea of the flexible dashboard is to let you add key metrics easily. T The research in the ORBIT project lead us to design a solution which would open up important data points to different user groups. Imagine (any) large corporate entrance area – more often than not there is no comprehensive key info about what this place is all about. How many people work here? What is the key output?

Being highly flexible the dashboard is designed to enable different views for different user groups:

  • One, as in the example above, for the general public and employees when they pass through the front door
  • Another for the public space of a department, indicating the next deadlines or other relevant data indicating the current workload for everyone
  • Another dashboard yet, to inform non-technical stakeholders with key info, in an easy to digest way

 

Technology

We designed a dashboard based on Angular JS as a framework, with multiple datasources („widgets“) to be included when needed. Widgets range from popular, but general information (weather, temperature) to specific, need-to-know items: How many people work in this place? If there are websites, how popular are those?

Information At-a-glance 

More specifically and closer to operations in any organization: How much downtime did critical systems incur over time – this month, since the beginning of the year, over the last few years. These bits of information are provided „at a glance“, preferably on large, public screens visible to the relevant user groups.

2.  Angular JS Dashboard Demo

Movable Adjustable Grids

Creating Widgets on the Fly


 

3. Manuals and Source Code

Go to the Dashboard Github Repository and download the code.

Installation guide:

Installing bower and gulp

npm install -g bower
npm install -g gulp

Installing dependencies

npm install
bower install

Build the dashboard

gulp
Run gulp Serve