Altair plot not showing when using Panel

1.5k Views Asked by At

I am following this tutorial [github] on using Panel and Altair.

The function which returns my plot is the following:

@pn.depends(ticker.param.value, date_range_slider.param.value)
def get_plot(ticker, date_range):

    df = data.stocks()
    df['date'] = pd.to_datetime(df['date'])

    start_date, end_date = date_range

    mask = (df['date'] > start_date) & (df['date'] <= end_date)
    dfm = df.loc[mask]

    chart = (alt.Chart(dfm)
        .mark_line()
        .encode(
            x='date', y='price',
            tooltip=alt.Tooltip(['date', 'price']))
        .transform_filter((datum.symbol == ticker))
    )
    return chart

I am running into an issue where the chart is shown normally if executed directly:

enter image description here

but not when run using Panel:

enter image description here

It seems that when i put my working chart into a panel it loses the link to the data:

enter image description here

Serving the dashboard has the same problem so it seems to me there is a compatibility issue between Panel and Altair.

Anyone know what is wrong and how to fix it?

Versions:

  • Panel - v0.6.0
  • Altair - v3.2.0
  • Pandas - v0.25.1
  • JupyterLab - v1.0.2
  • Python - v3.7.4
1

There are 1 best solutions below

0
On

This is now working, running the code in the tutorial with the modifications in this question shows the plot and it responds to the widget input:

enter image description here

Full code:

import panel as pn
import altair as alt
import pandas as pd
from vega_datasets import data
import datetime as dt
from altair import datum

alt.renderers.enable('default')
pn.extension('vega')

source = data.stocks()
source = pd.DataFrame(source)
source.head()

# set a title for your dashboard
title = '## Stock Price Dashboard'

subtitle = 'This dashboard allows you to select a company and date range to see stock prices.'

# create list of company names (tickers)
tickers = ['AAPL', 'GOOG', 'IBM', 'MSFT']

# this creates the dropdown widget
ticker = pn.widgets.Select(name='Company', options=tickers)

# this creates the date range slider
date_range_slider = pn.widgets.DateRangeSlider(
    name='Date Range Slider',
    start=dt.datetime(2001, 1, 1), end=dt.datetime(2010, 1, 1),
    value=(dt.datetime(2001, 1, 1), dt.datetime(2010, 1, 1))
)

@pn.depends(ticker.param.value, date_range_slider.param.value)
def get_plot(ticker, date_range):

    df = data.stocks()
    df['date'] = pd.to_datetime(df['date'])

    start_date, end_date = date_range

    mask = (df['date'] > start_date) & (df['date'] <= end_date)
    dfm = df.loc[mask]

    chart = (alt.Chart(dfm)
        .mark_line()
        .encode(
            x='date', y='price',
            tooltip=alt.Tooltip(['date', 'price']))
        .transform_filter((datum.symbol == ticker))
    )
    return chart

dashboard = pn.Row(
    pn.Column(title, subtitle, ticker, date_range_slider),
    get_plot # draw chart function!
)

dashboard

Versions:

import session_info
session_info.show()
-----
altair              4.1.0
pandas              1.2.0
panel               0.10.3
vega_datasets       0.9.0
-----
IPython             7.19.0
jupyter_client      6.1.11
jupyter_core        4.7.0