How can I update variable and create variable drop-down lists via using HTML panel?

Grafana Dashboards
, , , ,
1

I am using HTML to create a drop-down list, but I don’t know how to make the selected value update the variable like it does when using the variable-panel in Grafana. Does anyone have any suggestions?

Noted: In the panel where I want the variable to update, I have already added the variable query

AND d.device IN ('$Device')

--------Variable--------
Name: Device
Preview of values:
mh00001
mh00002
mh00003
mh00004
mh00005
mh00006
mh00007
mh00008
mh00009
mh00010

----------HTML---------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="dropdown">
        <div class="square-box">Device</div>
        <select>
            <option disabled selected hidden>Select a Device</option>
            <option>Device 01</option>
            <option>Device 02</option>
            <option>Device 03</option>
            <option>Device 04</option>
            <option>Device 05</option>
            <option>Device 06</option>
            <option>Device 07</option>
            <option>Device 08</option>
            <option>Device 09</option>
            <option>Device 10</option>
        </select>
    </div>
</body>
</html>

image
image891×380 36.4 KB

2

Welcome @achinyam

Any reason you are not using the stock variable drop down?

3

The stock variable doesn’t look good, and I need to customize the style to match our project dashboard.

4

check this thread out about custom stuff
it is for datepicker but might help you with grabbing the values and using them.