Multi point radial gauge

by Alka Shivane

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<div id="gauges">
     <div id="onBreakGauge"></div>
    <div id="loggedInGauge"></div>
    <div id="loggedOutGauge"></div>
</div>

CSS

#gauges {
    position: relative;
}
#loggedInGauge,  #onBreakGauge {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 200px;
    height: 200px;
}
#loggedOutGauge {
  position: absolute !important
    z-index: 10;
    top: 73px !important;
    left: 50px !important;
    right: 0;
    bottom: 0;
    width: 100px !important;
    height: 100px !important;
}
#onBreakGauge {
    z-index: 20;
}
#loggedInGauge {
    z-index: 25;
}

JavaScript

$("#onBreakGauge").kendoRadialGauge({
    pointer: {
        // Current value
        value: 125
    },
    scale: {
        // Start and End angle of the Gauge
        startAngle: 0,
        endAngle: 180,

        // Make range wider and with units inside
        rangeSize: 50,
        rangeDistance: -10,
rangePlaceholderColor: '#ff0000',
        // Configure major and minor unit
        minorUnit: 0.05,
        majorUnit: 0.25,
        // Make major ticks same size than minor ticks
        majorTicks: {
        visible: false,
            size: 10
        },
minorTicks:{
visible: false
},
        // Define min and max (0% - 100%)
        min: 0,
        max: 180,

        // Labels outside the range and number as percentage with no decimals
        labels: {
            position: "outside",
            format: "p0",
          visible: false
        },

        // Color ranges
        ranges: [
            {
                from: 120,
                to: 132,
                color: "green",
                opacity: 0
            }
        ]
    }
});
$("#loggedInGauge").kendoRadialGauge({
    pointer: {
        // Current value
        value: 125
    },
    scale: {
        // Start and End angle of the Gauge
        startAngle: 0,
        endAngle: 180,

        // Make range wider and with units inside
        rangeSize: 5,
        rangeDistance: -10,
rangePlaceholderColor: '#ff0000',
        // Configure major and minor unit
        minorUnit: 0.05,
        majorUnit: 0.25,
        // Make major ticks same size than minor ticks
        majorTicks: {
        visible: false,
            size: 10
        },
minorTicks:{
visible: false
},
        // Define min and max (0% - 100%)
        min: 0,
        max: 180,

        // Labels outside the range and number as percentage with no decimals
        labels: {
            position: "outside",
            format: "p0",
          visible: false
        },

        // Color ranges
        ranges: [
            {
    ...