javascripthtmlplotlyplotly.js

Plotly change value of "reference:"


I want to change the value of the "reference" tag off a gauge in my ESP32 code. The gauge:

var humidityData = [
  {
    domain: { x: [0, 1], y: [0, 1] },
    value: 0,
    title: { text: "Feuchtigkeit" },
    type: "indicator",
    mode: "gauge+number+delta",
    delta: { reference: 69 },
    gauge: {
      axis: { range: [40, 103] },
      steps: [
        { range: [10, 65], color: "red" },
        { range: [65, 68], color: "yellow" },
        { range: [68, 75], color: "lightgreen" },
        { range: [75, 78], color: "yellow" },
        { range: [78, 103], color: "red" },
      ],
    },
  },
];

The code that should update the reference:

function updateGauge(temperature, humidity, humidity_soll) {
  var temperature_update = {
    value: temperature,
  };
  var humidity_update = {
    value: humidity,
    reference: humidity_soll,
  };
  Plotly.update(temperatureGaugeDiv, temperature_update);
  Plotly.update(humidityGaugeDiv, humidity_update);
}

But the reference is still the initial one. It is not updated by the function with the new value from the json i handed over correctly. Changing the simple "value" tag ist no problem. But the "reference" tag is not updated. Maybe I have to do this another way? Any suggestions for me? Its my first implementation of plotly.io so far. So sorry for the noob question...

Kind regards Frank


Solution

  • You are trying to update the gauge by passing a new reference value at the top level of the update object. But, Plotly expects the reference value to be nested under the delta attribute, matching the structure used when you first defined the chart, so you need to use 'delta.reference' as a key.

    function updateGauge(temperature, humidity, humidity_soll) {
      var temperature_update = {
        value: temperature,
      };
    
      var humidity_update = {
        value: humidity,
        'delta.reference': humidity_soll,
      };
    
      Plotly.update(temperatureGaugeDiv, [temperature_update]);
      Plotly.update(humidityGaugeDiv, [humidity_update]);
    }