Use of Gauge

I have a problem when instantiating a repeated instances of the gauge, using something like that in the ID field is not working: <canvas canvas-gauge id="gauge-{{$index}}" .......></canvas>

[Mikhus]

With the latest release, after investigations I can tell that you no longer need to use specific wrapper to integrate gauges into angular 1 or 2 applications, as far as gauges themselves are fully-functional web components since version 2. There was several problems which causes them crash in some circumstances (for example, when calling on angular’s digest cycles). But with version 2.0.4 all that problems are fixed.

So you may simply refer gauges code from your html or by bundling their code into your script bundle within your build system.

Than you may simply use it in html.

Use with angular 1.x

For example, this worked for me in angular1.5 app well:

'use strict';

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', ['$scope', function($scope) {
  $scope.gauges = [{
    width: 150,
    height: 150
  },{
    width: 250,
    height: 250
  },{
    width: 350,
    height: 350
  },{
    width: 450,
    height: 450
  }];
}]);

where view1.html is something like:

<canvas ng-repeat="gauge in gauges track by $index" data-type="radial-gauge"
        data-width="{{gauge.width}}"
        data-height="{{gauge.height}}"
        data-min-value="0"
        data-max-value="360"
        data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
        data-minor-ticks="22"
        data-ticks-angle="360"
        data-start-angle="180"
        data-stroke-ticks="false"
        data-highlights="false"
        data-color-plate="#33a"
        data-color-major-ticks="#f5f5f5"
        data-color-minor-ticks="#ddd"
        data-color-numbers="#ccc"
        data-color-needle="rgba(240, 128, 128, 1)"
        data-color-needle-end="rgba(255, 160, 122, .9)"
        data-value-box="false"
        data-value-text-shadow="false"
        data-color-circle-inner="#fff"
        data-color-needle-circle-outer="#ccc"
        data-needle-circle-size="15"
        data-needle-circle-outer="false"
        data-animation-rule="linear"
        data-needle-type="line"
        data-needle-start="75"
        data-needle-end="99"
        data-needle-width="3"
        data-borders="true"
        data-border-inner-width="0"
        data-border-middle-width="0"
        data-border-outer-width="10"
        data-color-border-outer="#ccc"
        data-color-border-outer-end="#ccc"
        data-color-needle-shadow-down="#222"
        data-border-shadow-width="0"
        data-animation-target="plate"
        data-units="ᵍ"
        data-title="DIRECTION"
        data-font-title-size="19"
        data-color-title="#f5f5f5"
        data-animation-duration="1500"
        data-value="45"
        data-animate-on-init="true"
></canvas>

and gauges are simply included in the main html page, like:

<script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/latest/all/gauge.min.js"></script>

You may refer gauges code locally, of course or bundle them together with your code as I said before. Async loading is also allowed as well.

Use with Angular 2

Just install gauges via npm:

$ npm install canvas-gauges

And typings.

• For TypeScript < 2: typings install --save --source=dt --global canvas-gauges
• For TypeScript 2+ npm install @types/canvas-gauges

Than imagine, for example, such a simple app.component.ts

import { Component } from '@angular/core';
import 'canvas-gauges';

@Component({
    selector: 'my-app',
    template: `
      <h1>My First Angular App</h1>
      <canvas data-type="radial-gauge"
              data-width="400"
              data-height="400"
      ></canvas>
    `
})
export class AppComponent { }

Hope, this helps.

[dec]

Good to know that @Mikhus! I have some problems when try to integrate the 2.0 version of the Gauge library into Angular 1.x, just as I do before with the 1.x branch of the Gauge library. But probably you have reason and we no need to add any wrapper above the Gauge library to be used into Angular. I want to try it too when possible. Thanks for your efforts @Mikhus!