Back to blog home page

Constructing a Dashboard with AngularJS

Posted by on Oct 23, 2014

What is a Dashboard?

A dashboard consists of a toolbar and a collection of panels presenting information in tables, charts and grids.  Making different selections and entering filtering values on the toolbar, such as selecting date ranges, causes the content of the panels to change. AngularJS has a collection of features that facilitate a streamlined construction of a dashboard.

Structure a Dashboard in AngularJS

The dashboard is structured as a collection of controllers: a controller for the toolbar and a separate controller for each panel. Constants are concentrated in a constants service constantsService. The selection and filtering state of the toolbar, is maintained in a filter service filterService.

Once a selection is made in the toolbar, it is broadcast to the other controllers, which makes the required adjustments. This may include filtering of data, redrawing of visualizations or fetching data from the server according to the selection.

Single Page Application Structure

The app is a single page application (SPA) constructed using Bootstrap.

This is powered by app.js in the standard AngularJS way:

The page is structured as a navigation bar for the toolbar and a sequence of rows for the panels.

The toolbar is a navigation bar controlled by the toolbarCtrl controller. It has a drop down for each possible selection or filter. Below you can see a selection of a market and a selection of a time period.

The ranges for selections are set in the selectionScape variable of the toolbar controller:

The current state of selection/filtering is kept in the variable selectionState.

Each panel is a row controlled by its own controller, such as the revenueCtrl, below:

App Bootstrap

When the app is started, it broadcasts to all controllers to fetch the initial content of their panels.

The timeout is needed in order to wait for the controllers to be created first.

Initial setup is done on receiving the setup signal from the app Bootstrap:

Propagation of Filtering and Selection

When the filtering and selection are done on the toolbar they are propagated from the toolbar via a broadcast to the other controllers. So for each possible selection operation on the toolbar, you need to define a function:

The filtering is updated in the filter service so that all controllers can fetch it. The selection state is done in the global filter service so that all controllers can use it.

Panel Content Update

Each panel controller, upon receiving the selectionChange signal from the toolbar, updates its state, which involves a fetch of data from the server:

The Filter Service

The filter service stores the current filters and selections of the dashboard:

A Backend for the Dashboard

A dashboard has to fetch its data from a backend. Check out how to build your Bootstrap + Angular dashboard with Backand. – Get started now.

// ]]>