Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andrewjbateman/angular-gauges-realdata

:clipboard: App using npm library 'canvas-gauges' to display real data on analogue gauges
https://github.com/andrewjbateman/angular-gauges-realdata

analogue-gauge angular angular16 canvas css3 data-visualization gauges html5 real-time typescript4

Last synced: about 14 hours ago
JSON representation

:clipboard: App using npm library 'canvas-gauges' to display real data on analogue gauges

Host: GitHub
URL: https://github.com/andrewjbateman/angular-gauges-realdata
Owner: AndrewJBateman
License: mit
Created: 2019-05-19T08:40:07.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2024-03-24T17:41:26.000Z (8 months ago)
Last Synced: 2024-03-24T18:40:28.045Z (8 months ago)
Topics: analogue-gauge, angular, angular16, canvas, css3, data-visualization, gauges, html5, real-time, typescript4
Language: TypeScript
Homepage:
Size: 2.19 MB
Stars: 1
Watchers: 2
Forks: 1
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # :zap: Angular Gauges Real Data

* App to display data using an Angular component wrapper [ng-canvas-gauges](https://www.npmjs.com/package/ng-canvas-gauges) for the open-source Javascript [biacsics/ng-canvas-gauges v6](https://www.npmjs.com/package/@biacsics/ng-canvas-gauges) library.

* **Note:** to open web links in a new window use: _ctrl+click on link_

![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/angular-gauges-realdata?style=plastic)

![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/angular-gauges-realdata?style=plastic)

![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/angular-gauges-realdata?style=plastic)

![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/angular-gauges-realdata?style=plastic)

## :page_facing_up: Table of contents

* [:zap: Angular Gauges Real Data](#zap-angular-gauges-real-data)

  * [:page\_facing\_up: Table of contents](#page_facing_up-table-of-contents)

  * [:books: General info](#books-general-info)

  * [:camera: Screenshots](#camera-screenshots)

  * [:signal\_strength: Technologies](#signal_strength-technologies)

  * [:floppy\_disk: Setup](#floppy_disk-setup)

  * [:computer: Code Examples](#computer-code-examples)

  * [:cool: Features](#cool-features)

  * [:clipboard: Status \& To-Do List](#clipboard-status--to-do-list)

  * [:clap: Inspiration](#clap-inspiration)

  * [:file\_folder: License](#file_folder-license)

  * [:envelope: Contact](#envelope-contact)

## :books: General info

* Data displayed on analogue gauges - examples from [CANVAS GAUGES USER GUIDE](https://canvas-gauges.com/documentation/user-guide/)

## :camera: Screenshots

![Example screenshot](./img/gauges.png)

## :signal_strength: Technologies

* [Angular framework v17](https://angular.io/)

* [biacsics/ng-canvas-gauges v6](https://www.npmjs.com/package/@biacsics/ng-canvas-gauges). Published 3 years ago. Works with Angular 9+

## :floppy_disk: Setup

* Install dependencies with `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.

## :computer: Code Examples

* app.component.html - extract - defines some of the qualities of the analogue gauge

```html