0

I have developed a python web application using flask microframework. I have some interactive plots generated by Bokeh and some HTML5 tables. My question is how I can update my table and graph data on fly?

Should I use threading class and set the timer and then re run my code every couple of seconds and feed updated data entries to the table and graphs?

I also investigated flask-socketIO, but all I found is for sending and receiving Messages, Is there a way to use flask-socketIO for this purpose?

I also worked a little bit with Bokeh-server, should I go that direction? does it mean I need to run two servers? my flask web server and bokeh-server?

I am new to this kind of work. I appreciate if you can explain in detail what I need to do.

Hamid K
  • 983
  • 1
  • 18
  • 40
  • to get my new data, I can send a request to an executable (data server) running on my machine (e.g. using Command prompt: dataserver.exe localhost foo [name of my executable followed by my machine name and variable name]). I am new to JS and AJAX requests, can you provide any link to a tutorial which has this type of request, or any similar type of work. – Hamid K Feb 03 '16 at 22:16

2 Answers2

3

You really are asking two questions in one. Really, you have two problems here. First, you need a mechanism to periodically give the client access to updated data for your tables and charts. Second, you need the client to incorporate those updates into the page.

For the first problem, you have basically two options. The most traditional one is to send Ajax requests (i.e. requests that run in the background of the page) to the server on a regular interval. The alternative is to enhance your server with WebSocket, then the client can establish a permanent connection and whenever the server has new data it can push it to the client. Which option to use largely depends on your needs. If the frequency of updates is not too high, I would probably use background HTTP requests and not worry about adding Socket.IO to the mix, which has its own challenges. On the other side, if you need sort of a live, constantly updating page, then maybe WebSocket is a good idea.

Once the client has new data, you have to deal with the second problem. The way you deal with that is specific to the tables and charts that you are using. You basically need to write Javascript code that passes these new values that were received from the server into these components, so that the page is updated. Unfortunately there is no automatic way to cause an update. You can obviously throw the current page away and rebuild it from scratch with the new data, but that is not going to look nice, so you should probably find what kind of Javascript APIs these components expose to receive updates.

I hope this helps!

Miguel Grinberg
  • 65,299
  • 14
  • 133
  • 152
  • Thanks a lot for your valuable reply. – Hamid K Feb 04 '16 at 16:13
  • Do you have any example of implementing WebSocket to the flask webserver to establish the connection for data values? If I use flask-socketio is going to meet my needs? – Hamid K Feb 04 '16 at 19:51
  • 1
    Take a look at the example app in the Flask-SocketIO repository: https://github.com/miguelgrinberg/Flask-SocketIO/tree/master/example. In this app you can see how a client can send a message to the server, or viceversa. This works with HTTP requests (long polling) or WebSocket. – Miguel Grinberg Feb 04 '16 at 20:03
0

If you are already using d3.js (which I think if you are using bokeh you are) using the d3 timer is more optimal that using setInterval as it doesn't continue to run if the graph is not visible because it uses requestAnimationFrame. However, setInterval is easier to read in my opinion.

function getData(){
    $.get( "ajax/test.html", function( data ) {
      $( ".result" ).html( data );
    });
}

var getDataCallback = function() {
    return function() {
        getData();
        d3.timer(getDataCallback(), 1000);
        return true;
    }
};

d3.timer(getDataCallback(), 10000);
gdunstone
  • 101
  • 1
  • 7