Saving Panel and Altair interactive charts as HTML

Question

I created a Panel and Altair interactive chart using.

from bokeh.resources import INLINE, CDN
from vega_datasets import data
import panel as pn
import pandas as pd
import altair as alt
from altair import datum
cars = data.cars()

alt.renderers.enable('altair_viewer')
alt.data_transformers.enable('default')
pn.extension('vega')
options= cars['Origin'].unique().tolist()
hp_range_slider = pn.widgets.RangeSlider(
    name='Range Slider', start=40, end=250, value=(60, 160), step=10)
country_ticker = pn.widgets.MultiSelect(name='MultiSelect', value=[options[0], options[1]],
    options=options, size=8)
@pn.depends(country_ticker.param.value, hp_range_slider.param.value)
def get_plot(country_ticker, hp_range):
    df=cars.copy()
    start_hp = hp_range_slider.value[0]
    end_hp = hp_range_slider.value[1]
    mask = (df['Horsepower'] > start_hp) & (df['Horsepower'] <= end_hp)  # create filter mask for the dataframe
    df = df.loc[mask]  # filter the dataframe
    print(country_ticker)
    print(start_hp,end_hp)
    # create the Altair chart object
    scatter = alt.Chart(df).mark_point().encode(
        x='Horsepower:Q',
        y='Miles_per_Gallon:Q',
        color='Origin:N'
    ).transform_filter(
        alt.FieldOneOfPredicate(field='Origin', oneOf=country_ticker)
    )
    return scatter
title = '## Horsepower Dashboard'
subtitle = 'This dashboard allows you to select a country and HP range .'


dashboard = pn.Row(
    pn.Column(title, subtitle, country_ticker, hp_range_slider),
    get_plot # draw chart function!
)
dashboard.servable()

dashboard.save("test_altair.html",embed=True,resources=INLINE)
dashboard.show()

When I execute dashboard.show command it displays perfectly.

But when I save it as html, I dont get the charts , just the panel components. Any help with this?

Answer 1

The altair_viewer renderer requires a live kernel. From the altiar_viewer README

Note that the display based on altair viewer will only function correctly as long as the kernel that created the charts is running, as it depends on the background server started by the kernel.

If you want charts in saved HTML to display without a kernel, you need to use a different renderer, such as the default renderer. See Displaying Altair Charts for more information on renderers.