Skip to main content

HVAC Dashboard Development Overview

In this tutorial series, we build a complete dashboard to monitor HVAC systems across a region. The finished dashboard includes an interactive map showing building locations, a detailed unit card with live sensor data, a sortable units table, KPI indicators for key metrics, energy consumption charts, and an alarm list showing active and recent events.

What You Will Learn​

By following this series from start to finish, you will learn how to:

  • Set up a Mango development environment with virtual data sources for testing
  • Structure an AngularJS user module with multiple components
  • Use the maDataPointTags service to query and filter data points by tag
  • Build responsive layouts using Angular Material components
  • Display live data with ma-get-point-value and ma-point-values
  • Create time-series charts with ma-serial-chart
  • Integrate Google Maps into a dashboard component
  • Display and manage alarms from the Mango event system

Prerequisites​

Before starting this series, you should have a Mango instance running (version 3.5 or later) and be familiar with basic AngularJS concepts such as components, controllers, and data binding. If you are new to custom development in Mango, start with the Custom Views with AngularJS tutorial and the User Module Setup guide.

Articles in This Series​

The series is organized in a progressive order. Each article builds on the previous one.

  1. Prepare development environment -- Install Mango, create virtual data sources, and configure the File Store for module development.
  2. Create overview component -- Build the main overview page with summary cards for all HVAC units.
  3. Create map component -- Add an interactive Google Maps component showing building locations.
  4. Create selected unit card component -- Display detailed live sensor readings for a selected HVAC unit.
  5. Create units table component -- Build a sortable, filterable table listing all HVAC units and their status.
  6. Create KPI indicators component -- Show key performance indicators such as average temperature and energy usage.
  7. Create energy chart component -- Create time-series charts showing energy consumption with rollup intervals.
  8. Create alarm list component -- Display active and recent alarms with severity filtering and acknowledgment controls.