Menu
I have built a chart which I want to embed into an HTML file. If I use plotly online, it works as intended. However, if I use OFFLINE the offline chart works (i.e. It opens up a separate HTML chart with it in it), but it is not embedding into the HTML (nick.html) i.e. the iframe is empty.
This is my code:
fig = dict(data=data, layout=layout)
plotly.tools.set_credentials_file(username='*****', api_key='*****')
aPlot = plotly.offline.plot(fig, config={"displayModeBar": False}, show_link=False,
filename='pandas-continuous-error-bars.html')
html_string = '''
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style>body{ margin:0 100; background:whitesmoke; }</style>
</head>
<body>
<h1>Monthly Report</h1>
<!-- *** Section 1 *** --->
<h2></h2>
<iframe width="1000" height="550" frameborder="0" seamless="seamless" scrolling="no" \
src="''' + aPlot + '''.embed?width=800&height=550"></iframe>
<p> (Insights).</p>
</body>
</html>'''
f = open("C:/Users/nicholas\Desktop/nick.html",'w')
f.write(html_string)
f.close()
Anyone know why it isn't embedding and how to fix it?
844
To share a plot from the Chart Studio Workspace, click 'Share' button on the left-hand side after saving the plot. The Share modal will pop-up and display a link under the 'Embed' tab. You can then copy and paste this link to your website. You have the option of embedding your plot as an HTML snippet or iframe.
Three steps are required to integrate a Python graph into an HTML Web site: generate the graph either in Plot.ly or Altair. save the graph as an HTML page. manipulate the generated HTML.
Plotly Offline allows you to create graphs offline and save them locally. Instead of saving the graphs to a server, your data and graphs will remain in your local system.
If you are encountering problems using plotly with Dash please first ensure that you have upgraded dash to the latest version, which will automatically upgrade dash-core-components to the latest version, ensuring that Dash is using an up-to-date version of the Plotly. js rendering engine for plotly .
aPlot is the filename of your Plotly file.
In your iframe you add .embed?width=800&height=550 to the filename which results in a filename which does not exist.
When you remove this string, i.e. src="''' + aPlot + '''", it should work.
Instead of embedding the whole HTML file you can also use the approach suggest here which generates a smaller HTML file, i.e. generate a div with all the relevant information and include plotly.js in your header.
import plotly
fig = {'data': [{'x': [1,2,3],
'y': [2,5,3],
'type': 'bar'}],
'layout': {'width': 800,
'height': 550}}
aPlot = plotly.offline.plot(fig,
config={"displayModeBar": False},
show_link=False,
include_plotlyjs=False,
output_type='div')
html_string = '''
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style>body{ margin:0 100; background:whitesmoke; }</style>
</head>
<body>
<h1>Monthly Report</h1>
''' + aPlot + '''
</body>
</html>'''
with open("nick.html", 'w') as f:
f.write(html_string)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
