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]
If True, the plot will be hidden. Default is False.
- Type
Optional[bool]
-
show_link
¶ 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);
}
});
});