Slider not updating plot

Community Support
1

Hi, I have followed this tutorial: Making Interactive Visualizations with Python Using Bokeh – Capsicum.

I have copied the full code from there, and the only change i have done is to swap the gapminder data with my own, and changed the ranges of the axis to match my data.

Plot shows fine at the first year, but when sliding slider, it doesn’t update the plot.

I have checked by printing the gapminder data, that my files looks exactly the same.

I’m out of ideas on where to troubleshoot.

Below is my plot.

Extra info: Im using Django and deploying to Google App Engine.
I have this included within the head tag of my html:
link rel href=“http://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.css” rel=“stylesheet” type=“text/css”>
link rel href=“http://cdn.pydata.org/bokeh/release/bokeh-widgets-1.3.4.min.css” rel=“stylesheet” type=“text/css”>
script src=“http://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js”>
script src=“http://cdn.pydata.org/bokeh/release/bokeh-widgets-1.3.4.min.js”>

57
571758×994 133 KB

Anyone with the same issue, or some pointers on anywhere to search for a solution?

2

That’s a pretty old article. Bokeh has changed in many ways and places in almost three years, and in particular BokehJS has undergone tremendous change. I don’t see a link to a complete script anywhere in that post and I am not going to take the time to try and stitch all the separate pieces together, so all I can do is speculate.

The clumsy .get and .set methods on data sources were deprecated and removed a long time ago. If you want to access the properties of Bokeh objects, just use standard “dot” notation:

value = slider.value

source.data = new_data

A few tangential suggestions:

  • You should learn how to access and view your browsers JavaScript console. That’s where JS errors (e.g. that would help with debugging in exactly this situation) will show up.

  • This is a really complicated example, using the lowest level Bokeh API (which I don’t generally think people should start with) so it has lots of distractions from a learning standpoint. There’s an entire chapter in the User’s Guide on adding interactions with JavaScript Callbacks that has lots of much smaller examples that re purpose-written demonstrate how to do specific things.

As an aside, if you have any way to contact the author to ask them to update the blog (or at least put an alert with a link here at the top) that would be appreciated.

3

Hi Bryan, so thankful for your help. I like starting with the heavy stuff, then everything else is easy afterwards :wink:

By altering the javascript code with your suggestions above it all worked fine. If others struggle, this is what the slider section looks like after the amendments:

	# Add the slider
	code = """
	    var year = slider.value,
			sources = %s
			new_source_data = sources[year].data;
	    renderer_source.data = new_source_data;
		text_source.data = {'year': [String(year)]}
	""" % js_source_array

	callback = CustomJS(args=sources, code=code)

	slider   = Slider(
	              start=years[0], end=years[-1],
	              value=years[0], step=1, title="Year",
	              )
	
	slider.js_on_change('value', callback)

	callback.args["renderer_source"] = renderer_source
	callback.args["text_source"] = text_source
	callback.args["slider"] = slider
2 Likes