0

I'm having a little trouble implementing a webpage that uses AJAX to update the bokeh plot embedded within an html page.

See below specific file where I'm trying to implement it:

https://github.com/hhprogram/PyramidSite/blob/master/webgraphing/views/ajaxView.py

You should be able to just clone the whole webgraphing repo to your machine to run the pyramid webpage locally. You can then run the pyramid serve using pserve deveopment.ini and then navigate to 'localhost:6543/bokehAJAX' in your browser. Looking at the javascript console it seems to be embedding the bokeh div in my html except the div has width of zero.

enter image description here

The ultimate goal is there should be a bokeh line graph figure on the page that periodically updates and adds data to the line graph. I'm not really too sure what I'm doing wrong here - any push in the right direction would be much appreciated. Note: I've tried looking at examples like: Flask + Bokeh AjaxDataSource but to no avail.

hhprogram
  • 2,809
  • 3
  • 13
  • 25
  • What happens if you assign a width and height of 100% to the div? – Steve Piercy Jan 26 '18 at 02:09
  • Thanks for the suggestion. It's odd when I set the corresponding bokeh divs to have width and height 100% it doesn't change the div dimensions, I think it must be `div` that is returned must be empty. Think this was confirmed when I manually make the bokeh divs 400by400 pixels the bokeh div just shows up as a white block and no bokeh plot or default bokeh plot controls shown. Not sure why that's happening (even replaced my figure with a simple one and still nothing showed up) – hhprogram Jan 26 '18 at 03:45
  • 1
    Are there any errors in the Developer Tools Console or Network tabs? – Steve Piercy Jan 26 '18 at 06:56
  • Thanks @StevePiercy! Realized I got an `Uncaught Reference error: bokeh not defined` and looking back at some of the flask examples realized I needed `js_resources = INLINE.render_js()` and put that corresponding object into my jinja2 template. I'm still new to javascript so I'm unsure exactly what adding that does. I assume it defines/imports all the necessary variables and js libraries in order to properly render the bokeh javascript that I have injected into the html page? – hhprogram Jan 26 '18 at 17:53

1 Answers1

0

Problem was in my python code ajaxView.py file in the bokeh_ajax method, i was missing:

from bokeh.resources import INLINE
...

jsResources = INLINE.render_js()

...
return {..., 'jsResources': jsResources}

Then in my html / jinja2 template needed to add:

<head>
...
{{ jsResources | safe }}
...
</head>

Hope this helps someone else!

hhprogram
  • 2,809
  • 3
  • 13
  • 25