# Gauge needle is not animated with respect to the binded value

**URL:** <https://forum.inductiveautomation.com/t/gauge-needle-is-not-animated-with-respect-to-the-binded-value/80896>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 24, 2023, 11:34am UTC](https://forum.inductiveautomation.com/t/gauge-needle-is-not-animated-with-respect-to-the-binded-value/80896 "2023-10-24T11:34:01Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sudhanthiralakshmi\_M](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@Sudhanthiralakshmi\_M](https://forum.inductiveautomation.com/u/Sudhanthiralakshmi_M)\
**Post date:** [October 24, 2023, 11:34am UTC](https://forum.inductiveautomation.com/t/gauge-needle-is-not-animated-with-respect-to-the-binded-value/80896/1 "2023-10-24T11:34:01Z")

</div>

![Energy Gauge](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/6/f64fd03a44562a0a4650bb06a5a914999d522a66.jpeg)  
Here the Simple gauge needle is not updated with respect to the value binded.  
please refer the following gauge property configuration and give the needful suggestions

```auto
[
  {
    "type": "ia.chart.gauge",
    "version": 0,
    "props": {
      "outerAxis": {
        "width": 5,
        "color": "#000000",
        "ranges": [
          {
            "start": 0,
            "end": 30000,
            "width": 8,
            "color": "#808080"
          }
        ],
        "needle": {
          "reach": 90,
          "color": "#000000"
        },
        "tickMarks": {
          "color": "#000000"
        },
        "data": "value",
        "percentRadius": 100,
        "show": true
      },
      "innerAxis": {
        "maxValue": 80,
        "width": 5,
        "color": "#FFCA8A",
        "ranges": [
          {
            "start": 0,
            "end": 0,
            "width": 5,
            "color": "#FF47FF"
          }
        ],
        "needle": {
          "color": "#808080"
        },
        "tickMarks": {
          "color": "#808080",
          "thickness": 0
        },
        "data": "secondaryValue",
        "percentRadius": 85,
        "show": false
      },
      "animate": true,
      "style": {
        "classes": [],
        "color": "#000000",
        "fontFamily": "Arial",
        "fontSize": 10,
        "fontWeight": "900",
        "letterSpacing": "0.5",
        "textAlign": "center",
        "wordSpacing": 0.5,
        "wordWrap": "normal"
      },
      "backgroundColor": "#D5D5D5"
    },
    "meta": {
      "name": "Gauge_0"
    },
    "position": {
      "basis": "161px"
    },
    "custom": {},
    "propConfig": {
      "props.outerAxis.maxValue": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "1.15*{this.props.value}"
          },
          "transforms": [
            {
              "expression": "tofloat({value})",
              "type": "expression"
            }
          ]
        }
      },
      "props.outerAxis.minValue": {
        "binding": {
          "type": "expr",
          "overlayOptOut": true,
          "config": {
            "expression": "0.85*{this.props.value}"
          },
          "transforms": [
            {
              "expression": "tofloat({value})",
              "type": "expression"
            }
          ]
        }
      },
      "props.value": {
        "binding": {
          "type": "query",
          "config": {
            "returnFormat": "scalar",
            "polling": {
              "enabled": true,
              "rate": "300"
            },
            "queryPath": "Online_KWH",
            "parameters": {
              "ll": "{..../Line_Dropdown.props.value}",
              "st": "{..../DateTimeInput.props.value}",
              "ma": "{..../Machine_Dropdown.props.value}",
              "bg": "{..../BG_Dropdown.props.value}",
              "pl": "{..../Plant_Dropdown.props.value}",
              "sp": "dateArithmetic({..../DateTimeInput.props.value},18,\"hours\")"
            }
          }
        }
      }
    }
  }
]

```

```auto

```

```auto
[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {
      "direction": "column",
      "justify": "space-between",
      "style": {
        "overflow": "visible",
        "backgroundColor": "#CCCCFF",
        "borderColor": "#D5D5D5",
        "borderStyle": "groove",
        "color": "#000000"
      }
    },
    "meta": {
      "name": "EnergyContainer"
    },
    "position": {
      "basis": "315px"
    },
    "custom": {},
    "children": [
      {
        "type": "ia.display.label",
        "version": 0,
        "props": {
          "text": "Energy",
          "style": {
            "fontSize": 20,
            "fontWeight": "bolder",
            "textAlign": "center"
          }
        },
        "meta": {
          "name": "Label"
        },
        "position": {
          "basis": "50px"
        },
        "custom": {}
      },
      {
        "type": "ia.chart.gauge",
        "version": 0,
        "props": {
          "outerAxis": {
            "width": 5,
            "color": "#000000",
            "ranges": [
              {
                "start": 0,
                "end": 30000,
                "width": 8,
                "color": "#808080"
              }
            ],
            "needle": {
              "reach": 90,
              "color": "#000000"
            },
            "tickMarks": {
              "color": "#000000"
            },
            "data": "value",
            "percentRadius": 100,
            "show": true
          },
          "innerAxis": {
            "maxValue": 80,
            "width": 5,
            "color": "#FFCA8A",
            "ranges": [
              {
                "start": 0,
                "end": 0,
                "width": 5,
                "color": "#FF47FF"
              }
            ],
            "needle": {
              "color": "#808080"
            },
            "tickMarks": {
              "color": "#808080",
              "thickness": 0
            },
            "data": "secondaryValue",
            "percentRadius": 85,
            "show": false
          },
          "animate": true,
          "style": {
            "classes": [],
            "color": "#000000",
            "fontFamily": "Arial",
            "fontSize": 10,
            "fontWeight": "900",
            "letterSpacing": "0.5",
            "textAlign": "center",
            "wordSpacing": 0.5,
            "wordWrap": "normal"
          },
          "backgroundColor": "#D5D5D5"
        },
        "meta": {
          "name": "Gauge_0"
        },
        "position": {
          "basis": "161px"
        },
        "custom": {},
        "propConfig": {
          "props.outerAxis.maxValue": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "1.15*{this.props.value}"
              },
              "transforms": [
                {
                  "expression": "tofloat({value})",
                  "type": "expression"
                }
              ]
            }
          },
          "props.outerAxis.minValue": {
            "binding": {
              "type": "expr",
              "overlayOptOut": true,
              "config": {
                "expression": "0.85*{this.props.value}"
              },
              "transforms": [
                {
                  "expression": "tofloat({value})",
                  "type": "expression"
                }
              ]
            }
          },
          "props.value": {
            "binding": {
              "type": "query",
              "config": {
                "returnFormat": "scalar",
                "polling": {
                  "enabled": true,
                  "rate": "300"
                },
                "queryPath": "Online_KWH",
                "parameters": {
                  "ll": "{..../Line_Dropdown.props.value}",
                  "st": "{..../DateTimeInput.props.value}",
                  "ma": "{..../Machine_Dropdown.props.value}",
                  "bg": "{..../BG_Dropdown.props.value}",
                  "pl": "{..../Plant_Dropdown.props.value}",
                  "sp": "dateArithmetic({..../DateTimeInput.props.value},18,\"hours\")"
                }
              }
            }
          }
        }
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {
          "justify": "center"
        },
        "meta": {
          "name": "FlexContainer"
        },
        "position": {
          "basis": "59px"
        },
        "custom": {},
        "children": [
          {
            "type": "ia.display.label",
            "version": 0,
            "props": {
              "style": {
                "borderStyle": "none",
                "fontSize": 20,
                "fontWeight": "bolder",
                "textAlign": "center",
                "textOverflow": "ellipsis",
                "textShadow": "#D5D5D5"
              }
            },
            "meta": {
              "name": "Label_0"
            },
            "position": {
              "basis": "81px"
            },
            "custom": {},
            "propConfig": {
              "props.text": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": ".../Gauge_0.props.value"
                  },
                  "transforms": [
                    {
                      "formatType": "numeric",
                      "formatValue": "number",
                      "type": "format"
                    }
                  ]
                }
              }
            }
          },
          {
            "type": "ia.display.label",
            "version": 0,
            "props": {
              "text": "kWh",
              "style": {
                "fontSize": 20,
                "fontWeight": "bolder",
                "textAlign": "center"
              }
            },
            "meta": {
              "name": "Label_1"
            },
            "position": {
              "basis": "50px"
            },
            "custom": {}
          }
        ]
      }
    ]
  }
]

```

```auto

```

---

<div class="post-metadata">

**Author:** ![avaughn](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/avaughn/32/38972_2.png) [@avaughn](https://forum.inductiveautomation.com/u/avaughn)\
**Post date:** [October 24, 2023, 1:15pm UTC](https://forum.inductiveautomation.com/t/gauge-needle-is-not-animated-with-respect-to-the-binded-value/80896/2 "2023-10-24T13:15:00Z")

</div>

Do you see the needle point to the correct value if you set animate to false?

If so, I believe you are running into a known bug that was fixed in version 8.1.33.

> [@\[Bug-3513\] Perspective Gauge Needle Resets to 0 Angle](https://forum.inductiveautomation.com/t/bug-3513-perspective-gauge-needle-resets-to-0-angle/58486/7):
>
> Hey Frosty! This forum post would act as the public page to track the bug for this issue. As of this time, there are no updates yet. I'll go ahead and bump the bug again and add your name.

---

<div class="post-metadata">

**Author:** ![Sudhanthiralakshmi\_M](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@Sudhanthiralakshmi\_M](https://forum.inductiveautomation.com/u/Sudhanthiralakshmi_M)\
**Post date:** [October 25, 2023, 11:39am UTC](https://forum.inductiveautomation.com/t/gauge-needle-is-not-animated-with-respect-to-the-binded-value/80896/3 "2023-10-25T11:39:28Z")

</div>

Animate is set to true only.. But it is not updated yet

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 25, 2023, 11:48am UTC](https://forum.inductiveautomation.com/t/gauge-needle-is-not-animated-with-respect-to-the-binded-value/80896/4 "2023-10-25T11:48:58Z")

</div>

> [@Sudhanthiralakshmi\_M](#):
>
> ```auto
> "props.outerAxis.maxValue": {
> "binding": {
> "type": "expr",
> "config": {
> "expression": "1.15*{this.props.value}"
> },
> "transforms": [
> {
> "expression": "tofloat({value})",
> "type": "expression"
> }
> ]
> }
> },
> "props.outerAxis.minValue": {
> "binding": {
> "type": "expr",
> "overlayOptOut": true,
> "config": {
> "expression": "0.85*{this.props.value}"
> },
> "transforms": [
> {
> "expression": "tofloat({value})",
> "type": "expression"
> }
> ]
> }
> },
> 
> ```

Updating your max and min values seems like a bad idea, whats the goal of this?  
This is probably causing the issue, but even if it did work, this would make it always point in basicly one direction, up.  
Becuase it would always be in the middle of the range (value-15%,value,value+15%)

---

<div class="post-metadata">

**Author:** ![Sudhanthiralakshmi\_M](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@Sudhanthiralakshmi\_M](https://forum.inductiveautomation.com/u/Sudhanthiralakshmi_M)\
**Post date:** [October 25, 2023, 11:57am UTC](https://forum.inductiveautomation.com/t/gauge-needle-is-not-animated-with-respect-to-the-binded-value/80896/5 "2023-10-25T11:57:17Z")

</div>

if my value is exceeded the predefined min and max range the needle goes beyond the range so we fix the expression to min and max to take (- 15% of value for min range) and (+15% of value for max range)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 25, 2023, 12:01pm UTC](https://forum.inductiveautomation.com/t/gauge-needle-is-not-animated-with-respect-to-the-binded-value/80896/6 "2023-10-25T12:01:13Z")

</div>

This is wrong, it makes the gauge useless, it will always point up.  
If you cannot define a max value, you have no use for the gauge.  
Either you find the max value the machine (or whatever it is) can handle, or you use a history tag to find the max value you had so far, then you can compare the current value with the maxvalue ever (or from the past month/week) achieved.

See, it will always point straight up, its useless to have a gaugeu then  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/6/86cf798c208269ff3714f26f7af2f3cea695fbd2.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/8/38233e80c0830fd814d3c11e1c87590079770baf.png)

---

<div class="post-metadata">

**Author:** ![Sudhanthiralakshmi\_M](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@Sudhanthiralakshmi\_M](https://forum.inductiveautomation.com/u/Sudhanthiralakshmi_M)\
**Post date:** [October 25, 2023, 12:10pm UTC](https://forum.inductiveautomation.com/t/gauge-needle-is-not-animated-with-respect-to-the-binded-value/80896/7 "2023-10-25T12:10:53Z")

</div>

Does this min max gauge expression binding affects the needle to sets to angle 0?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 25, 2023, 12:13pm UTC](https://forum.inductiveautomation.com/t/gauge-needle-is-not-animated-with-respect-to-the-binded-value/80896/8 "2023-10-25T12:13:40Z")

</div>

No, idk why its 0. that is probably related to the fixed bug.  
But it will always set it to 50% if it would work. So you might aswell turn of the animation

i just took your first code example and change the value binding to the slider value prop.

Eitherway its wrong to do these min max value bindings like this with a gauge.

---

<div class="post-metadata">

**Author:** ![Sudhanthiralakshmi\_M](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@Sudhanthiralakshmi\_M](https://forum.inductiveautomation.com/u/Sudhanthiralakshmi_M)\
**Post date:** [October 26, 2023, 6:58am UTC](https://forum.inductiveautomation.com/t/gauge-needle-is-not-animated-with-respect-to-the-binded-value/80896/9 "2023-10-26T06:58:13Z")

</div>

but the needle expects an event change or some sort of action to update to its position. if anyone knows about this bug kindly give suggestions regarding this

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 26, 2023, 8:46am UTC](https://forum.inductiveautomation.com/t/gauge-needle-is-not-animated-with-respect-to-the-binded-value/80896/10 "2023-10-26T08:46:07Z")

</div>

Did you try this?

> [@avaughn](#):
>
> Do you see the needle point to the correct value if you set animate to false?
> 
> If so, I believe you are running into a known bug that was fixed in version 8.1.33.