Bokeh plot via XMLHttpRequest

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 http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html

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

Julian,

I think you would need to add the div to the DOM, and then also execute the script (possibly by also attaching the script to the DOM). The way things work is that that script searches for the div (by its id) and fills it with the appropriate plot. Typically this is done server side, by templating the script and div into an HTML response. Trying to do things this way seems interesting and I can't think of any reasons in could not work in principal, but this particular kind of attempt at embedding is also completely novel to me, so apologies I don't have much more concrete to suggest.

It's also possible to "reach into" an existing plot, and update its models, which causes the existing plot to update automatically. If you are just looking to change a couple of range values, that could potentially be quite a bit more efficient, although it would require structuring things a bit differently as well.

Bryan

···

On Apr 1, 2016, at 10:25 AM, [email protected] wrote:

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 http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html

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

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/c7cea0c8-abaf-4686-b89e-88b6457e7eda%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.