Bokeh View

Last Updated: November 11, 2016

class tethys_sdk.gizmos.BokehView(plot_input, height='520px', width='100%', attributes='', classes='', divid='', hidden=False)

Simple options object for Bokeh plotting.

Note

For more information about Bokeh and for Python examples, see http://bokeh.pydata.org.

plot_input

A bokeh figure to be plotted.

Type:bokeh figure
height

Height of the plot element. Any valid css unit of length.

Type:Optional[str]
width

Width of the plot element. Any valid css unit of length.

Type:Optional[str]
attributes

Dictionary of attributed to add to the outer div.

Type:Optional[dict]
classes

Space separated string of classes to add to the outer div.

Type:Optional[str]
hidden

If True, the plot will be hidden. Default is False.

Type:Optional[bool]

Controller Code Example:

from tethys_sdk.gizmos import BokehView
from bokeh.plotting import figure

plot = figure(plot_height=300)
plot.circle([1,2], [3,4])
my_bokeh_view = BokehView(plot, height="300px")

context = {'bokeh_view_input': my_bokeh_view}

Template Code Example:

{% load tethys_gizmos %}

{% gizmo bokeh_view_input %}

AJAX

Often dynamically loading in plots can be useful. Here is a description of how to do so with Bokeh.

Note

In order to use this, you will either need to use a BokehView gizmo on the main page or register the dependencies in the main html template page using the import_gizmo_dependency tag with the bokeh_view name in the import_gizmos block.

For example:

{% block import_gizmos %}
    {% import_gizmo_dependency bokeh_view %}
{% endblock %}

Four elements are required:

1) A controller for the AJAX call with a BokehView gizmo.

from tethys_sdk.gizmos import BokehView
from bokeh.plotting import figure

@login_required()
def bokeh_ajax(request):
    """
    Controller for the bokeh ajax request.
    """
    plot = figure(plot_height=300)
    plot.circle([1,2], [3,4])
    my_bokeh_view = BokehView(plot, height="300px")

    context = {'bokeh_view_input': my_bokeh_view}

    return render(request, 'app_name/bokeh_ajax.html', context)

2) A template for with the tethys gizmo (e.g. bokeh_ajax.html)

{% load tethys_gizmos %}

{% gizmo bokeh_view_input %}

3) A url map to the controller in app.py

...
    UrlMap(name='bokeh_ajax',
           url='app_name/bokeh',
           controller='app_name.controllers.bokeh_ajax'),
...

4) The AJAX call in the javascript

$(function() { //wait for page to load

    $.ajax({
        url: 'bokeh',
        method: 'GET',
        data: {
            'plot_height': 500, //example data to pass to the controller
        },
        success: function(data) {
            // add plot to page
            $("#bokeh_plot_div").html(data);
        }
    });

});