MQTT Data in HTML panel

8

Hello @amotl,

You can use a text panel in html mode and use the Grafana API to insert or update data to a data source, see Is it possible to execute sql queries from grafana APIs?. As they say this is a not documented feature and can change in the future.

I created a text panel with this test:

<script type="text/javascript" language="javascript">
function UserAction() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "/api/tsdb/query", true);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.setRequestHeader("Authorization", "Bearer eyJrIjoiWG9RV1lpbXh0a3RHUkJKUHlaVVBON1Z5djVON05pZUoiLCJuIjoidGVzdGtleSIsImlkIjoxfQ==");
    xhttp.send(JSON.stringify({"from":"1598166093992","to":"1598187693992","queries":[{"refId":"A","intervalMs":60000,"maxDataPoints":1150,"datasourceId":1,"rawSql":"insert into table values (1)","format":"time_series"}]}));
    var response = JSON.parse(xhttp.responseText);
}
</script>
<button type="submit" onclick="UserAction()">Clickme</button>

This may be simpler I just copied the json from a wireshark capture. The Authorization header can be generated in the configuration section, API Keys.
Remember you will need to disable html sanitize in the configuration file.

Once the data is in the database it can be forwarded to the MQTT device with a python script and/or database trigger.

Best regards,
Justino.