Display last month-to-date and this month-to-date in line chart plotly python

Dash Python
1

How to display the last month-to-date data and this month-to-date data in line chart based on the date selected?

Example:

Current MTD = 07/07/2022
Last MTD = 07/06/2022

Expect the line chart can display 01/07/2022 - 07/07/2022 for Jul, and another line is from 01/06/2022 - 07/06/2022 for Jun.

2

hi @beginof
can you please give more clarification by sharing your data with us and explaining what the xaxis and yaxis values would represent. Do you want the xaxis to represent dates, or do you want the dates to be annotations, like in this example.

3

Hi @adamschroeder

yes, need the x-axis to represent the dates and the y-axis to represent the total of MTD based on the date selected,

Data:

Date Minor Major MTD
01/01/2022 Clutlery Kitchen 1000
01/01/2022 Tops Clothes 100
01/01/2022 Shoes Clothes 200
01/01/2022 Turf Garden 1
01/01/2022 Hoses Garden 2
01/01/2022 Rakes Garden 3
01/01/2022 Cooking Kitchen 4
02/01/2022 Clutlery Kitchen 2000
02/01/2022 Tops Clothes 200
02/01/2022 Shoes Clothes 400
02/01/2022 Turf Garden 2
02/01/2022 Hoses Garden 4
02/01/2022 Rakes Garden 6
02/01/2022 Cooking Kitchen 8
01/02/2022 Clutlery Kitchen 200
01/02/2022 Tops Clothes 300
01/02/2022 Shoes Clothes 400
01/02/2022 Turf Garden 5
01/02/2022 Hoses Garden 6
01/02/2022 Rakes Garden 7
01/02/2022 Cooking Kitchen 8
02/02/2022 Clutlery Kitchen 4000
02/02/2022 Tops Clothes 400
02/02/2022 Shoes Clothes 600
02/02/2022 Turf Garden 800
02/02/2022 Hoses Garden 10
02/02/2022 Rakes Garden 12
02/02/2022 Cooking Kitchen 14
4

Hi @beginof
Are you looking for something like this?

import pandas as pd
from dash import Dash, Input, Output, callback, dcc, html
import plotly.express as px
import dash_bootstrap_components as dbc


df = pd.read_csv('data1.csv')

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([

    html.Label('Select Date:'),
    dcc.Dropdown(
        id='date-value',
        options=[{'label': x, 'value': x} for x in sorted(df['Date'].unique())],
        multi=True
    ),

    dcc.Graph(id='line-chart',)

])


@callback(
    Output('line-chart', 'figure'),
    Input('date-value', 'value'),

)
def line_chart(value):
    dff = df[df['Date'].isin(value)]
    dff = dff.groupby('Date')['MTD'].sum().reset_index()
    print(dff)
    fig = px.line(dff, 'Date', 'MTD')
    return fig


if __name__ == '__main__':
    app.run_server()
5

Hi @adamschroeder,

It seems to be multiple date picked, right?

Can it be, let say I select 07/07/2022, can the previous month-to-date’ data also auto display in my chart instead of select the last month’s date?

6

hi @beginof
I’m not sure I completely understand what you mean with previous month to date data. Can you give me an example from the data you shared?

For example, if the user selects 02/02/2022, you would like…?

7

Hi @adamschroeder

Sorry for the confusing.

For example,
if user select 02/02/2022, the line chart should automatic display two line month-to-date data which first-line is January month-to-date (data from 01/01/2022-02/01/2022) and second line is February month-to-date (data from 01/02/2022-02/02/2022).

8

Anyone can have any idea about this?