I am creating a Jquery Gauge. In this way, the largest value of the arc is '100', but if I set the pointer value to '110', it overflows the arc limit, like the image:
Someway to resolve this problem or set a 'max value'/'range' for the pointer?
NOTE: The pointer can't exceed the arc limit.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Gauge 8</title>
<meta name="viewport" content="width=1024, maximum-scale=1">
<link href="jquery-gauge.css" type="text/css" rel="stylesheet">
<style>
.demo1 {
position: relative;
width: 10vw;
height: 10vw;
box-sizing: border-box;
float:left;
margin:20px
}
.demo3 {
position: relative;
width: 9vw;
height: 9vw;
box-sizing: border-box;
float:left;
margin:20px
}
</style>
</head>
<body>
<div class="gauge3 demo3"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-gauge.min.js"></script>
<script type="text/javascript">
$('.gauge3').gauge({
values: {
0 : '0',
25: '25',
50: '50',
75: '75',
100: '100'
},
colors: {
0 : 'green',
30: 'orange',
40: 'red'
},
angles: [
180,
360
],
lineWidth: 9,
arrowWidth: 5,
arrowColor: 'black',
inset:true,
value: 110
});
</script>
<div class="gauge1 demo1"></div>
</body>
</html>