Embedding dash plotly graphs into html

Question

I want to embed Plotly graph in my own html file. Using Dash, I can generate the same graph into API local server.

However for my own HTML file, I did not get any solution:

My Dash solution:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Dash Tutorials'),
    dcc.Graph(
        id='example',
        figure={
            'data': [
                {'x': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 'y': [9, 6, 2, 1, 5, 4, 6, 8, 1, 3], 'type': 'bar', 'name': 'Boats'},
                {'x': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 'y': [19, 36, 12, 1, 35, 4, 6, 8, 1, 3], 'type': 'bar', 'name': 'Cars'},
            ],
            'layout': {
                'title': 'Basic graph'
            }
        })

])
if __name__ == '__main__':
    app.run_server(debug=True)

How to generate via plotly the same graph to embed in my own html?

sentence · Accepted Answer · 2019-06-30 10:26:17Z

Just follow these 2 steps:

1- generate (via python) the code to embed into your html file

import plotly.graph_objs as go
from plotly.offline import plot

x  = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y1 = [9, 6, 2, 1, 5, 4, 6, 8, 1, 3]
y2 = [19, 36, 12, 1, 35, 4, 6, 8, 1, 3]
trace1 = go.Bar(x=x,
                y=y1,
                name='Boats')
trace2 = go.Bar(x=x,
                y=y2,
                name='Cars')

data = [trace1, trace2]
layout = go.Layout(title='Title',
                   xaxis=dict(title='X axis',
                              tickfont=dict(size=14,
                                            color='rgb(107, 107, 107)'),
                              tickangle=-45),
                   yaxis=dict(title='Y axis',
                              titlefont=dict(size=16,
                                             color='rgb(107, 107, 107)'),
                              tickfont=dict(size=14,
                                            color='rgb(107, 107, 107)')),)

fig = go.Figure(data=data, layout=layout)
plot(fig,
     include_plotlyjs=False,
     output_type='div')

and you get:

<div><div id="d18660f3-1557-43c1-8f27-09292a9a8de7" style="height: 100%; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("d18660f3-1557-43c1-8f27-09292a9a8de7", [{"name": "Boats", "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "y": [9, 6, 2, 1, 5, 4, 6, 8, 1, 3], "type": "bar", "uid": "39c52ed4-e27d-4574-9cec-a3d50a8773a0"}, {"name": "Cars", "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "y": [19, 36, 12, 1, 35, 4, 6, 8, 1, 3], "type": "bar", "uid": "c0b658e9-bd5b-4c65-976d-1e03ba5836a3"}], {"title": {"text": "Title"}, "xaxis": {"tickangle": -45, "tickfont": {"color": "rgb(107, 107, 107)", "size": 14}, "title": {"text": "X axis"}}, "yaxis": {"tickfont": {"color": "rgb(107, 107, 107)", "size": 14}, "title": {"font": {"color": "rgb(107, 107, 107)", "size": 16}, "text": "Y axis"}}}, {"showLink": false, "linkText": "Export to plot.ly", "plotlyServerURL": "https://plot.ly"})</script><script type="text/javascript">window.addEventListener("resize", function(){Plotly.Plots.resize(document.getElementById("d18660f3-1557-43c1-8f27-09292a9a8de7"));});</script></div>

2- embed the resulting code into your html file

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
<h1>Something</h1>
<div><div id="d18660f3-1557-43c1-8f27-09292a9a8de7" style="height: 100%; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("d18660f3-1557-43c1-8f27-09292a9a8de7", [{"name": "Boats", "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "y": [9, 6, 2, 1, 5, 4, 6, 8, 1, 3], "type": "bar", "uid": "39c52ed4-e27d-4574-9cec-a3d50a8773a0"}, {"name": "Cars", "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "y": [19, 36, 12, 1, 35, 4, 6, 8, 1, 3], "type": "bar", "uid": "c0b658e9-bd5b-4c65-976d-1e03ba5836a3"}], {"title": {"text": "Title"}, "xaxis": {"tickangle": -45, "tickfont": {"color": "rgb(107, 107, 107)", "size": 14}, "title": {"text": "X axis"}}, "yaxis": {"tickfont": {"color": "rgb(107, 107, 107)", "size": 14}, "title": {"font": {"color": "rgb(107, 107, 107)", "size": 16}, "text": "Y axis"}}}, {"showLink": false, "linkText": "Export to plot.ly", "plotlyServerURL": "https://plot.ly"})</script><script type="text/javascript">window.addEventListener("resize", function(){Plotly.Plots.resize(document.getElementById("d18660f3-1557-43c1-8f27-09292a9a8de7"));});</script></div>
</body>

Collectives™ on Stack Overflow

Embedding dash plotly graphs into html

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related