Line Plot (Dropdown) - Dash Python (中文字幕)
Вставка
- Опубліковано 21 лип 2024
- Learn how to make an interactive Line Plot with the Dropdown. using Dash by Plotly, all in Python. We will be using real-life data on restaurant inspections in New York City. Links below:
View my book - The Book of Dash:
www.amazon.com/Python-Dash-An...
github.com/DashBookProject/Pl...
The Code and CSS:
github.com/Coding-with-Adam/D...
Data:
drive.google.com/file/d/1jyvS...
Dash Dropdown:
dash.plot.ly/dash-core-compon...
Plotly Express Line Chart:
plot.ly/python-api-reference/...
Plotly Forum:
community.plot.ly/c/dash
Video Layout:
01:53 - Data Used
03:20 - Cleaning the Data
05:30 - App Layout
07:27 - Callback
10:15 - Line Chart with Plotly Express
13:33 - Dropdown Deep Dive
24:11 - Tip of the Week
****************************************************************************************
👉 If you appreciate these tutorials and would like to support their existence and get some perks: Patreon: / charmingdata
GitHub: github.com/sponsors/Coding-wi...
UA-cam: / @charmingdata
****************************************************************************************
very useful video.many thanks. you help me a lot .your channel is a discovery for me .thanks a lot
مرحبا بك Ayari.
I'm glad I can help you. Let me know if you have any questions with Dash Plotly.
@@CharmingData شكرا
Hi - I am displaying a graph which selects data based on a drop down using callback . In addition I am using line-group option to select or deselect different Data segments. By default all the segments are displayed on the graph which makes the graph very busy. The requirement is to only display one segment to start with and then user can select the other segments as well . Appreciate any inputs.
Regards
Jeet
Can you make a video on deploying a time series model(ARIMA, LSTM) prediction using Dash?
Hi Adam like your video, one question how to give auto refresh command through python or else….? Like html auto refresh
Great tutorial again and easy to follow. :) Is it possible to customize the annotation for Plotly express and is there an elegant way to deal with 0 data line (say I do not want the line to plot from 0 to x value as it will look ugly if there are many data later on)?
Hi Even,
Yes, for annotation customization, this webpage gives plenty of examples:
plotly.com/python/text-and-annotations/
For plotting ranges, you can use inside plotly express the following parameter:
ps.line(range_y=[5,100])
instead of zero to one hundred.
Hi Adam! Thank you for this super informative video, really appreciate it.
I'm trying to add a date picker range to the code but I'm not sure what the callback would be.
The dataframe 'dff' is for filtering with the Dropdown as you've explained.
I added another dataframe 'dff2' for start_date and end_date (got it from your date picker range video) but I'm not sure how to combine these 2 dataframes in line() function. Please help me out
Hi Vidya, I'm glad you found my videos helpful. It's hard to help without seeing the code. I recommend you post this question on the Dash Plotly Forum where we can all see your code.
community.plotly.com/
I 'm trying to do a line chart with a multi options dropdown but the options in the dropdown are not filtering the lines in the chart, instead, it have multiple lines on the right side of the line chart which are doing the work the dropdown supposed to do. Could someone have any tips to help me? Btw great video :)
Hi @axbor it's very hard to offer a solution without the code. Can you post this question on the Plotly Dash forum?
This's is exactly what I want, thanks!
Hi Adam,
It's a really a great video yaar.
One doubt , please help me.
Actually here I am try with two drop down from different columns(ex: 1st from CUISINE DESCRIPTION and 2nd from BORO).
And I am trying out to create figure as per the selection of drop down.
When I am selecting from 1st drop down figure is working fine, but while selecting from BORO not working.
I think issue is with 'callback --> buildgraph function' on below steps:
df[(df['CUISINE DESCRIPTION']==first_cuisine)|
(df['CUISINE DESCRIPTION']==second_cuisine)|
Could you please help me out?
Hi Satya, the second cuisine should be BORO. You're comparing two cuisines instead of one cuisine and one BORO
Thank you!!!
Your Video helped me a lot!
Just one question.
If I want to make drop down 'CUSINE DESCRIPTION (CAMIS)'
It works if I do it as below
{'label': x, 'value': x} for x in [i + " " + "(" + j + ")" for i, j in zip(CUSINE DESCRIPTION, CAMIS)]
Then how do I make the value become CUSINE DESCRIPTION ?
Does that value equal to
[(Input('cusine_one', 'value') ?
and how does this value follow up on def build graph(first_cusine, second_cusine, third_cusine)?
In my case I want to use that value to be affected to def build graph(value) as string.
How can I do this?
Hi Eon, I don't think you can combine the two columns into one. It would give you problems when using the callback and filtering the data inside the "def build_graph ()". I would use only one column or combine the two columns on the excel sheet first, then play around with it in the code.
Hi Adam, your videos really help me with a lot of questions, but i have a doubt, how can "split" or show two Div in the same "line". I have a Graph inside a div, and a description of that graph, but the description is showing under the graph, not next to... In your video show the className = nine columns but didnt solve my problem, can you helpme? And thanks for all your content
hi Maria Gabriela, would recommend using dash bootstrap components for layout design. dbc.Row() and dbcCol(). I have a couple of videos on that topic. You will have much more flexibility with Dash Bootstrap
@@CharmingData Hey thank you ♥️ tomorrow I will seek those videos, and search the documentation of bootstrap, thanks again
Hi Adam, how do you change the position of the dropdown? For example, if I want my dropdown to be on the left side of the graph, how do I do that?
Hi Vidya, you can write the Div with the dropdown first, and then below it the div with the graph. Just make sure to choose amount of columns for each Div, and don't surpass 12
@@CharmingData okay thank you Adam! I'll try it out
Can you do a dropdown that if nothing is selected, will include everything from the dataframe? Is that option available?
Hi @Dan, good question. Yes, you can do that. In the callback function you should write something like: if data is None or if len(data)==0 (in cases where the data value type is list) then, grab the original/global df.
let me know if this doesn't makes sense to you.
Sir, do you have any video that show how to add sum of data in y axis?
I don't think so, @khairil
Trying to get to data but get this: "Sorry, the file you have requested does not exist."
Thanks for your video.
I have another question that came into my mind when I finished practicing your code, which I want to see the score by multiple selections/options. E.g. apart from the CUISINE DESCRIPTION, I also want to check the result by BORO to see the CUISINE score in different boroughs, so that there will be another dropdown needed. I added another dropdown in html, and in callback. However, it did not work as expected, here is the main part code:
@app.callback(
Output('our_graph','figure'),
[Input('borough_selection', 'value'),
Input('cuisine_one','value'),
Input('cuisine_two','value'),
Input('cuisine_three','value')]
)
def build_graph(boro_selection, first_cuisine, second_cuisine, third_cuisine):
filter_boro_df = df[df['BORO']==boro_selection]
dff=filter_boro_df[(filter_boro_df['CUISINE DESCRIPTION']==first_cuisine)|
(filter_boro_df['CUISINE DESCRIPTION']==second_cuisine)|
(filter_boro_df['CUISINE DESCRIPTION']==third_cuisine)]
fig = px.line(dff, x="INSPECTION DATE", y="SCORE", color='CUISINE DESCRIPTION', height=600)
fig.update_layout(yaxis={'title':'NEGATIVE POINT'},
title={'text':'Restaurant Inspections in NYC',
'font':{'size':28},'x':0.5,'xanchor':'center'})
will you have time to help with this a bit?
Thanks
Hi, it could be many different reasons for which it's not working. The first thing I'm thinking of is: did you forget to add the 'boro' column to the df? Remember at the very beginning of the code I did: df = df.groupby(['INSPECTION DATE','CUISINE DESCRIPTION','CAMIS'], as_index=False)['SCORE'].mean()
So 'Boro' is not included in the dataframe you're working with. Did you include 'Boro' in your dataframe?
@@CharmingData Yes I did that, and all the BORO values could be seen in the selection. The issue is the line showed wrong shape and value, I assume it is the reason happened in the code below:
def build_graph(boro_selection, first_cuisine, second_cuisine, third_cuisine):
filter_boro_df = df[df['BORO']==boro_selection]
dff=filter_boro_df[(filter_boro_df['CUISINE DESCRIPTION']==first_cuisine)|
(filter_boro_df['CUISINE DESCRIPTION']==second_cuisine)|
(filter_boro_df['CUISINE DESCRIPTION']==third_cuisine)]
No trouble, I will keep trying, thanks for replying!
@@evileyelivelumix831 I'm sorry I couldn't be more helpful. It's hard to read the code and go deep into the problem on youtube. For future challenges with the code you see on my video, feel free to use community.plot.ly/c/dash/16 . This is a forum that has a big Dash community that helps each other out. You can also find me there as @Charming Data
Is it possible to have drop down option to show a line chart of the unfiltered data ?
Currently I have build a line plot having filtered data using drop down and it works pretty well. But I having problem to show a plot with all the data in.
It will be great if you give me some hints and pointers.
Thanks in advance !!
What do you mean tigerhoosk? do you want to have a dropdown option that shows all data in the line chart?
@@CharmingData Yes, an option to show all the data without the filter. For my chart, I using scatter plot.
@@tigerhoosk you can manually insert dropdown options and add an ALL option like this:
dcc.Dropdown(id='mydropdown',
options=[
{'label': 'Deaths', 'value': 'deaths'},
{'label': 'Cases', 'value': 'cases'}
{'label': 'All', 'value': 'ALL'}
],
Then, in the callback, say:
if value == ALL:
dff = df
fig = px.pie(dff, x="xxxxxx", y="xxxxxx")
@@CharmingData thanks ! think I am on the right track. It works.
This is what I did :
a={'label':'All, 'value':'All'}
options=[{'label':x,'value':x} for x in df.sort_values('Tool No.')['Tool No.'].unique() if pd.notnull(x)]
options.append(a)
.....
.....
dcc.Dropdown(id='mydropdown',
options=options
Really appreciates your videos for Dash python, learnt a lot from you.
@@tigerhoosk Looks good, tigerhoosk. Well done :) I hope my tutorials keep helping you learn. If you'd like to receive more Dash Plotly tips and learning opportunities, while supporting these tutorials, you can become part of my Patreon community:
www.patreon.com/charmingdata
It would mean a lot to me to see you there.
Good luck with your future dashboards :)
Is there a way to have a dropdown where it changes the graph? Such as going from line graph to bar graph, and then having another dropdown where you can change the data that will be in the graphs? So in a sense having two dropdowns. One for picking different data and another to change the graph.
Yes Marco, just connect the dropdown value inside the app.callback Input(), and the Output would be figure of graph. Then, inside the callback function, do:
def update_grpah(drop_value):
if drop_value == 'line':
return px.line(....)
elif drop_value == 'bar':
return px.bar(...)
Make sure that your dropdown options in the layout have the two strings 'line' and 'bar'
@@CharmingData Just looked through your channel and saw a callback video you made. Will be checking it out. Thank you!
@@marcosrod7260 you don't need the dynamic callback one for your problem. I would recommend watching the very first video I made
@@CharmingData Update [Been working on it for about 3 days now haha] I looked at your video with the call backs, the documentation, and found out what I was doing wrong. Instead of returning a graph I had to return the fig. As the fig has a dropdown update menus with buttons for different v graphs[Tables,Scatter,and Pie]. All I had to do was implement a the dropdown dcc and have a html.Div with dcc.Graph(id='the_graph'). I do the input and output call backs and just dump all the code I had in the callback function and return the fig. As of now it works. Yes! However, the formatting is a bit off and it resets to the table instead of where the user was currently at when they made the switch. However, I solved the headache of the problem that I had, and formatting shouldn't be too bad. Thanks for your replies and channel for helping me keep my sanity haha. Cheers!
@@marcosrod7260 I'm glad you got it. It's such a good feeling to succeed after so much time working on a problem. Good luck with future dashboards
Hey bro great work, this video really made my day.!! :-)
Just a few questions, What about multiple selection with a single drop down? Why are we using three drop downs? If multiple selection is possible how should we modify the Callback??
Definitely, I did three separate dropdowns just for practice and example purposes. But you can defnitely use one dropdown with multiple valus chosen. You would change the callback to look like this:
@app.callback(
Output('our_graph','figure'),
[Input('cuisine_one','value')]
)
Just remember that the Input value/s will now be a list.
@@CharmingData What do you mean Input value is now a list? Thanks.
@@stefano5718 Hi Stefano. Because the dropdown originally only allowed one value to be chosen (multiple=False), the value type is string. So any value within the [Input('cuisine_one','value')] will show as a string.
But if you change your dropdown to multi=True, any value within the [Input('cuisine_one','value')] will show as a list of strings/options chosen.
@@CharmingData thanks for the reply. I kinda understand what you mean. I tried to set as multi dropdown but it returned an error. I think the def must be changed, because of the list I guess, is it right?
@@stefano5718 the def argument doesn't need to be changed, but how you populate the figure will.
For example, just try to print the dropdown value inside the def, once when the dropdown is multi=True and once when it's multi=False.
do you see the difference in values?
Hello. I have the css file in the asset folder which is in the same folder as my py.file, but the layout does not change according to the css file. It's like it is not even reading it. Do you have any idea why it could be happening? Thanks!
Hi @Uni 13 I have no idea why it's not working for you. Did you spell the folder correctly? it's has to be spelled "assets" and not "asset"
@@CharmingData yes i did, thank you very much anyways.
God !
How to create zooming line graph ( I have minutes and seconds in date and I wanna zoom it after picking data )?
Hey Johny Lemon, by default, Plotly allows zoomin with the mouse. Just hover over the graph and left-click, hold it, and drag the box the size of the zoom you want.
@@CharmingData hello , keep getting error 'tuple indices must be slice or int ,not str' on plotly after datepicker and drop-down filters the data , but in Jupyter the code works fine ,any ideas?
@@johnylemon473 that's weird. Try to print(type(df['x'])). The x should be the indices of the dataframe that the error message is referring to. If they are strings, you have to convert to integers for it to work.
how can I change the line colors ? I want to put a different color than the defaults
Hi Ahsanur, just using a different list inside the "color" parameter inside px.line() or use the "color_discrete_sequence" parameter. You can read more about these parameters here: plotly.com/python-api-reference/generated/plotly.express.line.html
@@CharmingData Didn't get it. we arer already putting color = 'Cuisine Description' in this example.
So can you show me the example to change the color of these three lines?
@@ardodul Sure. Add this parameter inside the line chart.
px.line(color='CUISINE DESCRIPTION', color_discrete_sequence=['green', 'yellow', 'red'])
This means that the first line would be green, then yellow, and the third line red.
""ValueError: All arguments should have the same length. The length of argument `wide_variable_0` is 1, whereas the length of previously-processed arguments ['time'] is 121546 "" I am getting this error while plotting my datasheet.
So can u guide me for solutions.
hi, it's pretty hard to solve without seeing the code. I recommend you post this question on the Plotly forum: community.plotly.com/
@@CharmingDataokay, Thank you.
Hi Charming data your videos are fantastic could u please make a video on drop down with histogram or barchart so what i want to learn is when ever a user selects a drop down a particular bar graph related to that appeaser
Hi Adnan. I created a similar tutorial to the one you are looking for. ua-cam.com/video/FuJOsZgo4nU/v-deo.html just replace the radioItem with a dropdown.
@@CharmingData Hi Thanks a tone for helping me so much i made the changes and drop down with graph also now i want for every drop down a different graph
The code is below:
# Bar charts are useful for displaying data that is classified into nominal or ordinal categories.
# A bar chart uses bars to show comparisons between categories of data. A bar chart will always have two axis.
# One axis will generally have numerical values, and the other will describe the types of categories being compared.
import pandas as pd #(version 0.24.2)
import datetime as dt
import dash #(version 1.0.0)
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly #(version 4.4.1)
import plotly.express as px
df = pd.read_csv(r"C:\Users\Adnan\Desktop\Mar2020.csv")
app = dash.Dash(__name__)
#-------------------------------------------------------------------------------------
app.layout = html.Div([
html.Div([
html.Pre(children= "March Analysis",
style={"text-align": "center", "font-size":"100%", "color":"black"})
]),
html.Div([
html.Label(['March2020'],style={'font-weight': 'bold'}),
dcc.Dropdown(
id='xaxis_raditem',
options=[
{'label': 'March2020', 'value': 'Mar'},
{'label': 'Apr2020', 'value': 'Apr'},
],
value='Mar',
style={"width": "50%"}
),
]),
html.Div([
dcc.Graph(id='the_graph')
]),
])
#-------------------------------------------------------------------------------------
@app.callback(
Output(component_id='the_graph', component_property='figure'),
[Input(component_id='xaxis_raditem', component_property='value')]
)
def update_graph(x_axis):
dff = df
# print(dff[[x_axis,y_axis]][:1])
barchart=px.bar(
data_frame=dff,
x=df['TranType'],
y=df['Count'],
title='Output'
# facet_col='Borough',
# color='Borough',
# barmode='group',
)
barchart.update_layout(xaxis={'categoryorder':'total ascending'}
)
return (barchart)
if __name__ == '__main__':
app.run_server()
@@adnanwadekar6956 Hi Adnan, it's very difficult to read and work with code through youtube. For me to help you, can you please open an account on Plotly forum and post your code there. community.plotly.com/
@@CharmingData community.plotly.com/t/multiple-drop-down-issue/40486?u=adnan
hi @charming data did u see the code i have posted in the community forum
A really helpful video 💯💯
Only thing, when I click on the link to go to the graph, It keeps loading but doesn't load at all🤔
hi @Rohan, do you get any error messages?
@@CharmingData None at all. So when I run it with your dataset it runs perfectly. But if I use a different dataset and make the necessary changes, it never loads and after that when I run your dataset again, that never loads too😅
But sometimes with my dataset, it shows the value in the drop-down menu as per column values but not the graph 😢 I have to restart my computer to see the restaurant graph again
@@rohanmenezes6106 that's really weird. Try to print out the data inside the callback function when you use your data. Usually when there is no graph it's because the dataframe is empty
@@CharmingData yeah I will try it. Thanks 💯
how would you graph a multi line chart if the data set had each cuisine and the inspection date as their own column headers and the scores filled each column? I'm having trouble figuring out how I would have a different line per cuisine. I know 'x' would be 'INSPECTION DATE' but what would 'y' be? I've tried assigning a list to 'y', aka ['Japenese','American','Idian'] but it doesn't seem to work.
The .csv would look something like this:
Inspection Date Japenese American Idian
3/6/2018 23 5 21
3/7/2019 11 18 20
3/8/2020 23 18 19
3/9/2021 32 13 34
3/10/2022 24 13 13
3/11/2023 21 4 37
3/12/2024 24 22 12
I'm using a muti-select drop down and using its value as the input to my callback btw.
I tried out your code but I'm not sure why the y axis and title is not displaying on my dash.
Hi @chua, you used the exact same code in my link? What python IDE are you using? PyCharm, VScode?
@@CharmingData Im using PyCharm. So far everything works but just that update_layout not working.
@@lucasc.2538 ok. What version of Dash and what version of Plotly? Do you know how to check that?
@@CharmingData no haha. How do I check?
@@lucasc.2538 print (dash.__version__)
Good afternoon!
I have the following dataset:
Year,Sport,Surface,Distance,RaceName,FinishTime
I have followed one of your videos and Plotly Python documentation to create the following Box chart. RaceName is the x axis and FinishTime is the y axis.
sgowtham.com/assets/races/Overall_RaceRecords.html
The underlying dataset / CSV file is here:
sgowtham.com/assets/races/Overall_RaceRecords.csv
What I am trying to achieve is (a) default view of all years, all sports, all surfaces, all distances, and (b) create a drop down list each for Years, Sports, Surfaces and Distances.
If a year, say, 2020 is selected from the dropdown list, I'd like the chart to show all race names and times from 2020. If a sport, say Run, is selected, the chart should then update to show only running races from 2020. And so on.
Would you please be wiling to make a tutorial for accomplishing this? It could be a simple one with just Year and Sport dropdown, and I can then extend the concept to other criteria. Please let me know. Thank you in advance for your time and help.
Hi @Gowtham, I have a few other tutorials that are similar to what you're asking, so I'll probably not create another one. That said, I'd be more than happy to help you get you started. I actually offer a consultation for a very low price. Just sign up for the All-access Patreon and I'll set something up so we can discuss the dashboard you'd like to create.
www.patreon.com/charmingdata
@@CharmingData Done, sir :)
My schedule is flexible.
@@YooperInWonderland Thank you, I'll send you an email in a few minutes.