Skip to content

Make offline embedded <div> plots responsive. #717

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Apr 10, 2017
Merged

Make offline embedded <div> plots responsive. #717

merged 1 commit into from
Apr 10, 2017

Conversation

Ismael-VC
Copy link
Contributor

@Ismael-VC Ismael-VC commented Mar 20, 2017 •
edited
Loading

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:

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:

image

  • Resize:

image

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

@Ismael-VC
Make offline embedded <div> plots responsive.
8cfa08e 
This PR enables responsiveness in offline plots, where `output_type = 'div'` and not just if  `output_type = 'file'`. I've been making use of [Django-JET](https://github.com/geex-arts/django-jet) dashboard widget plugins in order to embed a Plotly graph. 

Before this change I would have to reload the page every time I resized the browser window in order to make the plot resize to the new sizes.
@Ismael-VC
Copy link
Contributor Author

Ismael-VC commented Mar 25, 2017 •
edited
Loading

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
Copy link
Member

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
Copy link
Contributor

Kully commented Apr 9, 2017

@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
Copy link
Member

💃

@cldougl
Copy link
Member

cldougl commented Apr 10, 2017

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

@Kully
Copy link
Contributor

Kully commented Apr 10, 2017

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

@Kully Kully merged commit 9f992d6 into plotly:master Apr 10, 2017
@Ismael-VC
Copy link
Contributor Author

Tank you very much guys! :)

@Ismael-VC Ismael-VC deleted the patch-1 branch April 10, 2017 19:57
@edwardreed81
Copy link

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?

@mchels mchels mentioned this pull request Jun 28, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@Ismael-VC @chriddyp @Kully @cldougl @edwardreed81