Widgets in Interactive Bokeh Server Apps

A free video tutorial from Ardit Sulce
Python Programmer. Founder and Author, PythonHow.
Rating: 4.6 out of 5Instructor rating
6 courses
408,856 students
Widgets in Interactive Bokeh Server Apps

Lecture description

Learn how to create user widgets besides Bokeh server charts.

Learn more from the full course

Interactive Data Visualization with Python and Bokeh

A complete guide on creating beautiful plots and data dashboards on the browser using the Python Bokeh library.

06:32:48 of on-demand video • Updated November 2021

Build advanced data visualization web apps using the Python Bokeh library.
Create interactive modern web plots that represent your data impressively.
Create widgets that let users interact with your plots.
Learn all the available Bokeh styling features.
Integrate and visualize data from Pandas DataFrames.
Create dynamic graphs that plot real-time data.
Plot time-series data.
Integrate your data visualization apps with Flask apps.
Deploy the apps in live servers.
Learn how to troubleshoot Bokeh apps.
Great, we built this interface in the previous lecture. And this is a button and a widget. But it also has a an output widget in here which doesn't work. And the reason it doesn't work is that we're running this using a simple Bokeh. So if you look at the command line what I did is I run the Python code, the Python code runs, and it generates this HTML file, and then the Python code stops. So there's no more connection to the Python code. That means all you have now is of this code. So this HTML and Javascript code. Therefore whenever you enter something here, let's say Bokeh, and it generates, you click the generate test button, you know this function here will not be executed because the connection to the Python code, to the Python script has been interrupted as you can see in the command line. So the Python code is executed, and then the script stays somewhere in your computer and also there is no Javascript function in the code, in the source code to create such dynamic text in here. So you'd expect to have. So hello and the value that the user inputs in here. So that would be. Hello Bokeh. So to do that you need to have a connection, a continuous connection to the Python code. You can do that using Bokeh server. So let's go ahead and quickly do that. But before you need to change a few things in here. This code stays the same. All we have to change is you need to remove this code, so you don't create an HTML file. You don't create a static HTML file anymore, and you don't need the show method either. I'm going to delete that. What you need instead of this is curdoc. So curdoc is an object that points to the current document. So to the document that will be displayed on the browser, and all you have left to do is say curdoc, so you execute that, and add root, and here add the object that you want to display on the web page which is the layout in this case. So we have a row of button and text input, and another row of output, yeah. Now save this script and go to the command line. And say python m Bokeh serve widgets.py, execute. I'll be explaining this line in just a bit. So let's look at this what it says. Starting Bokeh server and it's also says the version of the Bokeh server, and then it says the port that the server is starting, and that the path to the application. So now we're talking about applications, not simple HTML graphs. Now we are referring to the pages that are displayed using Bokeh server, and also the process ID. And what you can do now is you go to the browser and say local host. Local host, you know you have a column there, and then 5006 for the port, so 5006. Execute that, and you should see the interface again which now if you click generate text, it will generate dynamic text here. If you change this to anything and click generate text again, the text changes dynamically. That's a dynamic aspect of Bokeh using Bokeh server. So what's happening here is what I did here is I used m which allows you to add some flags when you execute a script. So python here, and widgets.py here and by passing m you are allowed to add some flags. So in here I added Bokeh server, bokeh serv, tht executes the Bokeh application using the Bokeh server component. However there is a shorter way to run Bokeh server, control C to interrupt the process, the current service. You might have to wait a while. Yea, that was interrupted and you know the shortcut is Bokeh serv and widgets. The name of the file. So that should run the process again. And you see, you know the same interface, and yeah normally this is how Bokeh servers run, like this. But I also thought to show you the long way to run a Bokeh server which is here. Whats happening now is that this application now is being connected to the Python script, so to this script here. Whenever the user presses that button, so button on click whenever they user clicks that button, the update function is triggered. So this update function will be executed and what that does is you know it adds the 'Hello' string with this comma in here. So it inserts that to the paragraph object. And also beside the string it also insert this string. So the value, the current value of the text input object as simple as that. Now Bokeh server uses Tornado. So it has Tornado embedded which is web server library of Python, so that allows to serve applications on the browser. And yeah, this is how I thought of introducing Bokeh server to you. So I didn't include any graphs in here. I wanted to keep things simple ,but you were now able to take the hint that by having these dynamic features in here you are allowed to send values to your graph and so modify the graph as you wish. You allow the user to modify or graphs. We will be doing that in the next lectures. I hope you are excited about Bokeh server, and I'll talk to you later.