63 lines
1.5 KiB
HTML
63 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<script type="text/javascript" src="canvas-gauges/js/gauge.min.js"></script>
|
|
<script type="text/javascript" type="text/javascript">
|
|
|
|
|
|
function listener(){
|
|
// update the above chart...
|
|
var value = Math.round(Math.random() * 100);
|
|
gauge.value = value;
|
|
// Update the declarative chart...
|
|
document.getElementById("gauge-a").setAttribute("data-value", value);
|
|
}
|
|
|
|
|
|
var t2 = window.setInterval("listener()",100);
|
|
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="wrapper">
|
|
<p>Declarative approach w/ data- attributes</p>
|
|
<canvas data-type="radial-gauge" id="gauge-a"
|
|
data-width="300"
|
|
data-height="300"
|
|
data-units="Km/h"
|
|
data-value="40"
|
|
data-min-value="0"
|
|
data-start-angle="90"
|
|
data-ticks-angle="180"
|
|
data-value-box="false"
|
|
data-max-value="100"
|
|
data-major-ticks="0,20,40,60,80,100"
|
|
data-minor-ticks="2"
|
|
data-stroke-ticks="true"
|
|
data-highlights='[
|
|
{"from": 70, "to": 100, "color": "rgba(200, 50, 50, .75)"}
|
|
]'
|
|
data-color-plate="#fff"
|
|
data-border-shadow-width="0"
|
|
data-borders="false"
|
|
data-needle-type="arrow"
|
|
data-needle-width="2"
|
|
data-needle-circle-size="7"
|
|
data-needle-circle-outer="true"
|
|
data-needle-circle-inner="false"
|
|
data-animation-duration="800"
|
|
data-animation-rule="linear"
|
|
></canvas>
|
|
<hr/>
|
|
<p>JS-based approach.</p>
|
|
<canvas id="gauge"></canvas>
|
|
<p><a href="https://canvas-gauges.com/">
|
|
https://canvas-gauges.com/</a></p>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|