redline
Version:
Customizable html gauge
61 lines (45 loc) • 1.82 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Redline.js demo</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../dist/redline.min.css">
</head>
<body>
<h1>Redline.js demo</h1>
<div id="gauge"></div>
<p>Highly customizable HTML gauge</p>
<p><a href="https://github.com/dsblv/Redline.js">See ya on GitHub →</a></p>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="../dist/redline.min.js"></script>
<script>
$(function () {
var options = [{
aperture: 250,
position: 5,
marks: [{ caption: 'one', type: 'start' }, 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'],
innerMarks: true
}, {
aperture: 180,
position: 5,
marks: [
{ caption: 'R', type: 'red' },
{ caption: 'A', type: 'orange' },
{ caption: 'I', type: 'yellow' },
{ caption: 'N', type: 'green' },
{ caption: 'B', type: 'blue' },
{ caption: 'O', type: 'indigo' },
{ caption: 'W', type: 'violet' }
]
}
]
var gauge = $( '#gauge' ).redline(options[ 1*(Math.random() < .2) ]);
setInterval(function () {
var position = Math.round(Math.random()*(gauge.redline( 'get', 'marks' ).length - 1));
gauge.redline( 'point', position );
}, 1000);
});
</script>
</body>
</html>