Skip to main content

​
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

ParamTypeDetails
valuenumberValue to be displayed on the gauge.
minnumberThe smallest number that can be displayed on the gauge.
maxnumberThe highest number that can be displayed on the gauge.
stops (optional)arrayThe 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)stringThe title of the chart.
value-suffix (optional)stringSuffix for the value on the gauge.
height (optional)stringChart height. Default:400 (400px but px is not required!)
options (optional)objectExtend 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;
            };
        }]);

​
Result

Result