Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

radial gauge needle in wrong spot #224

Open
notsolowki opened this issue Sep 4, 2020 · 4 comments
Open

radial gauge needle in wrong spot #224

notsolowki opened this issue Sep 4, 2020 · 4 comments

Comments

@notsolowki
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

scboard commented Apr 19, 2021

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]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@slokhorst @scboard @notsolowki @13karanyapas @snicklen