Resizable, minimal, embeddable output from plotly.offline.plot

[mchels]

In plotly.offline.plot is it intentional that resizing is only available for output_type == 'div' if plotly.js is included in the output: https://github.com/plotly/plotly.py/blob/master/plotly/offline/offline.py#L526-L537

This means that currently you cannot generate a minimal (no plotly.js), embeddable (output_type == 'div') script that is also resizable which seems not to be the intention in the PR that made the change: #717

Example:

import plotly
import plotly.graph_objs as go

figure_or_data = {
    "data": [go.Scatter(x=[1, 2, 3, 4], y=[4, 3, 2, 1])],
    "layout": go.Layout(title="hello world"),
}
fig_div = plotly.offline.plot(
    figure_or_data,
    image_width='100%',
    image_height='100%',
    include_plotlyjs=False,
    output_type='div',
    auto_open=False,
)

gives for fig_div:

'<div id="0b3aff81-1632-4ea9-a11f-a6b0b1cd02c1" 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("0b3aff81-1632-4ea9-a11f-a6b0b1cd02c1", [{"type": "scatter", "x": [1, 2, 3, 4], "y": [4, 3, 2, 1]}], {"title": "hello world"}, {"showLink": true, "linkText": "Export to plot.ly"})</script>'

Setting include_plotlyjs=True gives at the end

<script type="text/javascript">window.addEventListener("resize", function(){Plotly.Plots.resize(document.getElementById("ba33b0b5-156d-4224-b931-414fcf0f02f1"));});</script></div>'

Apologies if I'm missing something obvious.

[ryancollingwood]

With some help from this stack overflow post found a workaround for this.

Basically let it generate the html, however suppress the automatic opening with auto_open = False.
Then load the html generated from the offline plot and insert the script to the latest plotly javascript.

import plotly
import bs4

# return as html fragment
# the include_plotlyjs argument seems to be 
# ignored as it's included regardless when outputting to div
# found an open issue on here - https://github.com/plotly/plotly.py/issues/1043
plotly.offline.plot(
    plot_output, 
    filename = filename,
    config = plot_config,
    include_plotlyjs = False,
    auto_open = False,
)

# load the file
with open(filename) as inf:
    txt = inf.read()
    soup = bs4.BeautifulSoup(txt)

# add in the latest plot-ly js as per https://stackoverflow.com/a/38033016/2805700
js_src = soup.new_tag("script", src="https://cdn.plot.ly/plotly-latest.min.js")
# insert it into the document
soup.head.insert(0, js_src)

# save the file again
with open(filename, "w") as outf:
    outf.write(str(soup))

[jonmmease]

Hi @mchels ,

Yeah, I don't see any reason why resizing shouldn't be supported when include_plotlyjs is False.

Thanks for bringing it up, and for the helpful background research.

[spencercal]

I've got this issue currently as well on a project I'm working on. Would love to have resizing work when output_type="div" and include_plotlyjs is False.

I'm building a dashboard that graphs the data for various environmental sensors on a single page. When I've tried setting include_plotlyjs to True it affects my page layout.

Any available fix or workaround?

[jonmmease]

Hi all,
We're already planning on doing some work in plotly.offline.plot for v3.3.0 to introduce latex/MathJax support, so I think we can take care of this at the same time.

[jonmmease]

Bumping this to v3.4.0 because that's where the latex/MathJax work is going to happen.

[jonmmease]

Done in #1234