Skip to main content

Tutorials

This section provides hands-on tutorials for building custom dashboards and interactive pages in Mango. The tutorials range from a comprehensive multi-part HVAC dashboard series to focused recipes for specific UI patterns like dynamic buttons, floor plans, and charts.

HVAC Dashboard Series​

A complete multi-part tutorial that walks through building a production-quality HVAC monitoring dashboard from scratch:

  1. Overview -- Introduction to the HVAC dashboard series and a preview of the finished dashboard with a map, charts, KPI indicators, and alarm list.

  2. Dev Environment Setup -- Configuring Mango for UI development, including custom themes, fonts, and creating virtual test data points.

  3. Overview Component -- Creating the main overview page component with AngularJS, registering menu items, and building a responsive two-column layout.

  4. Map Component -- Building an interactive map component that displays HVAC unit locations and supports click-to-select.

  5. Unit Card Component -- Creating a detail card that shows real-time data for a selected HVAC unit.

  6. Units Table Component -- Building a data table that lists all units with live status and performance data.

  7. KPI Indicators -- Creating key performance indicator cards that summarize system-wide metrics.

  8. Energy Chart -- Building a combined bar and line chart using ma-serial-chart to show consumed energy and kW/ton ratio.

  9. Alarm List -- Creating a real-time alarm list component with WebSocket subscriptions for live updates.

Dashboard Patterns and Recipes​

Focused tutorials covering specific dashboard development patterns:

  • Custom Views with AngularJS -- How to develop custom views using AngularJS components, including creating modules, loading them in UI Settings, and registering menu items.

  • AMCharts v3 for Graphics -- Using the AMCharts v3 library included with MangoUI to create pie charts, bar charts, and other visualizations with the ma-pie-chart and ma-serial-chart components.

  • Creating a Dynamic Floor Plan -- Building interactive SVG floor plans with clickable zones, live temperature overlays, and watch list parameter integration.

  • Tags Tutorial -- Using Mango's tag system for organizing data points and building tag-based dashboards.

  • PI Portfolio Dashboard -- Building a portfolio-style dashboard for monitoring multiple sites.

UI Patterns and Snippets​

Short tutorials and code snippets for common UI tasks:

  • Auto Rotating Pages -- Automatically transitioning between pages on a timer, with an idle-detection variant that resets on user interaction.

  • Buttons to Set the Date Bar -- Adding quick-select buttons (Today, This Month, Last Month, Year) that set the date bar preset.

  • Dynamic Buttons -- Creating buttons that link to external URLs, navigate to Mango pages, or pass Watch List parameters.

  • Dynamically Generating Button Lists -- Using ng-repeat with point hierarchy data to dynamically generate a list of navigation buttons with live point values.

  • Dynamic Link to Schedule -- Creating a custom page for viewing a single schedule and linking to it from other pages.

  • Linking to Dynamic Pages -- Setting up pages to accept incoming Watch List parameters for creating drill-down navigation between dashboards.