Gauge needle is not animated with respect to the binded value

Sudhanthiralakshmi_M · October 24, 2023, 11:34am

Energy Gauge
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

[
  {
    "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": {
      "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": {}
          }
        ]
      }
    ]
  }
]

avaughn · October 24, 2023, 1:15pm

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.

Sudhanthiralakshmi_M · October 25, 2023, 11:39am

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

victordcq · October 25, 2023, 11:48am

Sudhanthiralakshmi_M:

"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%)

Sudhanthiralakshmi_M · October 25, 2023, 11:57am

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)

victordcq · October 25, 2023, 12:01pm

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

Sudhanthiralakshmi_M · October 25, 2023, 12:10pm

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

victordcq · October 25, 2023, 12:13pm

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.

Sudhanthiralakshmi_M · October 26, 2023, 6:58am

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

victordcq · October 26, 2023, 8:46am

Did you try this?