CODEWITHSUNDEEP
pythonplotlypanel
Melanie
Melanie

Reputation: 3

Cannot display Plotly chart with Panel DateRangeSlider widget

I am currently struggling with a chart where I am using a DateRangeSlider to update my chart based on the date interval.

The dataframe is similar to the attached table 'new_item' where the y axis is the count, the x axis is the equipment and the color coding corresponds to the payment method. I have converted the date with datetime.strptime() to get a '%Y-%m-%d' format, enabling to combine rows with the same attributes (equipment and payment method) and sum up on the Count column. The date slider has datetime format and the Purchase_Date column is of the type object.

I am using Plotly as I would like to get an interactive bar chart when hovering over the bars. The chart should be of this kind Bar chart. I used the code below which didn't produce any output or error message.

Any idea why the figure isn't returned? Is it an issue with the date format?

date = pn.widgets.DateRangeSlider(name="Date Range",
    start=new_item.PURCHASE_DATE.min(), end=dt.date.today(),
    value=(new_item.PURCHASE_DATE.min(), dt.date.today())
)


import panel as pn
pn.extension("plotly")

@pn.depends(date)
def new_item_purchased(date):
    item_date= new_item[new_item.PURCHASE_DATE == date]
    fig = px.bar(item_date, x = 'Equipment', y = 'Count', color= 'Payment_method', log_y=True, 
                 color_discrete_sequence=px.colors.qualitative.Dark24)
    
    plt.close(fig)
    return fig

pn.Column(pn.Column(date),new_item_purchased)

Upvotes: 0

Views: 494

Answers (1)

Davide_sd
Davide_sd

Reputation: 13185

Since you are only interested in dates, and not times, I would convert "Purchase_Date" to dt.date.

If you use a pn.widgets.DateRangeSlider, then date is a list of two dates! In the following I'm going to switch to a pn.widgets.DateSlider, with which date is a date object.

You also used plt.close(fig). Please don't mix matplolib (plt.close) with Plotly. They are two very different libraries: they are not designed to work together.

Note that with pn.config.throttled = True I'm activating the throttling: the function will be executed only on mouse-up event on the slider! This makes it easy to work with bigger dataframes.

from io import StringIO
import pandas as pd
import datetime as dt
import plotly.express as px
import panel as pn
pn.extension("plotly")
pn.config.throttled = True

new_item = pd.read_csv(StringIO(" Equipment Payment_method Purchase_Date Count\n0 Mower Cash 2022-03-12 8\n1 Rake Checks 2022-01-23 12\n2 Mower Credit_Card 2022-04-05 1\n3 Flower_seeds Cash 2022-02-02 3"), sep=" ", index_col=0)

new_item["Purchase_Date"] = new_item["Purchase_Date"].apply(lambda t: dt.date.fromisoformat(t))

date_slider = pn.widgets.DateSlider(
    name='Date Slider',
    start=new_item.Purchase_Date.min(), end=new_item.Purchase_Date.max(),
    value=new_item.Purchase_Date.max()
)

@pn.depends(date_slider)
def new_item_purchased(date):
    results = new_item[new_item["Purchase_Date"] == date]
    return px.bar(results, x = 'Equipment', y = 'Count', color= 'Payment_method', log_y=True, 
                 color_discrete_sequence=px.colors.qualitative.Dark24)

pn.Column(pn.Column(date_slider), new_item_purchased)

Upvotes: 0

Related Questions