Export Plotly Graph in markdown with jupyter notebook - jupyter-notebook

Question

I want to export a notebook with plotly graphs in markdown to put it on my blog, but the Graphs doesn't show when I open the post on my website.
I'm not experienced with javascript, but I can see in the markdown File HTML code related to these graphs, here is an example:
<div id="52c4552b-3ced-4862-859b-5db04f4d3c5a" style="height: 500px; width: 1000px;" class="plotly-graph-div"></div><script type="text/javascript">require(["plotly"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV ||
{};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("52c4552b-3ced-4862-859b-5db04f4d3c5a", [{"type": "area", "r": [6409, 6019, 7254, 7226, 7625, 8353, 7271, 5100, 8178, 8833, 8123, 7091], "t": ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"], "name": "Total Number of accidents", "marker": {"color": "rgb(106,81,163)"}}, {"type": "area", "r": [697, 602, 761, 786, 794, 839, 714, 565, 802, 813, 802, 729], "t": ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"], "name": "Grave accidents", "marker": {"color": "rgb(158,154,200)"}}], {"title": "Repartition of accidents per Hour", "autosize": false, "width": 1000, "height": 500, "orientation": -90}, {"showLink": true, "linkText": "Export to plot.ly"})});</script>
So what should I do for the graphs to appear correctly ?
Thanks !

Answer 1

I think, You have missed is to add the script tag containing plotly.js, You can read more here. So what you need to do, is to include the below line.
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
Also, I assume you are using plotly.offline to make your plots, so you need to convert the plot to html like so.
import pandas as pd
import numpy as np
import plotly.offline as py_offline
import plotly.graph_objs as go
py_offline.init_notebook_mode()
N = 10
random_x = np.linspace(0, 1, N)
random_y = np.random.randn(N)
trace = go.Scatter(
x = random_x,
y = random_y
)
data = [trace]
py_offline.plot(data, filename='basic-line', include_plotlyjs=False, output_type='div')
This above topic is discussed in detail -> SO Answer
So with this you will get the plot html as a string.
Note: You always should have only one plotly.js, you can either set include_plotlyjs to true and not include the above script tag, or set it to false and use the script tag, but note, that you need to always have only one plotly.js file present.
So the final content that you need to paste in your blog is going to be.
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="22495cec-ac95-42d5-b3b1-4566a5848585" 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("22495cec-ac95-42d5-b3b1-4566a5848585", [{"type": "scatter", "x": [0.0, 0.1111111111111111, 0.2222222222222222, 0.3333333333333333, 0.4444444444444444, 0.5555555555555556, 0.6666666666666666, 0.7777777777777777, 0.8888888888888888, 1.0], "y": [-0.2706323284096669, -0.5368085060076518, -0.3650022122835297, 1.0837185699917664, -1.6123886503326845, 1.3256691068338189, -0.31083903066205104, 0.6951190301897303, -1.624361384686101, 1.852523980751262]}], {}, {"showLink": true, "linkText": "Export to plot.ly"})</script>
Please do let me know if your issue is resolved!