3

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
nluigi
  • 1,263
  • 2
  • 15
  • 35
  • Have you enabled a non-default data transformer? Try running ``alt.data_transformers.enable('default')`` and see if your chart works. – jakevdp Aug 29 '19 at 16:31
  • @jakevdp - As far as i know i am not using a non-default data transformer, running that command doesn't fix the issue. As in de linked tutorial `alt.renderers.enable('default')` was executed after importing altair. Can you confirm that the jupyter notebook provided in the Github repo of the tutorial works for you? – nluigi Aug 29 '19 at 21:44
  • 1
    I tried running the tutorial, using the most recent versions of JupyterLab and Altair. The chart showed, but did not respond to changes to the widget inputs. I'd suggest raising an issue on the github repository you linked to: this problem seems quite specific to that repo. – jakevdp Sep 05 '19 at 00:05
  • I follow the same link and my solution is working fine, from both `Panel` and `Jupyter`. Package version: `altair - 3.2.0`, `panel - 0.6.0`, `pandas - 0.24.2`, `Python - 3.7.3` and `jupyter-notebook - 6.0.0`. – Utkarsh Dubey Sep 12 '19 at 09:39
  • I am testing altair for the first time and I found the panel to be useful element. Has this issue been solved? @jakevdp . I am running into the same issues. Is there any other way to filter dataframes dynamically on the html page? – Dark Knight Jan 14 '21 at 00:50
  • @DarkKnight This issue has been resolved, please see my answer below. – joelostblom Feb 02 '22 at 19:16

1 Answers1

0

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
joelostblom
  • 43,590
  • 17
  • 150
  • 159