Radial Gauge

Member Of	Wijmo Value Control
Base Control	wijradialgauge
Description	Creates a customizable control resembling a dial or speedometer.
Usage	Apply to an entity property having a numeric data type.

Generated Code	Copy Code
myapp.ScreenName.PropertyName_render = function (element, contentItem) { var div = $("<div/>"); div.appendTo($(element)); div.attr("style", "width: 200px; height: 200px"); setTimeout(function () { div.wijradialgauge({ value: contentItem.value, min: 0, max: 100, radius: "auto", startAngle: -45, sweepAngle: 270 }); }, 500); contentItem.dataBind("value", function (newValue) { div.wijradialgauge({ value: newValue }); }); };

Generated Code

Copy Code

myapp.ScreenName.PropertyName_render = function (element, contentItem) {

    var div = $("<div/>");
    div.appendTo($(element));
    div.attr("style", "width: 200px; height: 200px");

    setTimeout(function () {
        div.wijradialgauge({
            value: contentItem.value,
            min: 0,
            max: 100,
            radius: "auto",
            startAngle: -45,
            sweepAngle: 270
        });
    }, 500);

    contentItem.dataBind("value", function (newValue) {
        div.wijradialgauge({ value: newValue });
    });
};

Remarks

The widget specifies an initial width and height for consistent rendering. If desired, change the default width (200px) and height (200px) of the generated DOM element.

The widget’s constructor specifies a limited set of options (initial value, min/max values, start/sweep angles). If you need to set additional options, add them to the initializer passed to the constructor. Note that the setTimeout wrapper is necessary to ensure consistent rendering.

The dataBind method call ensures that the widget stays in sync whenever the bound value changes.