Mikhus/canvas-gauges

radial gauge needle in wrong spot

notsolowki opened this issue · 4 comments

notsolowki commented

What would cause the needle not to match up with the value? for example, a value of 100 shows 150 on the needle?

<!doctype html>
<html>
<head>
    <title>Testing Gauges</title>
    <script src="gauge.min.js"></script>
    <link rel="stylesheet" type="text/css" href="gauge.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<header>
<h1>Testing Gauge </h1>
</header> 


<div align="center">
<canvas id="gauge-ps"></canvas>
   
</div>
   
<script>   
     setInterval(function() { 
     GetADC();
   }, 1000);

   
function GetADC() {    
var xhttp = new XMLHttpRequest();
          var adc=0;
     xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
          adc = Number(this.responseText);
        //adc = this.responseText ;
      document.getElementById("demo").innerHTML = adc;
       gaugePS.value = adc;  //send DATA to needle
       }   
       };
     xhttp.open("GET", "/getADC", true);
     xhttp.send();
   }
   

    var gaugePS = new RadialGauge({
    renderTo: 'gauge-ps',
    width: 200,
    height: 200,
    units: "F",
    title: "Analog",
    minValue:0,
    maxValue: 260,
    majorTicks: [0,20,40,60,80,100,120,140,160,180,200,240,260,280,300],
    minorTicks: 10,
    strokeTicks: true,
    highlights: [
        {
            "from": 60,
            "to": 100,
            "color": "rgba(0,0, 255, .3)"
        },
        {
            "from": 190,
            "to": 260,
            "color": "rgba(255, 0, 0, .3)"
        }
    ],
    ticksAngle: 225,
    startAngle: 67.5,
    colorMajorTicks: "#ddd",
    colorMinorTicks: "#ddd",
    colorTitle: "#eee",
    colorUnits: "#ccc",
    colorNumbers: "#eee",
    colorPlate: "#222",
    borderShadowWidth: 0,
    borders: true,
    needleType: "arrow",
    needleWidth: 2,
    needleCircleSize: 7,
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: 100,
    animationRule: "linear",
    colorBorderOuter: "#333",
    colorBorderOuterEnd: "#111",
    colorBorderMiddle: "#222",
    colorBorderMiddleEnd: "#111",
    colorBorderInner: "#111",
    colorBorderInnerEnd: "#333",
    colorNeedleShadowDown: "#333",
    colorNeedleCircleOuter: "#333",
    colorNeedleCircleOuterEnd: "#111",
    colorNeedleCircleInner: "#111",
    colorNeedleCircleInnerEnd: "#222",
    valueBoxBorderRadius: 0,
    colorValueBoxRect: "#222",
    colorValueBoxRectEnd: "#333"
});
gaugePS.draw();

</script>

<p id="demo"></p>

</body>
</html>
slokhorst commented

The last of your majorTicks should be equal to your maxValue.

In your example, they differ (300 vs 260), so your gauge value would show up 300/260 = 1.15 times too high.

13karanyapas commented

What would cause the needle not to match up with the value? for example, a value of 100 shows 150 on the needle?

<!doctype html>
<html>
<head>
    <title>Testing Gauges</title>
    <script src="gauge.min.js"></script>
    <link rel="stylesheet" type="text/css" href="gauge.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<header>
<h1>Testing Gauge </h1>
</header> 


<div align="center">
<canvas id="gauge-ps"></canvas>
   
</div>
   
<script>   
     setInterval(function() { 
     GetADC();
   }, 1000);

   
function GetADC() {    
var xhttp = new XMLHttpRequest();
          var adc=0;
     xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
          adc = Number(this.responseText);
        //adc = this.responseText ;
      document.getElementById("demo").innerHTML = adc;
       gaugePS.value = adc;  //send DATA to needle
       }   
       };
     xhttp.open("GET", "/getADC", true);
     xhttp.send();
   }
   

    var gaugePS = new RadialGauge({
    renderTo: 'gauge-ps',
    width: 200,
    height: 200,
    units: "F",
    title: "Analog",
    minValue:0,
    maxValue: 260,
    majorTicks: [0,20,40,60,80,100,120,140,160,180,200,240,260,280,300],
    minorTicks: 10,
    strokeTicks: true,
    highlights: [
        {
            "from": 60,
            "to": 100,
            "color": "rgba(0,0, 255, .3)"
        },
        {
            "from": 190,
            "to": 260,
            "color": "rgba(255, 0, 0, .3)"
        }
    ],
    ticksAngle: 225,
    startAngle: 67.5,
    colorMajorTicks: "#ddd",
    colorMinorTicks: "#ddd",
    colorTitle: "#eee",
    colorUnits: "#ccc",
    colorNumbers: "#eee",
    colorPlate: "#222",
    borderShadowWidth: 0,
    borders: true,
    needleType: "arrow",
    needleWidth: 2,
    needleCircleSize: 7,
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: 100,
    animationRule: "linear",
    colorBorderOuter: "#333",
    colorBorderOuterEnd: "#111",
    colorBorderMiddle: "#222",
    colorBorderMiddleEnd: "#111",
    colorBorderInner: "#111",
    colorBorderInnerEnd: "#333",
    colorNeedleShadowDown: "#333",
    colorNeedleCircleOuter: "#333",
    colorNeedleCircleOuterEnd: "#111",
    colorNeedleCircleInner: "#111",
    colorNeedleCircleInnerEnd: "#222",
    valueBoxBorderRadius: 0,
    colorValueBoxRect: "#222",
    colorValueBoxRectEnd: "#333"
});
gaugePS.draw();

</script>

<p id="demo"></p>

</body>
</html>
snicklen commented

I had this same issue on a Raspberry Pi zero W, running an AJAX script that looped and pulled in values that fed to the gauges. It was a timing issue. I adjusted the gauge variable animationDuration until the values were correct. What's really strange is the value was correct in the text box, it's just the needle that gave a strange value. Hope that helps you.

scboard commented

I had the same issue, this is due to your code having missing intervals for the major ticks.

Currently is has

majorTicks: [0,20,40,60,80,100,120,140,160,180,200,240,260,280,300]

should be

majorTicks: [0,20,40,60,80,100,120,140,160,180,200,220,240,260,280,300]