Adapt Dash Web App to Mobile Devices

[@CharmingData]

Hi Everyone, I hope you're doing well and that you're making progress with Dash Plotly. If you have any questions about the videos, let me know. 👉If you benefitted from these tutorials and would like to show your appreciation and support the existence of more tutorials: www.patreon.com/charmingdata

[@KaYKeConKa]

Awesome video. You have no idea how much I learned and how much it helped me. Thank you from Brazil.

[@CharmingData]

You're welcome Carlos

[@kaankorkmaz8180]

Very clear explanation, thank you! Underrated channel

[@datawithalvin]

thank you, it's help me a lot on developing my data app!

[@cduk3670]

Great video Adam! It helps me to solve doubts with the responsive functionality of the app, thanks a lot.

[@vijayenderbandaru]

You are a gifted teacher. Appreciate knowledge share. God bless u

[@CharmingData]

Thank you

[@freedatascientist2786]

You have amazing tutorials, thanks for inspiring our channel !

[@CharmingData]

Nice start to your channel. Good luck with it. Do you plan to offer videos focused on python or other languages as well?

[@shrikanttyagi8798]

How can we do when web display in mobile then only navbar button display when web on desktop then navbar left side menu display , please help

[@MLAlgoTrader]

Thanks a lot Adam! I needed this! Weird I was sure I was subscribed to you, but I guess I wasn't so sorry just subscribed!

[@CharmingData]

@@MLAlgoTrader how long have you been working with dash?

[@MLAlgoTrader]

@@CharmingData Around 1 year. I made a KZbin video on it and I spoke to you a bit on Linkedin not sure you remember lol

[@shrikanttyagi8798]

If we don't want display plotly hyper link in every graph tool menu ..this look odd so I want remove plotly link how can we do this?

[@pro1427]

bro you are amazing

[@sandman.s]

Hi, as a beginner how do I get started with Dash?

[@CharmingData]

Hi sandeep, Watch these two videos to help you get started: kzbin.info/www/bejne/noSznp1torBppMk kzbin.info/www/bejne/o4XWi39ji9KFjKc And then figure out what you want to build, and start small. Dash has very good documentation: dash.plotly.com/

[@sandman.s]

@@CharmingData Thank you, I will check it out.

[@shriqam]

Hello Adam,Thanks for the wonderful tutorial. I have a dashboard where there is a sidebar with dash data table on left and line chart on the main side. As i click the cells in data table, the chart changes accordingly. Now i am trying to view this in a mobile, Since its a small screen, the sidebar moves to the top and the main screen moves to the bottom, Is there any way to automatically scroll down to the bottom as i click an option on the top cell in the data table.

[@CharmingData]

Hi Shriram, I think you would need to write a Dash clientside callback and an anchor element using javascript. I understand what you want but I have never done that unfortunately.

[@shriqam]

@@CharmingData Thanks for your suggestions Adam, Let me try using client side callback and Javascript

[@blociot]

Hello Adam, Came back with another question and would appreciate it if you could help. How do we chamge font size with the same concept? It doesn't recognize the tags next to a text.

[@CharmingData]

What do you mean "with the same concept"? How would you like to change the font size?

[@blociot]

@@CharmingData thank you for the reply. I mean adjusting the font size based on the screen size. I have a text on a Navbar and it doesn't fit the screen when viewing the page from my phone.

[@CharmingData]

@@blociot I haven't tried that yet, but I think you can do it by going to this website: bootstrap.build/app choose the Options sections on the right, and enable the "$enable-responsive-font-sizes" I think the next step is to download this theme as a CSS to your assets folder and read it into your app. Let me know how it goes. Like I said, I've never done it, but that appears to be the way.

[@blociot]

@@CharmingData I used style={'font-size': '2vw'} and seems it's working :)

[@CharmingData]

@@blociot I'm happy for you. Does that mean that "$enable-responsive-font-sizes" didn't do the job?

[@АннаШерон]

Thanks for the video! It’s really great! I wanted to ask you if you could please share the code for className = “row”? I’m trying to recreate it to make the elements of my Div located inline, but cannot succeed 😢

[@CharmingData]

Can you please remind me what you are referring to? What code is that? what part of the video do I talk about that?

[@TopicalAuthority]

Thank you!

[@CharmingData]

You're welcome, Moray. Good luck with your Dashboards. Let me know if you have any questions.

[@blociot]

Thank you Adam. Great as always. Just wondering what's the definition of extra small, small, large, etc. in terms of pixels? For example, what screen size is considered as small and what is conaodered medium? Can't understand why we just don't have a small and large size ...

[@CharmingData]

good question, Mos. I was actually wondering that myself. The answer appears to be here: www.w3schools.com/bootstrap/bootstrap_grid_small.asp#:~:text=Bootstrap%20Grid%20Example%3A%20Small%20Devices&text=Tip%3A%20Small%20devices%20are%20defined,768%20pixels%20to%20991%20pixels. Extra small Small Medium Large Class .col-xs .col-sm .col-md .col-lg width=768px >=992px >=1200px

[@rambibyan524]

Hi Adam, great tutorials...I have one question related to axis data which is how to mirror the data on axis in plotly

[@CharmingData]

Hi @ram what do you mean by "mirror the data on axis?"

[@rambibyan524]

Hi @@CharmingData, I meant it regarding the vertical or horizontal position of data points on axis...but I figured out it with tickangle

[@rambibyan524]

@@CharmingData thanks for your time, I have seen most of your tutorials & it helped me a lot in understanding Plotly & Dash.

[@CharmingData]

@@rambibyan524 good job 👍🏼 @Ram. If you'd like to support these tutorials as a long term project, I'd appreciate it very much. www.patreon.com/charmingdata Feel free to write me to my email if you're encountering difficulties with your dash app. [e-mail]

[@PietroCCorreia]

Thank you

[@matteocarnazzola8141]

Thank you Adam for the inspiring tutorials! I was wondering if there is a mobile app to download for using the dashboard that I am creating (Python script) on my phone (Android). Thanks!

[@CharmingData]

HI @Matteo, there is no app for that. To create a mobile app for Android you would need to know Java. To see you dashboard on your Android phone, you would need to upload it with Heroku to the web and then enter that link through the browser on your phone.

[@GordonShamway1984]

so cool

[@CharmingData]

Where have you been, Stefan? 😁

[@cyrildelaporte5376]

How dou you open the Dash app on a Mobile Device? You would need a python interpreter to actually run the script right? or is there a way to share an operational URL..? I am looking everywhere to make this happen but I havent found it so far. Great Videos btw !

[@CharmingData]

Hi Cyril, you would first deploy your app to the web with heroku, for example, and then you would just open it on your phone through a phone/web browser like chrome or microsoft Edge. Does that make sense?

[@cyrildelaporte5376]

@@CharmingData yes it does! I actually just found your video on Heroku and it was just what i was looking for, these tools are amazing. Thanks so much for making this so easy and thanks so much for the quick reply man! Great channel great guy!

[@CharmingData]

@@cyrildelaporte5376 you're welcome Cyril. Don't forget to use ploltly forum if you have any questions. Good luck with your dashboard 🤞