JSFiddle - React, Tailwind, and code Playground

by stratdaz

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css">
<div id="gauge-container">
    <div id="gauge"></div>
</div>

CSS

#gauge-container {
    background: transparent url("http://demos.kendoui.com/beta/content/dataviz/gauge/gauge-container-partial.png") no-repeat 50% 50%;
    width: 386px;
    height: 386px;
    text-align: center;
    margin: 0 auto;
}

#gauge {
    width: 350px;
    height: 300px;
    margin: 0 auto;
}

JavaScript

var kpiValue = 3400000;
var vm = kendo.observable({
    // indicator config
    kpiType: "lower",
    
    // values
    min: -50,
    max: 50,
    selectedNumber: kpiValue,
    
    // tolerances
    t1: -15,
    t2: 15,
    
    // colours
    t1_colour: function () {
        return this.kpiType == "lower" ? "green" : "red";
    },
    mid_colour: function () {
        return "orange";
    },
    t2_colour: function () {
        return this.kpiType == "lower" ? "red" : "green";
    },
    // gauge config
    majorUnit: function (e) {
        return (this.max - this.min) / 8;
    },
    minorUnit: function (e) {
        return (this.max - this.min) / 40;
    }
});

kendo.bind($("#gauge-container"), vm);

$("#gauge").kendoRadialGauge({
    
    pointer: {
        value: vm.get("selectedNumber")
    },
    
    scale: {
        majorUnit: vm.majorUnit(),
        minorUnit: vm.minorUnit(),
        startAngle: -30,
        endAngle: 210,
        min: vm.get("min"),
        max: vm.get("max"),
        labels: {
            position: "inside"
            //template: "#=customLabels(value)#"
        },
        ranges: [
            {
                from: vm.get("min"),
                to: vm.get("t1"),
                color: vm.t1_colour()
            }, {
                from: vm.get("t1"),
                to: vm.get("t2"),
                color: vm.mid_colour()
            }, {
                from: vm.get("t2"),
                to: vm.get("max"),
                color: vm.t2_colour()
            }
        ]
    }
});