LinearGauge

Description

The LinearGauge widget visually displays where a value lies in a range.

Official Kendo UI LinearGauge documentation

Examples

  • Basic Example
  • Passing additional options
  • Using global options

This example demonstrates displaying a basic linear gauge.

<input data-bind="value: myValue" class="input-mini" />
<hr/>
<div data-bind="kendoLinearGauge: myValue"> </div>
var ViewModel = function() {
    this.myValue = ko.observable(25);
};

                            ko.applyBindings(new ViewModel());

This example demonstrates passing additinal configuration options to a linear gauge.

<input data-bind="value: myValue" class="input-mini" /> Value<br/>
<select data-bind="options: colors, value: pointerColor" class="input-small"> </select> Pointer <br/>
<select data-bind="options: colors, value: backgroundColor" class="input-small"> </select> Background
<hr/>
<div data-bind="kendoLinearGauge: { value: myValue, gaugeArea: gaugeOptions, pointer: pointerOptions }"> </div>
var ViewModel = function() {
    this.myValue = ko.observable(25);

    this.colors = ['blue', 'red', 'yellow', 'green', 'orange', 'purple', 'white'];

    this.backgroundColor = ko.observable('white');
    this.pointerColor = ko.observable('black');

    this.gaugeOptions = ko.computed(function() {
        return { background: this.backgroundColor() };
    }, this);

    this.pointerOptions = ko.computed(function() {
        return { color: this.pointerColor(), value: this.myValue() };
    }, this);
};

                            ko.applyBindings(new ViewModel());
Value
Pointer
Background

This example demonstrates generating a linear gauge and customizing the appearance by setting options globally in ko.bindingHandlers.kendoLinearGauge.options.

<input data-bind="value: myValue" class="input-mini" />
<div data-bind="kendoLinearGauge: myValue"> </div>
var ViewModel = function() {
    this.myValue = ko.observable(0);
};

ko.bindingHandlers.kendoLinearGauge.options = {
    gaugeArea: { background: 'gray' },
    scale: { vertical: false }
};

                            ko.applyBindings(new ViewModel());

Live Options

The kendoLinearGauge.md binding accepts all of the options that can be specified for the widget. However, when bound against an observable, these live options will update the widget or respond to updates from interactions with the widget.
value

The current value of the gauge

gaugeArea

An object containing the gaugeArea options

pointer

An object containing the pointer options

scale

An object containing the scale options

widget

If specified, will populate an observable with a reference to the actual widget

Future Plans

Evaluate whether any individual options of the configuration objects should be watched specifically.