Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Showing a simple matplotlib plot in plotly Dash

Is it possible to show a simple matplotlib plot (the kind usually generated by plt.show()) in plotly's Dash framework? Or just plotly-like graphs with plotly's Scatters and Data traces?

Specifically I guess I need a different component than Graph (see below) and a way to return the simple plot in the update_figure function.

Example:

import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import matplotlib.pyplot as plt

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    dcc.Slider(
        id='n_points',
        min=10,
        max=100,
        step=1,
        value=50,
    ),

    dcc.Graph(id='example') # or something other than Graph?...
])

@app.callback(
    dash.dependencies.Output('example', 'figure'),
    [dash.dependencies.Input('n_points', 'value')]
)

def update_figure(n_points):
    #create some matplotlib graph
    x = np.random.rand(n_points)
    y = np.random.rand(n_points)
    plt.scatter(x, y)
    # plt.show()
    return None # return what, I don't know exactly, `plt`?

if __name__ == '__main__':
    app.run_server(debug=True)
like image 936
Giora Simchoni Avatar asked Apr 16 '18 07:04

Giora Simchoni


People also ask

Can you use matplotlib in dash?

If you are a Plotly user, Dash is your natural choice. Voila supports various libraries with an ipywidgets interface, such as Matplotlib and Plotly.

Can you use matplotlib with Plotly?

No, Plotly does not use Matplotlib. In other words, Matplotlib is not a dependency for plotly. While both packages allow you to visualize data, they do it differently. To get both Matplotlib and Plotly, download the “Data Plotting” Python runtime.

How do you show figures in Plotly?

To display a figure using the renderers framework, you call the . show() method on a graph object figure, or pass the figure to the plotly. io. show function.

How do I convert to Plotly in matplotlib?

you can convert your static matplotlib figures into interactive plots with the help of mpl_to_plotly() function in plotly. tools module. Following script produces a Sine wave Line plot using Matplotlib's PyPlot API.


2 Answers

If you don't want an interactive plot, you can return a static one (found from this help)

import io
import base64

...

app.layout = html.Div(children=[
    ...,

    html.Img(id='example') # img element
])

@app.callback(
    dash.dependencies.Output('example', 'src'), # src attribute
    [dash.dependencies.Input('n_points', 'value')]
)
def update_figure(n_points):
    #create some matplotlib graph
    x = np.random.rand(n_points)
    y = np.random.rand(n_points)
    buf = io.BytesIO() # in-memory files
    plt.scatter(x, y)
    plt.savefig(buf, format = "png") # save to the above file object
    plt.close()
    data = base64.b64encode(buf.getbuffer()).decode("utf8") # encode to html elements
    return "data:image/png;base64,{}".format(data)
like image 168
simplyPTA Avatar answered Oct 03 '22 00:10

simplyPTA


Refer to https://plot.ly/matplotlib/modifying-a-matplotlib-figure/ . There is a mpl_to_plotly function in plotly.tools library that will return a plotly figure(which can then be returned to Graph's figure attribute) from matplotlib figure.

Edit: Just noticed you asked this a while back. Maybe the above is a new feature but its the cleanest way.

like image 29
Haskar P Avatar answered Oct 03 '22 00:10

Haskar P