Altair graphs wrapped in ipywidgets.Output not being rendered

Dear all,

first of all, thank you for a very nice library that produces beautiful, interactive graphs with very little effort.

We are trying to use these graphs in notebooks served via voila as interactive web applications. We managed to get all the various graphs to show up, when using the kaggle renderer, which will work in both, plain jupyter notebooks (not lab) and voila webapps.

However, when we wrap these graphs into an ipywidget.Output class, there is no more output in neither plain jupyter, nor the voila webapps. An example adapted from the simplemost altair graph I could find is attached below:

from IPython import display
import ipywidgets as widgets
import altair as alt
import pandas as pd

alt.renderers.enable('kaggle',embed_options={'actions': False})

source = pd.DataFrame({
    'a': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
    'b': [28, 55, 43, 91, 81, 53, 19, 87, 52]
})

chart = alt.Chart(source).mark_bar().encode(
    x='a',
    y='b'
)
output = widgets.Output()
with output:
    display.display(chart)
output

Being able to wrap graphs into specific outputs is important to control the content that is displayed to the user when serving notebooks as interactive webapps via voila and we were wondering whether there is some way to achieve this behavior?

[joelostblom]

@sradomski I am going through Altair issues to find those that have been resolved and can be closed. Would you be able to close this issue or add a comment if there is something you don’t think is resolved yet?

[crendl]

I faced the same issue, and can present a workaround:

I use Altair Viewer to display my chart via a local HTTP server, then I create an iframe and pass it on as a widget; e.g:

import altair as alt
import pandas as pd
from IPython.display import display, IFrame
alt.renderers.enable('altair_viewer')

source = pd.DataFrame({
    'a': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
    'b': [28, 55, 43, 91, 81, 53, 19, 87, 52]
})

chart = alt.Chart(source).mark_bar().encode(
    x='a',
    y='b'
)
chart

Displaying chart at http: // localhost:19826 /

result = widgets.Output()

scr='http://localhost:19826/'

with result:
    display(IFrame(scr,width=300,height=400))
result