Dropdown with Templates to variable

Dash Python
1

Hi guys,

I have a Dashboard with 8 graphs, all graphs are configurated outside of the app.layout. I call them with for e.g figure=fig6line. All is working fine so far.

     fig6line = px.scatter(dfresult, x="Time", 
                       y="Wind Speed", 
                      color="Date",
                      title = "Wind Speed per hour",
                      hover_data=["Feed 1", "Feed 2"],
                     template=**dark**)



     app.layout = html.Div([
                  html.Div([.....
                          dcc.Graph(id="g6",style={"width":graphwidth,
                                              "height": graphheight,
                                               'display': 'inline-block', 
                                               
                                               'horizontal-align': 'right',
                                               }, 
                          figure=fig6line,
                          
                              
                              ),.........




   @app.callback(Output("g6", "style"),[Input("drop-temp", "value")])

  def update_style(value):

return {"template":"value"}

i have a dropdown menue with all possible templates from plotly. i try to change all graphs (the “dark” variable) with this dropdown menue. Is there any way to do this ? I tried also to change the mother “id6” and the figure by itself but no idea how to change this. Please help

2

More code would be nice. A quick question, should these both be in quotes? return {“template”:“value”}

4

I’d love to help, but I’d need you to post a functional section of your code. Can you post your code with one dropdown, one graph, and then I can work with you. As it is, you cut out a lot and I don’t want to assume. For all we know the problem is innocuous in something you didn’t include.
Thanks!
Max

5 
'''
import dash 
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input,Output,State
import datetime
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
import plotly.figure_factory as ff
import csv
#load external css stylesheet for basic design
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

###################################################
#load csv files and preprocessing data for plotting
###################################################
dfresult = pd.read_csv("1.csv", sep=",")
dfradar =  pd.read_csv("2.csv", sep=",")
dfoutput = pd.read_csv("3.csv", sep=",")
dfavg = pd.read_csv("4.csv",sep=",")

#set template, choose one of them
templates = ['ggplot2', 'seaborn', 'simple_white', 'plotly','plotly_white', 'plotly_dark', 'presentation', 'xgridoff', 'ygridoff', 'gridon']
dark = "seaborn"


def template_picker(template):
    dark = template
    return dark

###################################################
#creating figures (charts)
###################################################
#1 chart barchart, predicted day and similar
fig1bar = px.bar(dfbar1, x='Date',
                 y='Consumption',
                 hover_data=["Date", "Consumption"],
                 labels={'Consumption':'kW/h Consumption'},
                 color='Date',
                 text="Date",
                 title = "Demand ",
                 template = dark
                 
                 )
fig1bar.update_xaxes(type = 'category')
name = []
name = dfbar1.Date.unique().tolist()
for i in range(len(fig1bar.data)):
    fig1bar.data[i].update(name=str(name[i]))

#2 chart
    fig2line = px.scatter(dfresult, x="Time", 
                      y="Consumption", 
                      color="Date",
                      title = "Demand on Similar Days ",
                      template=dark)

name = []
name = dfresult.Date.unique().tolist()

fig2line.update_layout(hovermode='closest')
for i in range(len(fig2line.data)):
    fig2line.data[i].update(mode='markers+lines',name=str(name[i]))

app.layout = html.Div([
                    html.Div([
                   
                    html.Button('Update Charts', id='button2',
                                style={
                                                    "width": "auto",
                                                    "float":"right",
                                                    'display': 'inline-block'
                                                   }),
                    dcc.Dropdown(id='drop-temp',
                                 style={
                                       
                                        "height": "2em",
                                        "display": 'inline-block',
                                        "width": "15em"
                                        
                                        },
                                 
                                    options=[
                                        {'label': str(i), 'value': i} for i in templates]
                                        ,placeholder="Select Template"
                                        ),
                    
                    ],
                        style={"height": "40px",
                               "width" : "100%",
                               
                             })
                        ,

                    html.Div(id="empty slot2",style={"height": "10px"}),

                    html.Div([id="graphplotter",
                    dcc.Interval(
                                                id='interval-component2',
                                                interval=1*1000, # in milliseconds
                                                n_intervals=0
                                                ),
                            
                    dcc.Graph(id="g1",style={"width":graphwidth,
                                                   "height": graphheight,
                                                   'display': 'inline-block', 
                                                   'horizontal-align': "left",                
                                                   
                                                   },
                              figure=fig1bar,
                              
                              ),
                    dcc.Graph(id="g2",style={"width":graphwidth,
                                                   "height": graphheight,
                                                   'display': 'inline-block', 
                                                   
                                                   'horizontal-align': 'middle',
                                                   }, 
                              figure=fig2line,
                                  
                                  ), ),  
    ],
    style={
                    })
                             ],
                      style={"margin":"2em",
                             "template":"dark"})
                            
    
                             
if __name__ == "__main__":
    app.run_server()
    
    
'''

i hope you can help me, drop-temp contains all style templates of plotly, i want so select one and change all graphs (so the “template = dark”

6

Thanks. I’ve been spending all day trying to figure out why I can’t get crontab to run my python script in a Ubuntu environment. Supposedly these virtual environments are supposed to make our lives easier. That has not been my experience with either pipenv or venv. Any-who, as soon as I’m off this rack of torture I’ll be playing with this!

7

Hi, I keep getting an error here: html.Div([id=“graphplotter” SyntaxError: invalid syntax.

Unfortunately, when I paste your code into VC the indentation is all screwed up. Also, can you simplify more? We only need to change the style for one graph first, right? Or have you already done that? Also, I’d just put some dummy data into the graph in the app.layout for now so we have the same thing. I’m still a newbie to this so the less I can screw up the better :wink: Thanks!

8

Hi, i cutted lots of my code…I want to update all graphs @ once…you cant copy my code, its more to see what I want as a result.

They Keyissue is to use a dropdown and with a callback return a variable (template). But i have another idea, so maybe to define the graphs in the app.layout and change the layout of the figure

9

The thing that helped me was to think hard about whether I was doing stuff within Python, or preparing stuff for DASH to send to React, essentially. Also, if you’re updating multiple graphs at the same time you may need multiple callbacks, some even dummy ones? to update the style of each chart. I couldn’t find a way to update graph directly–I had to use a callback. DASH hasn’t be completely clear, to me, if you must always set up callbacks linked to some HTML object to do anything. I do believe they talk about chained callbacks, but I haven’t needed that yet so have no experience. You may re-read that again. Good luck!