Old school D3 from simpler times

All examples By author By category About

glimpsedchaos

Full window Github gist

google style gauges using javascript d3.js v4

forked from tomerd's block: google style gauges using javascript d3.js

I made some minor updates to get this to work with d3 v4.

forked from bill-kidwell's block: google style gauges using javascript d3.js v4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
  	<head>
    	<meta http-equiv="content-type" content="text/html;charset=utf-8">
    	<title>d3.js gauges</title>
		
		<style>
		
			body
			{
			  	font: 10px arial;
			}
      .g_container{
                background-color: darkgrey;
          width: 475px;
        	height: 200px;
      }
		</style>
		
		<script src="https://d3js.org/d3.v5.min.js"></script>
		<script type="text/javascript" src="gauge.js"></script>

<script>
			var gauges = [];
			
			function createGauge(name, label, min, max, facecolor)
			{
				var config = 
				{
					size: 120,
					label: label,
					min: undefined != min ? min : 0,
					max: undefined != max ? max : 100,
					minorTicks: 5,
          facecolor: facecolor
				}
				
				var range = config.max - config.min;
				config.yellowZones = [{ from: config.min + range*0.75, to: config.min + range*0.9 }];
				config.redZones = [{ from: config.min + range*0.9, to: config.max }];
				
				gauges[name] = new Gauge(name + "GaugeContainer", config);
				gauges[name].render();
			}
			 
			function createGauges()
			{
				createGauge("memory", "Memory", null,null,"lightgrey");
				createGauge("cpu", "CPU", null,null,"lightgrey");
				createGauge("network", "Network", null,null,"lightgrey");
				createGauge("test", "Test", null,null,"lightsteelblue" );
			}
			
			function updateGauges()
			{
				for (var key in gauges)
				{
					var value = getRandomValue(gauges[key])
					gauges[key].redraw(value);
				}
			}
			
			function getRandomValue(gauge)
			{
				var overflow = 0; //10;
				return gauge.config.min - overflow + (gauge.config.max - gauge.config.min + overflow*2) *  Math.random();
			}
			
			function initialize()
			{
				createGauges();
				setInterval(updateGauges, 5000);
			} 
      
		</script>
		  
		
	</head>
	
	<body onload="initialize()">
    <div class="g_container">
		<span id="memoryGaugeContainer"></span>
		<span id="cpuGaugeContainer"></span>
     <span id="networkGaugeContainer"></span>
		<span id="testGaugeContainer"></span>
    
    </div>
      </body>
	
</html>

https://d3js.org/d3.v5.min.js