<!DOCTYPE html> <html> <head> <title>Gauges</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="HandheldFriendly" content="True" /> <meta name="MobileOptimized" content="480" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="theme-color" content="#2f434e" /> <meta http-equiv="cleartype" content="on" /> <link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="dark.css" /> <style> .example { overflow: auto; padding: 10px; box-sizing: border-box; clear: both; } .example > .code, .example > .display { box-sizing: border-box; padding: 10px; } .example > .code { } .example > .display { text-align: center; overflow: auto; padding: 20px 0; overflow: hidden; } .example > .display { } pre { padding: 0; margin: 0; } #gauge1 .value-text { font-size: 6em; } @media only screen and (min-device-width: 768px) { .example > .code { width: 65%; } .example > .display { width: 35%; } .example > .code { float: left; } .example > .display { float: right; padding: 10px; } } </style> <script type="text/javascript" src="highlight.pack.js"> </script> <script>hljs.initHighlightingOnLoad();</script> </head> <body> <h2>SVG Gauge</h2> <h4>Minimalistic, zero dependency animated gauge widget</h4> <p> All the guages are styled via CSS. See gauge-test.css for styling for each of these gauges below. </p> <div class="example"> <div class="code"> <pre> <code class="html"> <!-- Unstyled gauge (All defaults) --> <div id="gauge0" class="gauge-container"></div> </code> <code class="javascript"> var gauge0 = Gauge(document.getElementById("gauge0")); </code> </pre> </div> <div class="display"> <div id="gauge0" class="gauge-container"></div> </div> </div> <div class="example"> <div class="code"> <pre> <code class="html"> <div id="gauge1" class="gauge-container"></div></code> <code class="javascript"> var gauge1 = Gauge( document.getElementById("gauge1"), { max: 100, dialStartAngle: -90, dialEndAngle: -90.001, value: 100, label: function(value) { return Math.round(value) + "/" + this.max; } } ); </code> </pre> </div> <div class="display"> <div id="gauge1" class="gauge-container one"></div> </div> </div> <div class="example"> <div class="code"> <pre> <code class="html"> <div id="gauge2" class="gauge-container two"></div> </code> <code class="javascript"> var gauge2 = Gauge( document.getElementById("gauge2"), { max: 100, dialStartAngle: 180, dialEndAngle: 0, value: 50 } ); </code> </pre> </div> <div class="display"> <div id="gauge2" class="gauge-container two"></div> </div> </div> <div class="example"> <div class="code"> <pre> <code class="html"> <div id="gauge3" class="gauge-container three"></div> </code> <code class="javascript"> var gauge3 = Gauge( document.getElementById("gauge3"), { max: 100, value: 50 } ); </code> </pre> </div> <div class="display"> <div id="gauge3" class="gauge-container three"></div> </div> </div> <div class="example"> <div class="code"> <pre> <code class="html"> <div id="gauge4" class="gauge-container four"></div> </code> <code class="javascript"> var gauge4 = Gauge( document.getElementById("gauge4"), { max: 100, dialStartAngle: 180, dialEndAngle: -90, value: 50 } ); </code> </pre> </div> <div class="display"> <div id="gauge4" class="gauge-container four"></div> </div> </div> <div class="example"> <div class="code"> <pre> <code class="html"> <div id="gauge5" class="gauge-container five"></div> </code> <code class="javascript"> var gauge5 = Gauge( document.getElementById("gauge5"), { max: 200, dialStartAngle: 0, dialEndAngle: -180, value: 50 } ); </code> </pre> </div> <div class="display"> <div id="gauge5" class="gauge-container five"></div> </div> </div> <div class="example"> <div class="code"> <pre> <code class="html"> <div id="gauge6" class="gauge-container six"></div> </code> <code class="javascript"> var gauge6 = Gauge( document.getElementById("gauge6"), { max: 100, dialStartAngle: 90.01, dialEndAngle: 89.99, radius: 150, displayValue: false, value: 50, } ); </code> </pre> </div> <div class="display"> <div id="gauge6" class="gauge-container six"></div> </div> </div> <script type="text/javascript" src="../src/gauge.js"> </script> <script> var gauge0 = Gauge(document.getElementById("gauge0")); var gauge1 = Gauge( document.getElementById("gauge1"), { max: 100, dialStartAngle: -90, dialEndAngle: -90.001, value: 100, label: function(value) { return Math.round(value) + "/" + this.max; } } ); var gauge2 = Gauge( document.getElementById("gauge2"), { max: 100, dialStartAngle: 180, dialEndAngle: 0, value: 50 } ); var gauge3 = Gauge( document.getElementById("gauge3"), { max: 100, value: 50 } ); var gauge4 = Gauge( document.getElementById("gauge4"), { max: 100, dialStartAngle: 180, dialEndAngle: -90, value: 50 } ); var gauge5 = Gauge( document.getElementById("gauge5"), { max: 200, dialStartAngle: 0, dialEndAngle: -180, value: 50 } ); var gauge6 = Gauge( document.getElementById("gauge6"), { max: 100, dialStartAngle: 90.01, dialEndAngle: 89.99, radius: 150, showValue: false, value: 100 } ); (function loop() { var value1 = Math.round(Math.random() * 100), value2 = Math.round(Math.random() * 100), value3 = Math.round(Math.random() * 100), value4 = Math.round(Math.random() * 100), value5 = Math.round(Math.random() * 200); gauge0.setValueAnimated(value1, 1); gauge1.setValueAnimated(value1, 1); gauge2.setValueAnimated(value2, 2); gauge3.setValueAnimated(value3, 1.5); gauge4.setValueAnimated(value4, 2); gauge5.setValueAnimated(value5, 1); gauge6.setValueAnimated(value1, 1); window.setTimeout(loop, 2500); })(); </script> </body> </html>