Show saved bokeh plot in a bootstrap popover

[klewerclaus]

I am trying to show a bokeh plot saved as html in a bootstrap popover, I think the JS doesn’t get executed, any ideas how to manage this?

Here’s how far I got:

serving the plot:

@main.route('/bokeh-plot', methods=['GET'])
def bokeh_plot():
    return send_from_directory(app.config.get('PLOTS_PATH'), 'content.html', mimetype='text/html')

showing the plot:

    <script>
        function adjustPopover(popover, iframe) {
            var height = iframe.contentWindow.document.body.scrollHeight + 'px',
                popoverContent = $(popover).next('.popover-content');

            iframe.style.height=height;
            popoverContent.css('height', height);
        }
        $(document).ready(function(){
            $('[data-toggle="popover2"]').popover({
                trigger: 'hover',
                html: true,
                container: 'body',
                content: function() {
                    return '<iframe src="bokeh-plot">'+
                  '</iframe>';
                }
            })
        });
    </script>

[Bryan]

Is loading saved, entire HTML files into IFrames an actual requirement of your use case for some reason? If not, it’s generally not a great approach. Bokeh has various dedicated APIs for embedding content, but we’d need to know more about your actual requirements to offer more guidance:

Embedding Bokeh content

[klewerclaus]

@Bryan

ing saved, entire HTML files into IFrames an actual requirement of your use case for some reason? If not, it’s generally not a great approach. Bokeh has various dedicated APIs for embedding content, but we’d need to know more about your actual requirements to offer more guida

Hi Bryan,
for security/performance reasons it would be optimal to load a saved html file. The machine that serves the content can only serve via gunicorn.
I like to have a popover appear on mouseover, svg/pngs are also not an option, due to their size.

Any idea what I need to do to run a Bokeh in an iframe?

[Bryan]

@klewerclaus I’m not aware of any reasons offhand what you are doing would not technically work. You’ll need to open your browser’s dev console to look for more information, e.g. relevant log or error messages. You should also probably verify that bootstrap popover’s support embedding IFrames, since the problem could at least potentially lie there.

[klewerclaus]

sanitize: false

was missing in the popover definition. works as charm