Make offline embedded <div> plots responsive.

[Ismael-VC]

This PR enables responsiveness in offline plots, when output_type == 'div' by adding the resize_script to the return value of plotly.offline.plot, just as it is done if output_type == 'file', as seen here:

• https://github.com/Ismael-VC/plotly.py/blob/8cfa08ed1ca23ca67b1d3adf1674c29f9777d8f4/plotly/offline/offline.py#L489-L498

I've been making use of Django-JET dashboard widget plugins in order to embed a Plotly graph, before this change I would have to reload the page manually every time I resized the browser window in order to make the plot resize to the new size of the django-jet widget containing it (which is responsive).

Before this change

• First load:

• Resize:

As you can see, plot is truncated.

---

After this change

• First load:

• Resize:

Now it resizes properly.

This is the code I used to test.

In dashboard_modules.py:

from plotly import graph_objs
from plotly.offline import plot

class Graph(DashboardModule):
    title = 'Graph'
    template = 'dashboard_modules/modules/graph.html'

    def init_with_context(self, context):
        x = [-2, 0, 4, 6, 7]
        y = [q ** 2 - q + 3 for q in x]
        trace1 = graph_objs.Scatter(
            x=x,
            y=y,
            marker={
                'color': 'red',
                'symbol': 104,
                'size': "10"
            },
            mode="lines",
            name='1st Trace'
        )
        data = graph_objs.Data([trace1])
        layout = graph_objs.Layout(
            title="Meine Daten",
            xaxis={'title': 'x1'},
            yaxis={'title': 'x2'}
        )
        figure = graph_objs.Figure(data=data, layout=layout)
        div = plot(figure, auto_open=False, output_type='div')

        self.graph = div

In graph.html:

{% load humanize %}

{{ module.graph|safe }}

Related issue: Responsive plots

• Responsive plots #421

[Ismael-VC]

I'm gently bumping, so maintainers get to notice this, this PR is only a one line of code patch, I await for peer review, please let me know if there is anything else that needs to be done in order to guarantee responsiveness of the plots.

C.C. @cldougl, @chriddyp, @Kully as you seem to be recently active as maintainers of plotly.py

Thanks in advance!

[chriddyp]

thanks for tagging me @Ismael-VC ! This looks good to me, I can't think of any blockers. @cldougl @Kully any blockers from you?

[Kully]

@Ismael-VC Yeah, no blockers for me either. Very clearly laid out with the before and after pictures. 👍 from me (can I💃 this @chriddyp?)

[chriddyp]

💃

[cldougl]

@Kully can you update the changelog as well when you merge?

[Kully]

@Kully can you update the changelog as well when you merge?
yup, will do.

[Ismael-VC]

Tank you very much guys! :)

[edwardreed81]

I'll be wanting to make use of this functionality, thanks @Ismael-VC!

This may not be the appropriate place to ask, but all offline plots I make, even with output_type='file', aren't responsive to browser size. If I inspect the outputted file, I see the resize_script output at the bottom, but it doesn't work.

<script type="text/javascript">window.removeEventListener("resize");window.addEventListener("resize", function(){Plotly.Plots.resize(document.getElementById("76da95c1-3baf-43fe-89c4-b51763a38058"));});</script>

Is there something I'm missing here?