Skip to content
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

Offline Plotly HTML Integration #528

Closed
aruraghuvanshi opened this issue Nov 6, 2023 · 1 comment
Closed

Offline Plotly HTML Integration #528

aruraghuvanshi opened this issue Nov 6, 2023 · 1 comment

Comments

@aruraghuvanshi
Copy link

aruraghuvanshi commented Nov 6, 2023 •
edited
Loading

I have an offline plotly graph exported as an html file. While I am able to embed some external websites into my UI display containers, I am unable to display these exported plotly htmls which are currently saved to my disk.

I did go through an example from this forum by Saewoonam but it didn't help my cause. Is there a way I can display such html files using Remi? So far I've been following this for display of external links:

 htmlpath = "https://www.meteo.it/"
main_container = tk.VBox(width=300, height=200, style={'margin': '0px auto'})

frame = tk.Widget(_type='iframe', width=290, height=200, margin='10px')
frame.attributes['src'] = htmlpath
frame.attributes['width'] = f'{H}%'
frame.attributes['height'] = f'{W}%'
frame.style['border'] = '1px solid black'

main_container.append(frame)

But replacing the htmlpath to my local plotly.html, it gives me an aw snap on the UI. Help would be appreciated.
@aruraghuvanshi
Copy link
Author

aruraghuvanshi commented Nov 8, 2023 •
edited
Loading

I found and resolved it. Here's the solution who might need it.

Use the following to create your offline plots using Plotly.offline. Keep in mind the output_type should be 'div'.

import plotly.offline as pyo
div = pyo.plot(fig, auto_open=False, include_plotlyjs=False, output_type='div')

Then Build the graph using the follwing template:

html_string = '''
               <html>
                   <head>
                     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
                     <style id="plotly.js-style-global"></style>
                     <style id="plotly.js-style-modebar-1006ab"></style>
                   </head>
                   <body>
                     ''' + div + '''
                   </body>
               </html>'''

        with open(f'plotly-plot.html', 'w') as f:
            f.write(html_string)

In your script where you're building the UI, bring the created graphs html file and load it with load_resource

import remi.gui as gui

htmlcontent = 'plotly-plot.html'

mc = gui.VBox(width=300, height=200, style={'margin': '0px auto'})
res = gui.load_resource(htmlcontent)

frame= gui.Widget(_type='iframe', margin='0px')
frame.attributes['src'] = res
frame.attributes['width'] = f'100%'
frame.attributes['height'] = f'100%'
frame.style['border'] = '1px solid black'

mc.add_child('frame', btn)

This will load the interactive plotly plot in your VBox container. Play around with height, width and margin as per your UI.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@aruraghuvanshi