Hi,
I’m trying to embed a bokeh plot into a grafana dashboard (http://grafana.org/) via its html panel.
When time range is selected in grafana via the date time picker, I want to update the bokeh plot.
I managed to send the time range via XMLHttpRequest to a cherrypy server and receive the bokeh plot components (script and plot div) as described in Embedding Bokeh content — Bokeh 2.4.2 Documentation
However, I don’t know how to handle the XMLHttpRequest.responseText.
I guess this is more of a Javascript question, but I thought someone here might be able to help me out.
The template site looks something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
function sendData() {
var XHR = new XMLHttpRequest();
var urlEncodedData = "";
var urlEncodedDataPairs = [];
// This will be replaced by grafana times
var time1 = "test1"
var time2 = "testtime2"
// We turn the data object into an array of URL encoded key value pairs.
urlEncodedDataPairs.push(encodeURIComponent("time1") + '=' + encodeURIComponent(time1));
urlEncodedDataPairs.push(encodeURIComponent("time2") + '=' + encodeURIComponent(time2));
// We combine the pairs into a single string and replace all encoded spaces to
// the plus character to match the behaviour of the web browser form submit.
urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
// We setup our request
XHR.open('POST', 'http://localhost:8080/generate');
// We add the required HTTP header to handle a form data POST request
XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//XHR.setRequestHeader('Content-Length', urlEncodedData.length);
XHR.onload = function () {
if (XHR.readyState === XHR.DONE) {
if (XHR.status === 200) {
document.getElementById("response").innerHTML = XHR.responseText;
}
}
};
// And finally, We send our data.
XHR.send(urlEncodedData);
}
</script>
</head>
Python Server Response: <p id="response"></p>
<button onclick="sendData()">Update</button>
</html>
The XHR.responseText contains bokeh components, but nothing happens, and I also don’t see any error message when debugging the site.
I’m not very familiar with either of the involved weblanguages like html or javascript, my apologies for that.
Any advice?
Thank you,
Julian