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());

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());