Demo - Radial Gauges

by c1alexi

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.gauge.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">
    
  <div class="row">
    <div class="col-xs-6">
      <div class="gauge-holder">
       <div style="position: absolute;background-color:yellow">
          <div id="theGauge" class="gauge"></div>
       </div>
       <div style="position: absolute">
          <div id="internalGauge" class="gauge internal-gauge"></div>
       </div>
      </div>
    </div>
  </div>

</div>

CSS

.gauge-holder {
  width: 80%;
  height: 80%;
  padding: 30px;
  background: rgba(0, 0, 0, .02);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);  
}

.wj-gauge {
  width: 100%;
  height: 100%;
}
/*
.wj-radialgauge {
  height: 200px;
}
*/
.wj-inputnumber {
  width: 120px;
}
label {
  width: 100px;
  text-align: right;
}
body {
  margin-bottom: 24pt;
}


.gauge{
  /*position: relative;
  width: 100%;
  height: 100%;*/
}
.internal-gauge {
  padding: 20px;
}

JavaScript

onload = function() {

	// create the gauge
  var options = {
  	isReadOnly: true,
    showText: 'None',
    autoScale: true,
  	min: 0,
    max: 100,
    step: 5,
    value: 75,
    thickness: 0.2,
    sweepAngle: 360,
    valueChanged: function(s, e) {
    	value.value = s.value;
    },
    showRanges: false,
    ranges: [
    	{ min: 0, max: 33, color: 'red' },
    	{ min: 33, max: 66, color: 'yellow' },
    	{ min: 66, max: 100, color: 'green' },
    ]
  };
	var theGauge = new wijmo.gauge.RadialGauge('#theGauge', options);
	var internalGauge = new wijmo.gauge.RadialGauge('#internalGauge', options);
  
}