Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Continuous X-axis for weeks (Week 51, 52, 01, 02)

Hi guys,

I am having a great time working with Dash but I am encountering one issue right now.

I work with forecast and historical data and would like to display last years (2015, 2016,…) historical data in the same plot compared to 2019 data I have.

What we usually do is work with weeks (sunday start). You can find below my dataframe:

category    date      store    brand    volume  week  year  version
BAG      2019-09-22  LONDON     LV  ...  2428.0   38  2019   FCT
BAG      2019-09-29  LONDON     LV  ...     0.0   39  2019   FCT
BAG      2019-10-13  LONDON     LV  ...     0.0   41  2019   FCT
BAG      2019-10-20  LONDON     LV ...     0.0    42  2019   FCT
BAG      2018-10-19  LONDON     LV ...     0.0    42  2018   ACT

And an extract of my code:

@app.callback(Output('main_graph', 'figure'),
              [Input('dropdown', 'value'),
               Input('store_names', 'value'),
               Input('category_names', 'value'),
               Input('brand_names','value')])
def update_graph(dropdown_value,store_names,category_names,brand_names):
    actualsdf = actuals[actuals['year'] == dropdown_value]
    dffdraft = df[df['store'].isin(store_names) & df['category'].isin(category_names)
             & df['brand'].isin(brand_names) & df['version'].isin(['DFT','ACTUALS'])]
    dfffct = df[df['store'].isin(store_names) & df['category'].isin(category_names)
             & df['brand'].isin(brand_names) & df['version'].isin(['FCT','ACTUALS'])]
    dffactuals = actualsdf[actualsdf['store'].isin(store_names) & actualsdf['category'].isin(category_names)
                           & actualsdf['brand'].isin(brand_names) & actualsdf['version'].isin(['ACTUALS'])]
    dffdraft = dffdraft.groupby('date')['volume'].sum().reset_index()
    dfffct = dfffct.groupby('date')['volume'].sum().reset_index()
    dffactuals = dffactuals.groupby('date')['volume'].sum().reset_index()
    trace1 = go.Scatter(y=dffdraft['volume'],x=dffdraft['date'],mode='lines',name='Draft')
    trace2 = go.Scatter(y=dfffct['volume'], x=dfffct['date'], mode='lines', name='Forecast')
    trace3 = go.Scatter(y=dffactuals['volume'], x=dffactuals['date'], mode='lines', name='Actuals')
    data = [trace1,trace2,trace3]
    return {"data": data}

This code renders the following result:

Which is not what I want, I would like to have 201X and 2019 below each other.

So I tried to use weeks instead of date which results in the following:

Here the way my data is displayed is good, however in my case it doesnt make sense to have WK01 at the start of the plot. Basically I create a filter to only have +11 weeks, -11 weeks compared to today date so for example we are WK45 so I would like my x-axis to start in WK34 and ends in WK02.
I tried to get this behaviour by changing the x-axis with return {"data": data, "layout": {"xaxis": {"tickformat": "W%W"}}}

However I still have the same issue as the first screen (and WK00 which doesnt exist):

If someone could enlighten me on how to solve this problem it would be much appreciated :mask: