coding-with-adam / dash-by-plotly Goto Github PK
View Code? Open in Web Editor NEWInteractive data analytics
Home Page: dash-by-plotly.coding-with-adam.vercel.app
Interactive data analytics
Home Page: dash-by-plotly.coding-with-adam.vercel.app
As explained in the dash-mantine-components Getting Started page, the app needs to be wrapped around a dmc.MantineProvider
, otherwise an error is thrown (only in debug mode) and the alert is not visible.
Proposed fix:
Change line 21 of Good_to_Know/Dash2.0/Exercises/solution-4.py from
app.layout = dbc.Container([mytitle, myalert, mygraph, dropdown])
to
app.layout = dmc.MantineProvider([mytitle, myalert, mygraph, dropdown])
What should I do about this?
Dash-by-Plotly-Coding-with-Adam/Bootstrap/bootstrap_modal.py:4: UserWarning:
The dash_core_components package is deprecated. Please replace
import dash_core_components as dcc
with from dash import dcc
import dash_core_components as dcc
Traceback (most recent call last):
File "Dash-by-Plotly-Coding-with-Adam/Bootstrap/bootstrap_modal.py", line 22, in
dbc.FormGroup(
File "Dash-by-Plotly-Coding-with-Adam\Bootstrap.venv\lib\site-packages\dash_bootstrap_components_init_.py", line 51, in getattr
raise AttributeError(
AttributeError: FormGroup was deprecated in dash-bootstrap-components version 1.0.0. You are using 1.2.1.
Hey Adam!
I looked at the video of "Side Navigation Bar" on your youtube channel,and I got a question, I want to design a complicated app by just using side bar. In order to do this , I have to create another app, but I don't known how to deal with these two callbacks.
the code as following:
import dash
import dash_bootstrap_components as dbc
from dash import html,dcc
import plotly.express as px
from dash.dependencies import Input,Output
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Bootstrap/Side-Bar/iranian_students.csv')
app2=dash.Dash(name,external_stylesheets=[dbc.themes.BOOTSTRAP],suppress_callback_exceptions=True)
server = app2.server
df2 = px.data.tips()
days = df2.day.unique()
app2.layout = html.Div([
dcc.Dropdown(
id="dropdown",
options=[{"label": x, "value": x} for x in days],
value=days[0],
clearable=False,
),
dcc.Graph(id="bar-chart"),
])
@app2.callback(
Output("bar-chart", "figure"),
[Input("dropdown", "value")])
def update_bar_chart(day):
mask = df2["day"] == day
fig = px.bar(df2[mask], x="sex", y="total_bill",
color="smoker", barmode="group")
return fig
app=dash.Dash(name,external_stylesheets=[dbc.themes.BOOTSTRAP])
SIDEBAR_STYLE={
'position':'fixed',
'top':0,
'left':0,
'bottom':0,
'width':'16rem',
'padding':'2rem 1rem',
'background-color':'#f8f9fa',
}
CONTENT_STYLE={
'margin-left':'18rem',
'margin-right':'2rem',
'padding':'2rem 1rem',
}
sidebar=html.Div(
[
html.H2('Sidebar',className='display-4'),
html.Hr(),
html.P(
'Number of students per education level',className='lead'
),
dbc.Nav(
[
dbc.NavLink('Home',href='/',active='exact'),
dbc.NavLink('Page 1',href='/page-1',active='exact'),
dbc.NavLink('Page 2',href='/page-2',active='exact'),
],
vertical=True,
pills=True,#
),
],
style=SIDEBAR_STYLE,
)
content=html.Div(id='page-content',children=[],style=CONTENT_STYLE)
app.layout=html.Div([
dcc.Location(id='url'),
sidebar,
content
])
@app.callback(
Output('page-content','children'),
[Input('url','pathname')]
)
def render_page_content(pathname):
if pathname=='/':
return [app2.layout]
elif pathname =='/page-1':
return [
html.H1('Grad School in Iran',
style={'textAlign':'center'}),
dcc.Graph(id='bargraph',
figure=px.bar(df,barmode='group',x='Years',
y=['Girls Grade School','Boys Grade School']))
]
elif pathname =='/page-2':
return [
html.H1('High School in Iran',
style={'textAlign':'center'}),
dcc.Graph(id='bargraph',
figure=px.bar(df,barmode='group',x='Years',
y=['Girls High School','Boys High School']))
]
return dbc.Jumbotron(
[
html.H1('404 : Not found' ,className='text-danger'),
html.Hr(),
html.P(f'The pathname {pathname} was not recognised...')
]
)
if name=='main':
app.run_server(debug=True,port=3001)
I have also looked at the video of Deploy_App_to_Web\Multipage_App on your channel , but i think that using side bar is much more easier than building a multipage app. Looking for you support.
Hi @Coding-with-Adam ,
Inside pages/histogram.py if i use "from app import app".I am getting the below error.
ImportError: cannot import name 'app' from partially initialized module 'app' (most likely due to a circular import)
How can get an instance of app of inside pages/ any component?
from app import app
ImportError: cannot import name 'app' from 'app'
Hi,
I just watched your video to get started working with Dash. On attempting to build the files locally I ran into this issue.
I was wondering how you got around it in your project as i have pulled directly from the github here and am still having the issue.
Thanks,
Max
I am trying to create a dashboard consisting of 8 buttons, each of which corresponds to a filtered df and 4 dropdowns. The attempt was to take the filtered df according to the triggered button and use 4 columns of the df for 'options' of 4 different dcc.dropdown. But dash shows this error message:
In the callback for output(s):
MBD.options
Urbanity.options
Outlet.options
Chain.options
Output 1 (Urbanity.options) is already in use.
Any given output can only have one callback that sets it.
To resolve this situation, try combining these into
one callback function, distinguishing the trigger
by using dash.callback_context if necessary.
My callback is:
@app.callback([Output('MBD', 'options'), Output('Urbanity', 'options'), Output('Outlet', 'options'),
Output('Chain', 'options')],
[Input('all','id'), Input('fmcg','id'), Input('bev','id'), Input('tob','id'),
Input('food','id'), Input('drug','id'), Input('liquor','id'),
Input('unilever','id')])
def update_dd(all_b, fmcg_b, bev_b, tob_b, food_b, drug_b, liq_b, unil_b):
ctx = dash.callback_context
dff = pd.DataFrame()
if not ctx.triggered:
button_id = 'all.id'
else:
button_id = ctx.triggered[0]['prop_id']
if button_id == 'all.id' :
dff = alloutlet_df.copy()
elif button_id == 'fmcg.id':
dff = fmcg_df.copy()
elif button_id == 'bev.id':
dff = bev_df.copy()
elif button_id == 'tob.id':
dff = tob_df.copy()
elif button_id == 'food.id':
dff = food_df.copy()
elif button_id == 'drug.id':
dff = drug_df.copy()
elif button_id == 'liquor.id':
dff = liquor_df.copy()
elif button_id == 'unilever.id':
dff = unilever_df.copy()
else:
dff = df.copy()
mbd_opt = {'label':dff['Region'].unique(), 'value':dff['Region'].unique()}
urb_opt = {'label':dff['Urbanity'].unique(), 'value': dff['Urbanity'].unique()}
out_opt = {'label':dff['Outype_panel'].unique(), 'value':dff['Outype_panel'].unique()}
chain_opt = {'label':dff['CHAIN'].unique(), 'value':dff['CHAIN'].unique()}
return [mbd_opt, urb_opt, out_opt, chain_opt]
Dear Charming Data,I am a newbee of plotly-dash , when i build a sever by "app.run_server(debug=True)",and then open the link,my request was denied . and if i turn the 'debug' option as False , comes the following error:
Traceback (most recent call last):
File "D:\BaiduNetdiskDownload\BeforeAfter\before-after.py", line 45, in
app.run_server()
File "D:\Program Files\Python36\lib\site-packages\dash\dash.py", line 2033, in run_server
self.server.run(host=host, port=port, debug=debug, **flask_run_options)
File "D:\Program Files\Python36\lib\site-packages\flask\app.py", line 922, in run
run_simple(t.cast(str, host), port, self, **options)
File "D:\Program Files\Python36\lib\site-packages\werkzeug\serving.py", line 1008, in run_simple
inner()
File "D:\Program Files\Python36\lib\site-packages\werkzeug\serving.py", line 957, in inner
fd=fd,
File "D:\Program Files\Python36\lib\site-packages\werkzeug\serving.py", line 781, in make_server
host, port, app, request_handler, passthrough_errors, ssl_context, fd=fd
File "D:\Program Files\Python36\lib\site-packages\werkzeug\serving.py", line 686, in init
super().init(server_address, handler) # type: ignore
File "D:\Program Files\Python36\lib\socketserver.py", line 456, in init
self.server_bind()
File "D:\Program Files\Python36\lib\http\server.py", line 138, in server_bind
self.server_name = socket.getfqdn(host)
File "D:\Program Files\Python36\lib\socket.py", line 673, in getfqdn
hostname, aliases, ipaddrs = gethostbyaddr(name)
UnicodeDecodeError: 'utf-8' codec can't decode byte 0xba in position 0: invalid start byte
hey adam, hope are you doing well !
I've been given an assignment to create a some charts using Dash by plotly, and I'm having some trouble to execute it. I was given an excel file to work upon, and I watched your video on YT and found my way to your GitHub. I was wondering if you could help me execute it the way you've in your YT video.
Hi all, if you tried to run the code and you failed (like me for example) (Syntax error), I optimized the creator code in places where I was getting the error, here: (Read the information at the end)
import os
import openai # pip install openai
from dash import Dash, dcc, html, Input, Output, State # pip install dash
import dash_bootstrap_components as dbc # pip install dash-bootstrap-components
openai.api_key = "YOUR_OPENAI_API_KEY"
model_options = [
'text-davinci-003',
'text-curie-001',
'text-babbage-001',
'text-ada-001',
'text-davinci-002',
'text-davinci-001'
]
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([
html.H1("Dash-ChatGPT Example"),
dbc.Row([
dbc.Col([
html.Label("Model:"),
dcc.Dropdown(model_options, value="text-davinci-003", id='models'),
], width=6),
dbc.Col([
html.Label("Temperature:"),
dcc.Slider(min=0, max=2, step=0.1, value=0.7, id='temperatures'),
], width=6)
], className='mb-5'),
dbc.Row([
dbc.Col([
dcc.Input(id='input-text', type='text', placeholder='Type your message here', style={'width': 500}),
html.Button('Submit', id='submit-button', n_clicks=0),
], width=6)
], justify="center"),
dcc.Loading(
children=[html.Div(id='output-text')],
type="circle",
)
])
@app.callback(
Output('output-text', 'children'),
Input('submit-button', 'n_clicks'),
State('input-text', 'value'),
State('models', 'value'),
State('temperatures', 'value')
)
def update_output(n_clicks, text_input, model_input, temp_input):
if n_clicks > 0:
# Get the response from ChatGPT
response = openai.Completion.create(
model=model_input,
prompt=text_input + "\n",
max_tokens=400,
temperature=temp_input
)
generated_text = response.choices[0].text
# Return the generated text as the output
return generated_text
return ""
if __name__ == '__main__':
app.run_server(debug=True)
Info: you MUST install the openai pip:
pip install openai dash dash-bootstrap-components
Bye.
Hi,
Is there a specific reason you use % string formatting here, whereas in line 70 you use f-string?
Windows 10 Enterprise for local. Windows Server 2022 Standard for the server
3.10 Python, Microsoft 365 Apps for enterprise, 0.28.7 xlwings
I have a web interface project that is using a connection between XLwings and Dash. The Excel file is large and takes about 15 seconds to load, while the calc only takes 5 seconds. Since it is setup to run over the web, each client will have their own instance of Excel. XLwings has a way to handle this.
Currently the setup is that once the user enters their setup and clicks submit, only then does the connection start.
If this was normal python, I could just start the connection earlier. However, with Dash the only connection between the layout, and the function definition is the Dash callback.
The goal is to load the Excel file as soon as the page is loaded, while that is happening the user would enter their parameters, the time that takes to load would be saved and the result return time would be shortened by that time.
*
I would like to use a chained callback. The first callback would load on page load with the xlWings connection. 'prevent_initial_call' would be false.
The final callback I have setup the 'prevent_initial_call' to True because I don't want this to run until they hit submit.
*
If I setup the connection as a variable or function, it doesn't look like you can pass these through the callback in anyway.
Project requirements are that the Excel and its VBA not be converted to Python/Dash.
Possible to launch one, or a few, Excels' on launch, and have XLwings grab the PID somehow? Would another Excel extension handle this? I know we're not supposed to use 'Global' variables, but that might fit this particular need.
Above this code part is the layout setup for Dash
@callback(
#many Output and Inputs. Removed most for clarity.
Output(component_id='table', component_property='data'),
Input(component_id='yearSlider', component_property='value'),
)
def finalFxn(
#many parameters. Removed most for clarity.
parameter1,
parameter2
):
with xw.App(visible=True) as app:
wb = app.books.open(r"C:\Users\mike\Downloads\modified3-31.xlsm")
#logic
# excel cells = parameters from web
#logic
# parameters to web = excel
return results, graph, etc.
I see your code in : https://github.com/Coding-with-Adam/Dash-by-Plotly/blob/master/Deploy_App_to_Web/Kaggle-GGL-Collab/Dash-on-Kaggle.ipynb
It is really helpfull as only one of the solution that work on kaggle. However I have a hard time making a simpler thing. That is to make it work directly in kaggle or locally in a notebook (i.e. not building an app but having the interactive graph directly in the notebook). Any idea on how to do that ? use plotly only ?
[edit] whoops, wrong venue. Closing.
Guys,
love your work. really.
above referenced data is missing some Alaska details. Thinking it might be easier for you to update it than for me to as I have no idea where to get the geometry info and assume you have access to this via some database parsing you have already set up.
Ref my question here: https://community.plotly.com/t/alaska-by-fips-not-appearing/55846
Thank you.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.