DataTable (Dropdown) - Dash Plotly Python
Вставка
- Опубліковано 21 лип 2024
- Create an interactive dashboard of the Coronavirus, using Dash DataTable and Plotly graphs, all in python. In this tutorial you will learn how Dash uses simple python coding to create powerful data visualizations. Open Links below:
View my book - The Book of Dash:
www.amazon.com/Python-Dash-An...
github.com/DashBookProject/Pl...
The Code and CSS form:
github.com/Coding-with-Adam/D...
Dataset:
drive.google.com/file/d/1g2N7...
DataTable Reference:
dash.plotly.com/datatable/ref...
DataTable Virtualization:
dash.plotly.com/datatable/vir...
Plotly Express Graphs:
plotly.github.io/plotly.py-do...
Dash Core Components:
dash.plotly.com/dash-core-com...
************************************************************************
👉 If you appreciate these tutorials and would like to support their existence and get some perks: / charmingdata
These are great, very timely and helpful. Dash is what I think I need for some online software and these tutorials are extremely good. You are doing us all a great service!
You are welcome. It's great to hear that you can benefit from these tutorials. Feel free to spread the word :)
Great tutorial that is very easy to understand and implement. I have looked at several videos and yours makes the most sense. You kept it concise and easy to implement.
Thank you Hank. I'm glad you find them helpful. Tomorrow I'll post a video on building of a crud app work DataTable. Hope you like it.
I've just started learning to make dashboard and your works are very nice and helpful, Adam! Thanks!
You're welcome Faqih. Thanks for watching.
Thank you for great video about data tables! I have been looking for something like this for months
I've been navigating the Dash documentation and even though it's good, it moves in huge leaps. Your videos are amazing and easy to follow, thank you!
Thank you Thomas. Are you a data analyst?
Charming Data I am! I had more exposure to Shiny in R but my team uses python so I’ve been looking for a good alternative and Dash seems like the best thing out there.
@@gubanator Dash is very powerful. I'm glad you found it. If you have any coding questions, Dash-specific, feel free to post on Dash Plotly forum community.plotly.com/c/dash The community is very helpful there.
On a different note, my goal is to support Data Analysts like you in using Dash and better understanding it for their profession. If you have any insight or feedback on what I should cover that would be helpful for you, I would love to hear. My Linkedin: www.linkedin.com/in/adam-schroeder-17b5a819 Thank you, Thomas
This video answers exactly what I was trying to solve!
Dear Tristan. I am trying to gather more supporters to create higher quality educational tutorials on Dash 👨🏽🏫 My goal is to reach my first 15 supporters, and it would mean a lot if you were able to support me 😊 www.patreon.com/charmingdata
I'd love to see any web apps that you might have created :)
Enjoy your weekend.
Excelent content! one of the best on YT! Thanks for all your help!
thanks a lot!! your talent for explaining things is greatly appreciated
Great tutorial! It will be awesome if you can work on a video regarding the use of DataTable + dropdown menus (double selections) on Mapbox in Dash. :)
Thanks for the idea, Even. I'm glad you liked the video.
Thank you for so much detailed explanations. I can say this is one of the best dash tutorials ever.
I have a question. In the clip, you used one scv file as data, but I would like to use several different files as data without combining them into one. Is it possible to put the codes(app.layout and below) under for loop? Or should I use for loop under the app.layout code?
Hi @Seongjin, I'm not sure what you're asking. The only for loop I have is the one inside the layout. How do you want to use a for loop outside the layout?
@@CharmingData First, I would like to make one dropdown and one datatable, and then, if I select one label from the dropdown, I want it to iterate through all the different scv files and check if there is a certain number. If true, the scv file information is shown in the datatable. Do you think it is possible to make it happen?
@@seongjinnam1501 Yes. That should be possible
Superb:)
Hi Adam great work i following your videos about dash ...
If i am giving the json data format (you worked on for only COVID data) i need filter with user options how could do that
Thanks!
Is there a way to make the dropdown search to somehow search and choose the value of the cell (instead of only choosing the column name) ?
Great video! I am wondering if you could make a video to show how to do drill down on a base table ? For instance I have a summary table of all finance amount for a building When I click on a rows summary amount it can appear another table below this summary table to show the detailed amounts charged on this building. Thanks in advance
Jan Yan Liu. I haven't seen that down yet. You're looking to build a DataTable that opens another DataTable once certain rows/cells are clicked on?
Nice ! thanks for detailed walk thru. Very easy to understand and implement. Wondering if you have any cross tab report built in dash with multiple filters and callbacks to cross tab report.. Appreciate id you can share any video or git source if available.
I don't, @Ravi, but I hope to create one soon
thank you so much man!!!
You're welcome Kelvin.
How can I make the entire background color change to black? like a dark mode sorta thing
Hi, great videos, question, how would you update an API data and get it available for the rest of the interval? As global variable?
Hi Edd, are you asking two questions? how to get data from an API and how to make it available inside the interval? can you please be more specific with the second question. What do you mean "available for the rest of the interval?"
Could you please help me on creating dynamic drop downs from python list ?
nice...how do you put multiple lines as comments using a single '#'. Any shortcut?
Hi @Anuvrat,
I highlight all the lines with my mouse and then I click CNTR+? or CNTR+/ (depends on the keyboard)
Awesome explanation. app callback is not responding, is there any change in the code I should do..by the way, the first part its creating the template (or empty charts)
Hi sunny. I'm not sure. Without seeing the code it's hard to say. Make sure you have a similar version of Dash installed
Would you be interested in making a video that explains how to create the callback between the pie and the table the other way around? I.e. when User clicks the pie section, the table gets updated for the category selected? Many thanks
Hi Alex, thank you for the suggestion 🤗 I'll try.
@@CharmingData Adam, it is best described here:
dash.plotly.com/interactive-graphing
hi, I need to make a dropdown with the options in a checklist, like how it appears in excel filters. Can you please help?
Hi Sanchari, For sure, I'm more than happy to help. I offer a very low consulting price where we'll go over your code , talk about it, and come up with different solutions. In addition, I give you some more dash pointers and tips.
Feel free to sign up below:
www.patreon.com/charmingdata
Hi Adam, Great content. How would you rate PowerBi and Plotly Dash when it comes to
1. Speed
2. Easy to code
3. Learning curve
4. Level of customization
Good question:
1. Speed: not sure. Never did the comparison
2 and 3: Dash takes a couple more days to learn than PowerBi which is codeless. But that's only a few days. Dash is very easy to code and build with.
4. Dash wins over PowerBi with customization. Because Dash is Python, you can pretty much customize your dashboards in any way you'd like. The other advantage is that you can combine any Python library with Dash, which you can't do as freely with PowerBi.
@@CharmingData Thanks Adam
I need help please Mr Charming Data, I am extremely grateful for your videos, but still having the challenge to implement this logic of my project: Get users to select a range of data in a data frame: a checklist allows users to select options of a unique value in one of the columns of the data frame and outputs another checklist of the data frame columns the user select: the user dataframe columns data now plots a line graph. Please I am new to dash, and I have completed your videos, but I am still stucked on dropdown to return dataframe select and the checklist with the same callback function, the other ones worked. I can post codes of what I had implemented.
Hello Charming Data. I'm so grateful of your training because it is helping me develop a data visualization dashboard for mapcharts. I however been stuck trying to load my plotly-dash python program to the web as a localhost so I can interact with it before hosting. Any guide for that? I will truly appreciate.
Hi @Kipngetich you can deploy it to the web and put a password to it so no one can interact with it but you.
@@CharmingData Thanks so much. I was hoping there is a way of serving it to my local host, just like yours (localhost:8000), before deploying it on the web.
@@kipngetichevans5095 I'm not sure I understand. You were not able to deploy to your local host 8000?
@@CharmingData Yeah I was not able to deploy it to my localhost, i tried running "python -m http.server" from my working folder, and inside I just found files. I'm not sure of the best way to deploy it to my localhost
@@kipngetichevans5095 are you using pycharm, spyder, atom, or jupyter?
Hi @Charming Data. Loved your videos on plotly and dash. However I was trying to implement your code for my data analysis. Inline 17 of your code dff = df.groupby('countriesAndTerritories', as_index=False)[['deaths','cases']].sum() you have chosen two columns deaths and cases. In my case selecting 4 columns but its not taking. M getting a call back error while loading piechart and line chart. Please help in this regard.. Thanks
Hi Azhar, try to print (dff) inside the function to see what you get. It's hard to know they problem without the code
@@CharmingData Thanks for your quick and prompt reply.
I did printing the dff but I can only see details on only one column. As in your case it's for both deaths and cases.
If I can have your email id I can send you the snapshots of these.
Also when I run code it's shows call back error.
I can send you that to.
Will be very grateful if you help me with this
@@azharkazi7299 info@charmingdata.org
@@CharmingData Thanks a tons
Hi dude! Great video and I like it!
I want to know how to get dropdown data into datatable?
It depends what data. The Dropdown has option values. How do you want to connect that value into data that will go into the DataTable? Can you please clarify
@@CharmingData in fact I want to do an update value into user table ( MySQL DB) from dropdown datable. for instance a user can choose one value of dropdown in order to make an update.
Thanks!
Hi !
I tried to keep only the first five rows and create a slider to show the whole data when I move with my mouse down.
When I changed the code, it is letting me see the whole data as you showed but I can see multiple rows instead of the first 5.
What should I do?
Hope I was clear and then you for the toturial
HI Ron, it's really hard to say without looking at the code. how did you change the code?
@@CharmingData Hi!
Thank you for the reply. I did not see a way to attach a picture so I will try to write it in a clear format.
From what I understood, in order to get a scrolling effect I need to do "page_action = 'none'", but when I do this, although I wrote "page_size = 6", it gives me more rows.
I want to get the same scrolling effect but that the table will be in less space of the web page.
This is the part of the code:
filter_action="native",
sort_action="native",
sort_mode="multi",
row_selectable="multi",
row_deletable=False,
selected_rows=[],
# page_action="native",
# page_current= 0,
page_size= 6,
page_action='none',
@@ronoved7695 if you take out the page_action=None, you will have only 6 rows, but if those rows fit on the page, there will be no scrolling affect. But if you still want the scrolling affect with only 6 rows that fit on the page, try this:
page_size=6,
style_table={'height': '50px', 'overflowY': 'auto'}
@@ronoved7695 Hi Ron, try to keep page_size=6, take out page_action='none' and limit height of datatable through style prop
style_table={'height': '300px', 'overflowY': 'auto'}
helo i follower the video and when i put some more extra charts ABOVE the table, they got completely frozen - no callback works, no hover.. nothing.. when the table is not there, they work fine, but as soon as i put the table in the layout all charts above it freeze. how is it possible? what am i doing wrong?
hi atma, It could be various reasons. It's hard to say without seeing the code. Maybe the callback has an error, maybe the data is not filtered correctly... Feel free to post your code on dash plotly forum and ask your question. We might be able to help once we see the full code.
@@CharmingData i fixed that actually - the point is that between a table and the charts there need to be some htm elemenet, html.Div or html.H1 or whatvere, if it is not there, the table freezes up all the charts above - quite interesting bug i would say.. maybe you can try for yourself.
@@atmafm6109 I agree. it looks like a bug.
@@CharmingData did you tried ?
@@atmafm6109 I did.
the dash documentation looks cool with some nice examples but is really missing the basics. I just need a list of variables and attributes to be able to use the library, that it. I find myself crawling the internet just to style a table. Not good
Is there an option for "select all" in the dash table?
Hi @sivaji1233 What do you mean? Are you looking for a way to select all rows of the DataTable?
@@CharmingData yeah, exactly
@@sivaji1233 This doesn't seem to be possible currently: github.com/plotly/dash-table/issues/249
However, here is an interesting work-around:
community.plotly.com/t/data-table-select-all-rows/16619/5
@@CharmingData thanks
Hello, can you please explain how to put multi tables in dash
You just want to creat more than one table? If so, I think you can put each new table in a new div
But it never gets displayed on the webpage, I tried everything.
Only the first table is displayed followed by the graph that I put there, then I put the div for the second table, but it doesn't get displayed
@@prakharkumar4114 can you send me the full code you wrote on Plotly forum, please. If I see your code I could probably help better
CSS is not working properly.
How can I make the entire background color change to black? like a dark mode sorta thing
Try this library romanonatacha.github.io/dash_trich_components/
Try this: romanonatacha.github.io/dash_trich_components/