I have an offline plotly graph exported as an html file. While I am able to embed some

Offline Plotly HTML Integration about remi HOT 1 CLOSED

aruraghuvanshi commented on July 27, 2024

Offline Plotly HTML Integration

from remi.

Comments (1)

aruraghuvanshi commented on July 27, 2024

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.

from remi.

Recommend Projects