⚡ Angular Data Gauges

• Angular app using the Google Charts API to visualise data using gauges
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Data Gauges
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• basic working app that displays 3 gauges with green, orange and red colours configurable from the app.component.ts file.
• Google chart tools have a wide range of interactive charts and data tools.

📷 Screenshots

📶 Technologies

• Angular v16
• npm angular google charts v2

💾 Setup

• Install dependencies using npm i.
• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
• Run npm run build to create a build folder named docs. Rename index.html to 404.html if using Github pages docs option.

💻 Code Examples

• app.component.ts - creates the gauge data

export class AppComponent {
  title = 'angular-data-gauges';

  @ViewChild('googlechart')
  googlechart: GoogleChartsModule;
  chart = {
    title: 'angular-data-gauges',
    type: 'Gauge',
    data: [
      ['Memory', 50],
      ['CPU', 90],
      ['Battery', 60]
    ],
    options: {
      width: 400,
      height: 120,
      greenFrom: 0,
      greenTo: 75,
      redFrom: 90,
      redTo: 100,
      yellowFrom: 75,
      yellowTo: 90,
      minorTicks: 5
    }
  };
}

🆒 Features

• Dashboards can be used to manage multiple charts that share the same data.
• Data can also be fetched from a REST API endpoint or database service call.

📋 Status & To-Do List

• Status: Working
• To-Do: Add functionality and extend to include connection to an API.

👏 Inspiration

• Medium blog by Sunny Sun: How to create impressive looking Gauge Charts using Angular 6
• Google Charts Developers Guide

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com