Hello.
The code below is working without any errors, but there are no dates on the slider line (please check the screenshot):
The ‘date’ column in the excel file has the following format: ‘yyyy-mm-dd’, but the days are always 01: 2017-12-01; 2017-05-01; 2017-02-01; 2017-08-01, etc.
So basically, the ‘date’ column contains only months and year 2017.
When I tested the output in the Jupyter Notebook i was able to see the following as the ‘slider marks’ output:
Slider(id=‘date-slider’, marks={‘2017-05-01’: ‘2017-05-01’, ‘2017-02-01’: ‘2017-02-01’, ‘2017-01-01’: ‘2017-01-01’, ‘2017-09-01’: ‘2017-09-01’, ‘2017-04-01’: ‘2017-04-01’, ‘2017-11-01’: ‘2017-11-01’, ‘2017-03-01’: ‘2017-03-01’, ‘2017-10-01’: ‘2017-10-01’, ‘2017-07-01’: ‘2017-07-01’, ‘2017-08-01’: ‘2017-08-01’, ‘2017-06-01’: ‘2017-06-01’, ‘2017-12-01’: ‘2017-12-01’}, value=‘2017-01-01’, min=‘2017-01-01’, max=‘2017-12-01’)
I’m sure there is something with the date format, but don’t know how to solve the issue.
Here is the code itself:
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
import datetime
import numpy as np
df = pd.read_excel(“stats3 - Copy.xlsx”,sheet_name=0)
#sort dataframe by date for the line plot
df2 = df.sort_values(‘date’)
games = df.game.unique()
app = dash.Dash()
app.css.append_css({‘external_url’: ‘https://cdn.rawgit.com/plotly/dash-app-stylesheets/2d266c578d2a6e8850ebce48fdb52759b2aef506/stylesheet-oil-and-gas.css’})
app.layout = html.Div([
html.Div(children=‘’‘You can select the game title you are interested in for the detailed observation on the drop-down below:’‘’,
style={‘font-family’:‘Helvetica, monospace’, ‘color’:‘#59abe3’}, className=“row”),
html.Div([
html.Div([dcc.Dropdown(
id=‘game’,
options=[{‘label’:i, ‘value’:i} for i in games],
value=‘’,
placeholder=‘Please select the game’,
multi=True)],
className=‘nine columns’)], className=“row”),
html.Div([
html.Div([
dcc.Graph(id=‘graph-with-slider’)],
className=‘nine columns’)], className=“row”),
html.Div(children=‘’‘You can select the date you are interested in on the slider below:’‘’, style={‘font-family’:‘Helvetica, monospace’, ‘color’:‘#59abe3’},
className=“row”),
html.Div([
html.Div([
dcc.Slider(
id=‘date-slider’,
min=df2[‘date’].apply(lambda x: x.strftime(‘%Y-%m-%d’)).min(),
max=df2[‘date’].apply(lambda x: x.strftime(‘%Y-%m-%d’)).max(),
value=df2[‘date’].apply(lambda x: x.strftime(‘%Y-%m-%d’)).min(),
step=None,
marks={str(date): str(date) for date in df2[‘date’].apply(lambda x: x.strftime(‘%Y-%m-%d’)).unique()}
)], className=‘nine columns’),
], className=“row”)
])
@app.callback(
dash.dependencies.Output(‘graph-with-slider’, ‘figure’),
[dash.dependencies.Input(‘date-slider’, ‘value’),
dash.dependencies.Input(‘game’, ‘value’)])
def update_figure(selected_date, game):
filtered_df = df.loc[df2[‘date’].apply(lambda x: x.strftime(‘%Y-%m-%d’)) == selected_date]
if (game != ‘’ and game is not None):
filtered_df = filtered_df[df.game.str.contains(‘|’.join(game))]
traces =
for i in filtered_df.game.unique():
df_by_game = filtered_df[filtered_df[‘game’] == i]
traces.append(go.Scatter(
x=df_by_game[‘conversions’],
y=round((df_by_game[‘revenue’]),2),
text="Advertiser: " + df_by_game[‘advertiser’] + “
” + "Publisher: " + df_by_game[‘affiliate’],
mode=‘markers’,
opacity=0.7,
marker={‘size’: 15,},
name=i))
return {
‘data’: traces,
‘layout’: go.Layout(
xaxis={‘title’: ‘Conversions’},
yaxis={‘title’: ‘Revenue’},
margin={‘l’: 40, ‘b’: 40, ‘t’: 50, ‘r’: 10},
legend=dict(x=-0.2, y=0.5),
hovermode=‘closest’,
title=“Something”)
}
if name == ‘main’:
app.run_server()