Dashboards with Dynamic Data (Python + Flask + Ajax)

A quick tutorial on setting up a simple web page with dynamically refreshed data. Ideal for simple dashboards or IoT displays.

NOTE: I’m not a web developer so there might be some JavaScript sins here and there.

Getting started, we’ll need to:

  1. Setup a web server with Flask.
  2. Create a simple web page with an Ajax callback.
1. Setup a web server with Flask.

First let’s install flask.

Now let’s create a boilerplate flask app. I’ve named my app.py.

Line 5-7 defines that our server will be using index.html for the “/” path (in this case http://localhost/). We haven’t yet created this file.

Line 9-13 defines another path (/ajax) that only responds to POST requests. This is where our Ajax call will POST back to once we have our page up and running.

Let’s launch our web server to ensure it is working (you may need to do this with sudo/root).

If you open http://localhost in your browser, you should see an error (TemplateNotFound: index.html). We’ll deal with that next.

2. Create a simple web page with an Ajax callback.

Now let’s create our index.html page. It is important that we create this file in the appropriate place. The render_template() function used in app.py will always look for a sub-directory called templates, where we can store different html pages.

Again, let’s use some simple html and javascript/ajax boilerplate.

Let’s follow the life cycle of variable1 and variable2 to understand what is going on here.

Line 37 and 38 are two simple variables; variable1 and variable2 with text values of variable1 and variable2. These are displayed when our page is initially loaded.

Line 27-32 handles gathering our two div variables by their IDs and posting them back to /ajax.

App.py receives these variables and is able to interact with them (app.py Line 11-12). You can reference these variables in a dictionary format.

App.py then responds to the ajax call (app.py Line 13). Using kwargs, we can pass back any dictionary formatted information we would like. Here we are simply updating variable1 and variable2 to say “updated1” and “updated2”.

Back within our ajax call, on Line 20-22, you can see ajax receiving this response as a JavaScript Object. We then update variable1 and variable2 with the newly received values. (JavaScript Objects are handled similarly to Python Dictionaries).

Lastly, in Line 5, you can see the frequency of this ajax call in ms (3000ms = 3s). Before Line 5, we could add “window.onload = loadXMLDoc()”, which would cause our ajax call to run immediately, but in this tutorial we would likely receive the updated values too quickly too notice the old ones.

Testing it out

If not already started, let’s start our web server.

Next, let’s navigate to our web page (http://localhost).
Initially, we should see the default values for variable1 and variable2.

After 3 seconds, our new values should populate.

Additionally, in our python/flask console, we should see the ajax POST being performed every 3 seconds, as well as the values being posted for variable1 and variable2.

Some helpful stuff

If you get stuck working with JavaScript (your ajax call), on most browsers you can hit F12 to view the JavaScript console. You can then log any variables to the console to see what they look like before being handled by ajax.

Similarly, in our python script it’s a good idea to print your ajax call variables to console to troubleshoot any issues.

This is a very simple example of manipulating variables; I would highly recommend calling functions and libraries outside of app.py to handle the processing of data.

Leave a Reply