Product Selector

Fusion 5.12
    Fusion 5.12

    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;
            };
        }]);

    Result

    Result