Plotly View

Last Updated: November 11, 2016

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

Simple options object for plotly view.

Note

Information about the Plotly API can be found at https://plot.ly/python.

plot_input

A plotly graph_objs to be plotted.

Type:plotly graph_objs
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]

If True, the link to export plot to view in plotly is shown. Default is False.

Type:Optional[bool]

Controller Code Basic Example:

from datetime import datetime
import plotly.graph_objs as go
from tethys_sdk.gizmos import PlotlyView

x = [datetime(year=2013, month=10, day=04),
     datetime(year=2013, month=11, day=05),
     datetime(year=2013, month=12, day=06)]

my_plotly_view = PlotlyView([go.Scatter(x=x, y=[1, 3, 6])])

context = {'plotly_view_input': my_plotly_view}

Controller Code Pandas Example:

import numpy as np
import pandas as pd
from tethys_sdk.gizmos import PlotlyView

df = pd.DataFrame(np.random.randn(1000, 2), columns=['A', 'B']).cumsum()

my_plotly_view = PlotlyView(df.iplot(asFigure=True))

context = {'plotly_view_input': my_plotly_view}

Template Code:

{% load tethys_gizmos %}

{% gizmo plotly_view_input %}

AJAX

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

Note

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

For example:

{% block import_gizmos %}
    {% import_gizmo_dependency plotly_view %}
{% endblock %}

Four elements are required:

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

from datetime import datetime
import plotly.graph_objs as go
from tethys_sdk.gizmos import PlotlyView

@login_required()
def plotly_ajax(request):
    """
    Controller for the plotly ajax request.
    """
    x = [datetime(year=2013, month=10, day=04),
         datetime(year=2013, month=11, day=05),
         datetime(year=2013, month=12, day=06)]

    my_plotly_view = PlotlyView([go.Scatter(x=x, y=[1, 3, 6])])

    context = {'plotly_view_input': my_plotly_view}

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

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

{% load tethys_gizmos %}

{% gizmo plotly_view_input %}

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

...
    UrlMap(name='plotly_ajax',
           url='app_name/plotly',
           controller='app_name.controllers.plotly_ajax'),
...

4) The AJAX call in the javascript

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

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

            //NOTE: IF USING MODAL/MESSAGE BOX NEED A TIMEOUT BEFORE DISPLAY
            //$('#modal_div').modal('show');
            //setTimeout(function(){
            //    $("#modal_div").find('.modal-body').html(data);
            //}, 100);

        }
    });

});