Demo - Wijmo Gauges

by Joel Parks

HTML

<link rel="stylesheet" href="https://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>
<div class="container">
    
  <h1>
    Wijmo Gauges</h1>
  <p>
    Gauges are used to display single values. They are often used 
    in dashboards, and use segmenting and color coding to present 
    values in a clear and easy to read way.</p>
  <p>    
    Wijmo gauges are streamlined. They were designed to be easy to
    use and to read, especially on small-screen devices.</p>
  <p>    
    Wijmo gauges can also be used as input controls. If you set
    their "isReadOnly" property to false, users will be able to
    change the value using the mouse, keyboard, or touch.</p>
  <p>
    Wijmo includes three types of gauge: <b>RadialGauge</b>,
    <b>LinearGauge</b>, and <b>BulletGraph</b>.</p>
    
  <h3>
    Radial Gauges</h3>
  <p>
    A radial gauge displays a metric as a percentage of the length
    of a circular scale, like a pie or donut chart with a single 
    slice. By default, the radial scale displays a 180-degree arc.
    You can change that by adjusting its start and sweep angles.</p>    
  <div id="theRadialGauge"></div>
  <h3>
    Linear Gauges</h3>
  <p>
    Linear gauges are characterized by a linear scale which can be
    horizontal or vertical.</p>
  <div id="theLinearGauge"></div>
  <h3>
    Bullet Graphs</h3>
  <p>
    Bullet graphs are a variation on linear gauges that displays actual
    and target values. It may also show ranges that identify whether
    the actual or current value is good or bad.</p>
  <p>
    Bullet graphs convey information in a compact space, making them ideal 
    for dashboards that need to display groups of single-valued metrics
    such as the...

CSS

.wj-gauge {
    padding:4px;
    width: 80%;
    margin: 6px auto 36px auto;
}
.wj-radialgauge {
    height: 200px;
}
body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

	var theRadialGauge = new wijmo.gauge.RadialGauge('#theRadialGauge', {
  	min: 0,
    max: 100,
    value: 75,
    isReadOnly: false,
    step: 10,
    showRanges: true,
    ranges: { 
    	pointerThickness: 0.5,
      lower: { min: 0, max: 33, color: 'rgba(255,100,100,.5)' },
      middle: { min: 33, max: 66, color: 'rgba(255,255,100,.5)' },
      upper: { min: 66, max: 100, color: 'rgba(100,255,100,.5)' } }
  });
	var theLinearGauge = new wijmo.gauge.LinearGauge('#theLinearGauge', {
  	min: 0,
    max: 100,
    value: 75,
    step: 10,
    showText: 'MinMax',
    isReadOnly: false,
    step: 10
  });
	var theBulletGraph = new wijmo.gauge.BulletGraph('#theBulletGraph', {
  	min: 0,
    max: 100,
    value: 75,
    target: 60,
    bad: 50,
    good: 70,
    showText: 'MinMax'
  });
}