Example of script for Kendo UI DataViz Gauge

click.js

$('#add').bind('click', function() {
    var amt, intakeRecord, grid, gauge;

    amt = parseInt($('#dailyIntake').val()) || 0;
    intakeRecord = { date: getDate(), amount: amt }
    intakeData.add(intakeRecord);
    
    gauge = $("#srirachaGauge").data("kendoGauge");
    gauge.value(avgIntake());
});​

kendoGaugeExample.js

var srirachaMax = 20;

$('#srirachaGauge').kendoGauge({
  theme: "blueopal",
  
  pointer: {
    value: avgIntake()
  },
  
  scale: {
    majorUnit: 2,
    minorUnit: .25,
    startAngle: -30,
    endAngle: 210,
    max: srirachaMax,

    labels: {
      font: "10px arial, Helvetica, sans-serif",
      template: "#=value# tsp."
    },      
      
    ranges: [
      {
        from: 0,
        to: 10,
        color: "#00ab00" //green
      }, {
        from: 10,
        to: 16,
        color: "#d3ce37" //yellow
      }, {
        from: 16,
        to: srirachaMax,
        color: "#ae130f" //red
      }
    ]
  }
});