Kendo Gauge

by alexandrejunges

HTML

<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.common.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.default.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.dataviz.min.css">
<script src="http://rniemeyer.github.com/knockout-kendo/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-2.2.0.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/jquery.min.js"></script>
<div class="mainContent">
    <div class="gaugeContent">
        <div id="gauge" data-bind="kendoRadialGauge: { 
                value: myValue,
                scale: options }"></div>
    </div>
</div>

<input id="myValue" type="text" data-bind="value: myValue"></input>

CSS

.mainContent {
    width: 386px;
    height: 386px;
}

.gaugeContent {
    width: 100%;
    height: 100%;
}

JavaScript

$(function() {
    viewModel = {
        myValue: ko.observable(0),
        minValue: ko.observable(0),
        maxValue: ko.observable(100),
        options: ko.observable({
            startAngle: -30,
            endAngle: 210,
            min: 0,
            max: 100,
            ranges: [
                {
                    from: 0,
                    to: 40,
                    color: "#ffc700"
                }, {
                    from: 40,
                    to: 80,
                    color: "#ff7a00"
                }, {
                    from: 80,
                    to: 100,
                    color: "#c20000"
                }
            ]
        })
    };
    
    viewModel.myValue.subscribe(function(newValue) {
        if(newValue > viewModel.maxValue()) {
            viewModel.options().max = newValue;
        }
        else if(newValue < viewModel.minValue()) {
            viewModel.options().min = newValue;
        }
    });
    
    ko.applyBindings(viewModel);
});