Have a calendar callback update a variable

Dash Python
1

Hi,

I’m trying to create a web app that shows daily stats based on locally stored csv files. When I click on the calendar, I want it to update the date value, so the opened csv file changes and the data shown reflects it. Guessing it’s something obvious/silly that I’m not understanding, but I’m having a lot of trouble getting the callback to work. Would love if someone could help point me in the right direction.

My code is here:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import csv
from datetime import datetime as dt
from datetime import timedelta

now = dt.now() - timedelta(1)
date = (str(now.year) + '-' + str(now.month) + '-' + str(now.day))

def get_csv(datestring):
    f = open((datestring + '.csv'), 'r')
    csvfile = csv.reader(f)
    tdata = list(csvfile)
    return(tdata)

app = dash.Dash(__name__)

colors = {
    'background': '#FFFFFF',
}

app.layout = html.Div(children=[
    dcc.DatePickerSingle(
        id = 'callendar-1',
        min_date_allowed = dt(2019, 1, 11),
        max_date_allowed = now,
        initial_visible_month = now,
        date = dt(2019, 1, 12)),
    html.Div(id = 'callendar-output'),
    dcc.Graph(id = 'Daily-Ticket-Stats',
              figure = {
                  'data': [
                      {'x': get_csv(date)[0], 'y': get_csv(date)[13], 'type': 'line', 'name': 'Total L1', 'marker': {'color': 'rgb(0, 89, 234)'}},
                      {'x': get_csv(date)[0], 'y': get_csv(date)[17], 'type': 'bar', 'name': 'Diff L1', 'marker': {'color': 'rgb(0, 89, 234)'}},
                      ],
                  'layout': {
                      'title': 'Ticket Stats',
                      'plot_bgcolor': colors['background'],
                      }
                  }
              )
])

@app.callback(
    dash.dependencies.Output('Daily-Ticket-Stats', 'figure'),
    [dash.dependencies.Input('callendar-1', 'date')]
    )
def update_output(date):
    if date is not None:
        date = dt.strptime(date, '%Y-%m-%d')
        date_string = date.strftime('%Y-%m-%e')
        date = date_string + ".csv"
        return date

if __name__ == '__main__':
    app.run_server(debug=True)
2

I think it’s not working because your call back is sending a string for your graphs ‘figure’, when it should be returning the figure itself.

So something like this might work?

@app.callback(
    dash.dependencies.Output('Daily-Ticket-Stats', 'figure'),
    [dash.dependencies.Input('callendar-1', 'date')]
    )
def update_output(date):
    if date is not None:
        date = dt.strptime(date, '%Y-%m-%d')
        date_string = date.strftime('%Y-%m-%e')
        date = date_string + ".csv"
        csv = get_csv(date)

 figure = {
                  'data': [
                      {'x': csv[0], 'y': csv[13], 'type': 'line', 'name': 'Total L1', 'marker': {'color': 'rgb(0, 89, 234)'}},
                      {'x': csv[0], 'y': csv[17], 'type': 'bar', 'name': 'Diff L1', 'marker': {'color': 'rgb(0, 89, 234)'}},
                      ],
                  'layout': {
                      'title': 'Ticket Stats',
                      'plot_bgcolor': colors['background'],
                      }
                  }

return figure

Excuse the terrible formatting - can’t get the hand of this editor! The figure = { should be at the same indent as csv =

1 Like
3

Thanks Chris :slight_smile: Had to pay around a little but finally got it working. Couldn’t have done it without your help mate.

Here’s the current (working) script, in case anyone else has this issue:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import csv
from datetime import datetime as dt
from datetime import timedelta
import re

app = dash.Dash(__name__)

colors = {
    'background': '#FFFFFF',
}

app.layout = html.Div(children=[
    dcc.DatePickerSingle(
        id = 'callendar-1',
        min_date_allowed = dt(2019, 1, 15),
        max_date_allowed = dt(2019, 2, 16),
        initial_visible_month = dt(2019, 2, 16),
        date = dt(2019, 2, 15)),
    html.Div(id = 'callendar-output'),
    dcc.Graph(id = 'Daily-Ticket-Stats',
#              figure = {
#                  'data': [
#                      {'x': get_csv(date)[0], 'y': get_csv(date)[13], 'type': 'line', 'name': 'Total L1', 'marker': {'color': 'rgb(0, 89, 234)'}},
#                      {'x': get_csv(date)[0], 'y': get_csv(date)[17], 'type': 'bar', 'name': 'Diff L1', 'marker': {'color': 'rgb(0, 89, 234)'}},
#                      ],
#                  'layout': {
#                      'title': 'Ticket Stats',
#                      'plot_bgcolor': colors['background'],
#                      }
#                  }
              )
])

@app.callback(
    dash.dependencies.Output('Daily-Ticket-Stats', 'figure'),
    [dash.dependencies.Input('callendar-1', 'date')]
    )
def update_output(date):

    if date is not None:
        thedate = dt.strptime(date, '%Y-%m-%d')
        date_string = str(thedate)
        date_string = re.sub(' 00:00:00', '', date_string)
        f = open((date_string + '.csv'))
        csvfile = csv.reader(f)
        tdata = list(csvfile)
        figure = {
            'data': [
                      {'x': tdata[0], 'y': tdata[13], 'type': 'line', 'name': 'Total L1', 'marker': {'color': 'rgb(0, 89, 234)'}},
                      {'x': tdata[0], 'y': tdata[17], 'type': 'bar', 'name': 'Diff L1', 'marker': {'color': 'rgb(0, 89, 234)'}},
                      ],
            'layout': {
                      'title': 'Ticket Stats',
                      'plot_bgcolor': colors['background'],
                      }
                  }
    return figure


if __name__ == '__main__':
    app.run_server(debug=True)
1 Like