Kendo Gauge

by anup1986

HTML

<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<div>
    <div id="gauge"></div>
</div>

CSS

div {
    margin: 20px 0 0 20px;
}

JavaScript

$(document).ready(function () {
    var model = function () {
        var self = this;

        self.val = ko.observable(180);

        self.createGauge = function () {
            $("#gauge").kendoRadialGauge({
                pointer: {
                    value: self.val()
                },
                scale: {
                    minorUnit: 5,
                    startAngle: -30,
                    endAngle: 210,
                    max: 180,
                    labels: {
                        position: "inside"
                    },
                    ranges: [{
                        from: 80,
                        to: 120,
                        color: "#ffc700"
                    }, {
                        from: 120,
                        to: 150,
                        color: "#ff7a00"
                    }, {
                        from: 150,
                        to: 180,
                        color: "#c20000"
                    }]
                }
            });
        };

        self.update = function () {
            $("#gauge").data("kendoRadialGauge").value(self.val());
        };
    };

    var modelInstance = new model();
    ko.applyBindings(modelInstance);

    modelInstance.createGauge();
    setTimeout(function () {
        modelInstance.val(85);
        modelInstance.update();
    }, 1600);
});