RadialGauge

Description

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

Official Kendo UI RadialGauge documentation

Examples

  • Basic Example
  • Passing additional options
  • Using global options

This example demonstrates displaying a basic radial gauge.

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

                            ko.applyBindings(new ViewModel());

This example demonstrates passing additinal configuration options to a radial 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="kendoRadialGauge: { 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 radial gauge and customizing the appearance by setting options globally in ko.bindingHandlers.kendoRadialGauge.options.

<div data-bind="kendoRadialGauge: myValue"> </div>
var ViewModel = function() {
    this.myValue = ko.observable(25);
};

ko.bindingHandlers.kendoRadialGauge.options = {
    pointer: { color: 'orange' },
    gaugeArea: { background: 'gray' }
};

                            ko.applyBindings(new ViewModel());

Live Options

The kendoRadialGauge.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.