chart:gauge
Description
The chart gauge directive generates a gauge, you can also use the chart export and chart credit directives to add this functionality to your gauge.
Usage
as element:
<chart:gauge
value="{number}"
min="{number}"
max="{number}"
[stops="{array}"]
[title="{string}"]
[value-suffix="{string}"]
[height="{string}"]
[options="{object}"]>
</chart:gauge>
Directive info
-
This directive creates new scope.
Parameters
Param | Type | Details |
---|---|---|
value |
number |
Value to be displayed on the gauge. |
min |
number |
The smallest number that can be displayed on the gauge. |
max |
number |
The highest number that can be displayed on the gauge. |
stops (optional) |
array |
The colours to render at each stop measured from 0 to 1. Default [ [0.1, '#DF5353'], // red [0.5, '#DDDF0D'], // yellow [0.9, '#55BF3B'] // green ] |
title (optional) |
string |
The title of the chart. |
value-suffix (optional) |
string |
Suffix for the value on the gauge. |
height (optional) |
string |
Chart height. Default:400 (400px but px is not required!) |
options (optional) |
object |
Extend the current options. Options can be found here. |
Example
Source
<div ng-controller="ExampleController">
<chart:gauge value="{{value}}" min="{{min}}" max="{{max}}" title="Speed" value-suffix="mph" stops="[[0.1, '#55BF3B'], [0.5, '#DDDF0D'], [0.9, '#DF5353']]">
<chart:credit text="twigkit.com" href="http://www.twigkit.com"></chart:credit>
<chart:export file-name="gauge"></chart:export>
</chart:gauge>
<form class="tk-stl-form tk-stl-form-aligned">
<fieldset>
<div class="tk-stl-control-group">
<label for="value">Value</label>
<input id="value" type="number" placeholder="Value" ng-model="value">
<button ng-click="generateNewNumber()" style="button tiny">Generate Random Value</button>
</div>
<div class="tk-stl-control-group">
<label for="min">Min</label>
<input id="min" type="number" placeholder="Min" ng-model="min">
</div>
<div class="tk-stl-control-group">
<label for="max">Max</label>
<input id="max" type="number" placeholder="Max" ng-model="max">
</div>
</fieldset>
</form>
</div>
angular.module('lightning')
.controller('ExampleController', ['$scope','$timeout', function($scope,$timeout) {
$scope.value = 20;
$scope.min = 0;
$scope.max = 40
$scope.generateNewNumber = function(){
$scope.value = Math.floor(Math.random() * ($scope.max - $scope.min + 1)) + $scope.min;
};
}]);