Search code examples
pythonhtmljupyter-notebookipywidgets

How to show output of toogle button in HMTL using ipywidgets?

Using jupyter notebook, the output of toggle button are working smoothly. However, when I save it as html. The HTML unable show the ouput of toggle button

Image below is the html format, the toggle button unable to show the output. But in jupyter its work fine.

enter image description here

I'm using this code.

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import ipywidgets as widgets
from IPython.display import display, Markdown, clear_output, HTML
from IPython.display import display
from ipywidgets.embed import embed_minimal_html

data=[[47,15,3,5,7],[33,13,4,7,2],[25,17,9,3,5]]
df = pd.DataFrame(data, columns=['VAR_A','VAR_B','VAR_C','VAR_D','VAR_E'])

toggle = widgets.ToggleButtons(options = df.columns, description = 'Variables:', button_style = '')
out = widgets.Output()

def toggle_plot(button):
    with out:
        if button['new']:
            out.clear_output()
            plt.ioff()
            ax=plt.gca()
            sns.barplot(x=toggle.value, data=df)
            display(ax.figure)
            plt.clf() 
        else:
            out.clear_output()

toggle.observe(toggle_plot, 'value')
display(toggle)
display(out)

embed_minimal_html('try.html', views=[toggle], title='try')

I also tried to save using this two functions in jupyter notebook, but its save empty html.

!jupyter nbconvert --to html --no-input try.ipynb

!jupyter nbconvert --to html --no-input --template basic --output try.html try.ipynb

I'm still exploring to use these widgets, but I'm stuck at here.

Solution

  • As explained here by jasongrout it is not possible, what you are trying to do, because widgets need a kernel for execution.

    But you can check out https://www.nbinteract.com/ which is probably what you want.