Displaying a (changing) string beside a Plotly gauge

plotly.js
1

Hi. I am using Plotly to display a gauge on a webpage. Working great.

I would like to display some text beside the gauge which is updated when the gauge is updated.

I update my string variable (chgstatus_update) from the incoming data[1]. data[0] is used for the gauge.

How do I display this updating text field on my webpage within the Plotly code below?

Thanks!

document.addEventListener("DOMContentLoaded", function() {
    // Voltage Gauge Configurations
    var voltageData = [{
        domain: {
            x: [0, 1],
            y: [0, 1]
        },
        value: 12.5,
        title: {
            text: "Voltage"
        },
        type: "indicator",
        mode: "gauge+number",
        gauge: {
            bar: {
                color: "darkblue",
                thickness: 0.2
            },        
            
            axis: {
                range: [12, 15]
            },
            steps: [{
                    range: [12, 13],
                    color: "red"
                },
                {
                    range: [13.0, 13.1],
                    color: "skyblue"
                },
                {
                    range: [13.1, 13.2],
                    color: "lawngreen"
                },
                {
                    range: [13.2, 14.5],
                    color: "skyblue"
                },
                {
                    range: [14.5, 15],
                    color: "red"
                }
            ]
        }
    }];


    
    /////////////////  Heading: "Charge Level Status"  ///////////////////
    
   ///////////////// text:  chgstatus_update (is a STRING)  //////////////

    
    // Layout object that set's the size of our Gauge
    var layout = {
        width: 600,
        height: 450,
        margin: {
            t: 0,
            b: 0
        }
    };
    
    Plotly.newPlot('voltageDiv', voltageData, layout);
  ////////  Plotly.newPlot('dataDiv', dataData, layout);    ///// add something like this

});

// Callback function that will retrieve our latest sensor readings and redraw our Gauge with the latest readings
function updatePlot() {
    console.log("Updating chart");
    fetch(`/updateValues`)
        .then((response) => response.json())
        .then(data => {
            var voltage_update = {
                value: data[0]
            };
            Plotly.update("voltageDiv", voltage_update);

            var chgstatus_update = {
                value: data[1]  
            };
           ///////     Plotly.update("dataDiv", chgstatus_update);    /// How to display this string??
        })
}

// Continuos loop that runs evry 3 seconds to update our web page with the latest sensor readings
(function loop() {
    setTimeout(() => {
        updatePlot()
        loop();
    }, 3000);
})();

image
image1284×575 23.2 KB

2

FIrst option: with annotation
Second option: reduce the margin of your figure to 0, put the chart and a div containing your text in a div, set the CSS properly

SOmething like this:

html.Div([
    # This one for the title
    html.Div([]),  
     #this one is a container
    html.Div([
        dcc.Graph(),  # your chart
        html.Div(["your text"])
    ], style={"display":"grid", "grid-template-columns":"1fr 1fr"}) 
], style={"display":"grid", "grid-template-rows": "1cm 5cm"})
1 Like
3

Thanks very much!