Gauge Tests

by Fred Fourie

HTML

<script src="https://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
		<div id =  "oil" class="element_L" style="width:220px">
		<div id="oilTitle" class="gauge_title">OIL COMPENSATOR LEVEL</div>
		<canvas id="oilGauge" class="gauge"></canvas>
    <div id="oilGaugeNumber" class="gauge_number_vertical">--</div>
		</div>

CSS

.element_L {
  position: relative;
  color: #fff;
  float: left;
 /* width: 140px;
  height: 130px;*/
  margin: 0px 0px 0px 0;
	/*margin-left: 20px;*/
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  clear: both;
  z-index:2;
}

.gauge_number_vertical{
  position: absolute;
	top: 160px;
	left: 0;
	right: 0;
  text-align: center;
	center;
	font-size: 2em;
	font-weight: bold;
  color: black;
	font-family: 'Amaranth',
	sans-serif;
}

.gauge_title{
	 position: absolute; top: 15px; left: 0; right: 0;
  text-align: center; font-size: 1em; font-weight: bold;
  color: black; font-family: 'Amaranth', sans-serif;
}

.gauge{
margin-top: 60px;
margin-right: 100px;
}

JavaScript

// Create the regular gauges
var opts2 = {
  lines: 12, // The number of lines to draw
  angle: 0.0, // The length of each line
  lineWidth: 0.06, // The line thickness
  pointer: {
    length: 0.8, // The radius of the inner circle
    strokeWidth: 0.035, // The rotation offset
    color: '#000000' // Fill color
  },
  limitMax: 'false',   // If true, the pointer will not go past the end of the gauge
  colorStart: '#6FADCF',   // Colors
  colorStop: '#6FADCF',    // just experiment with them
  strokeColor: '#E0E0E0',   // to see which ones work best for you
  generateGradient: false
};
var speed = 3;
var target = document.getElementById('oilGauge'); // your canvas element
var gaugeOil = new Donut(target).setOptions(opts2); // create sexy gauge!
gaugeOil.maxValue = 100; // set max gauge value
gaugeOil.animationSpeed = speed; // set animation speed (32 is default value)
gaugeOil.set(50); // set default value