Dojo Gauge Sample - Custom GCS

HTML

<link rel="stylesheet" href="      &lt;link rel=&quot;stylhttp://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"
/>
<div class='claro'>
    <div dojoType="dojox.widget.AnalogGauge" id='mailminute' width="450" height="180"
        cx="225" cy="145" radius="115" startAngle="-90" endAngle="90" useRangeStyles="0"
    hideValues="true" color: "white" majorTicks="{length: 10, offset: 73, interval: 20, color: 'gray'}"
    minorTicks="{length: 5, offset: 73, interval: 5, color: 'gray'}">
        <div dojoType="dojox.widget.gauge.Range" low="0" high="100" color="{'color': 'white'}">
        </div>
        <div dojoType="dojox.widget.gauge.Range" low="100" high="200" color="{'color': 'white'}">
        </div>
    </div>
  Drag della linea rossa per impostare il limite
    
</div>

JavaScript

dojo.require("dojox.widget.AnalogGauge");
dojo.require("dojox.widget.gauge.AnalogArcIndicator");
dojo.require("dojox.widget.gauge.AnalogNeedleIndicator");
//dojo.require("dojox.widget.gauge.AnalogLineIndicator");

dojo.addOnLoad(function() {
    dojo.parser.parse();
    var gauge = dijit.byId('mailminute');
    // Used for a gradient arc indicator below:
    var fillRed = {
        'type': 'linear',
        'x1': 50,
        'y1': 50,
        'x2': 250,
        'y2': 250,
        'colors': [{
            offset: 0,
            color: 'green'},
        {
            offset: 0.5,
            color: 'lightyellow'},
        {
            offset: 0.75,
            color: 'yellow'},
        {
            offset: 1,
            color: 'red'}]
    };
    gauge.addIndicator(new dojox.widget.gauge.AnalogArcIndicator({
        'value': 200,
        'width': 20,
        'offset': 115,
        'color': fillRed,
        'noChange': true,
        'hideValues': true
    }));
    

    
/*gauge.addIndicator(new dojox.widget.gauge.AnalogArcIndicator({
            'value': 80,
            'width': 10,
            'offset': 150,
            'color': 'blue',
            'title': 'Arc',
            'hover': 'Arc: 80'
        }));
        */
    
    var limit = new dojox.widget.gauge.AnalogLineIndicator({
            value:100, 
            color:'#D00000', 
            width: 5,
            length: 85,
        hover:'Limite: 100', 
        title: 'Limite:',
            // Can use string to indicate easing function (just like in de
            easing: 'dojo.fx.easing.linear'
        });
    
    var ind = new dojox.widget.gauge.AnalogNeedleIndicator({
        'value': 180,
        'width': 5,
        'length': 80,
        'color': 'gray',
        'title': 'Mail/min',
        'hover': 'Mail/minute 100',
     //   easing: dojo.fx.easing.bounceOut
        easing: dojo.fx.easing.linear,
        duration:1999
    });

    gauge.addIndicator(ind);
      gauge.addIndicator(limit);

   ...