Side Navigation Bar with Dash Bootstrap - Python

Поделиться
HTML-код
  • Опубликовано: 6 ноя 2024

Комментарии • 99

  • @CharmingData
    @CharmingData  3 года назад +4

    Happy holidays everyone, Good luck building the side bar.
    If you have any questions, feel free to connect with me on LinkedIn. www.linkedin.com/in/adam-schroeder-17b5a819/

  • @adityanjsg99
    @adityanjsg99 2 года назад +2

    I always hated Power BI.
    Thanks for doing it for us.

  • @RaynerGS
    @RaynerGS 3 года назад +1

    I am diving into your videos. Your explanation is clear and straight. For us who are not native English speaking, your methodology is clear. You nail it! Salute from Brazil.

    • @CharmingData
      @CharmingData  3 года назад

      Thank you very much. I hope you learn a lot from my tutorials.

  • @katherinepena8903
    @katherinepena8903 2 года назад +2

    Adam, I am discovering your videos and ARE AMAIZNG, I love them. Thank you so much for doing them.

    • @CharmingData
      @CharmingData  2 года назад

      You're welcome Katherine. Thanks for watching.

  • @NanaOkyere
    @NanaOkyere 3 года назад +2

    This public service is appreciated.

  • @adityajawla723
    @adityajawla723 3 года назад +2

    Happy holidays to you. Really thanks a lot to make me learn plotly step by step from beginning...🙏

    • @CharmingData
      @CharmingData  3 года назад

      You're welcome, @Aditya. Let me know of you have any questions. Good luck with your Dash Plotly journey

  • @littleaquarius7779
    @littleaquarius7779 2 года назад +2

    Thank you for you wonderful tutorial!

  • @pankajsc96gtl
    @pankajsc96gtl 3 года назад +2

    Thank you again for another awesome video tutorial

  • @RahulKumar-ey9xl
    @RahulKumar-ey9xl 3 года назад +1

    Happy Holidays man. Great video as always

    • @CharmingData
      @CharmingData  3 года назад

      Thank you, Rahul. Happy holidays and a new year to you too.

  • @atharvakatre3256
    @atharvakatre3256 3 года назад +1

    Thanks for this video! Happy Holidays to you

  • @sylvainballerini239
    @sylvainballerini239 3 года назад +1

    i search just how make a nav bar and i find what ? the nav bar vertical the code and the boostrap ... three for one ! thank you very much for your job !

  • @Desleiden
    @Desleiden 3 года назад +2

    Hello Adam! First of all I want to thank you for all the knowledge you share with us. I have learned a LOT thank to you.
    I was tired of PowerBi becouse it likes to sum everything. Now I am doing my own dashboards. It takes me more time but I can do what I want.
    Do you mind upload to github the bootstrap part of this video? becouse it is only the html part.
    Thank you!!!

    • @CharmingData
      @CharmingData  3 года назад

      You're welcome @Andres. It's been a long time since i created this video so I can't remember. Can you please remind me what bootstrap part you are talking about. A what minute of the video can i see the bootstrap you are referring to?

  • @veerutrivedi9791
    @veerutrivedi9791 Год назад

    Hi, I am learning a lot from your videos. Thank you so much!! Just started exploring plotly dash. From your experience, which is preferable - Dash Core Components or Dash Bootstraps? Both of them are a lot similar. Not able to understand when to prefer which. Would you be able to explain a little bit? Thanks again!!

    • @CharmingData
      @CharmingData  Год назад +1

      Hi, Thanks for watching. I would use DCC for the individual components like dropdown, checklist, markdown. Then, I would use DBC for controlling the layout and styling of the Dash app.

  • @octo3010
    @octo3010 3 года назад +1

    Hi Adam, In the call back section if we defined the ID of the dcc.graph component can we have a separate call back later with all figure details instead of loading it all in the single 'return' call?

    • @CharmingData
      @CharmingData  3 года назад +1

      Hi Sanjay, I think you can

    • @octo3010
      @octo3010 3 года назад

      @@CharmingData
      I managed to get that working. Thanks, I love ur content.

    • @octo3010
      @octo3010 3 года назад

      I will slightly modify my query, in a multi page app is it possible to make user click on one graph on Page 1 and land on Page 2 with Table showing filtered data from click on page 1 graph?

  • @cardosofede
    @cardosofede 3 года назад +1

    Hey bro, you are the man

    • @CharmingData
      @CharmingData  3 года назад

      Thanks Federico. Did you already build your own app?

    • @cardosofede
      @cardosofede 3 года назад

      @@CharmingData not yet but I will!!

  • @moggapaul1875
    @moggapaul1875 3 года назад

    @CharmingData, Hello Adam, How would you make graph interactive while using side navbar

  • @pyrotheibeats918
    @pyrotheibeats918 2 года назад

    If you use the callback function for the navigation bar how do I also use the callback function for changing the data based on something like a dropdown.

    • @CharmingData
      @CharmingData  2 года назад

      Hi @Pyrothei Do you mean use the same callback for both or separate callbacks?

  • @viktor4207
    @viktor4207 3 года назад

    Hello Adam, great tutorial, as always. Is there a video where you talk about setting up callbacks for the graphs on each page?

    • @CharmingData
      @CharmingData  3 года назад +1

      Hi Viktor, are you referring to an app with tabs or separate pages and how the callbacks are set up? Yes I do. I think I do that with the Twitter app

    • @viktor4207
      @viktor4207 3 года назад

      @@CharmingData Perfect! Thank you Adam, I'll check it out!

  • @O3TZi
    @O3TZi 3 года назад +1

    could there be a problem with "pills" lately? Because when i use your code (or use my own) all components are active (blue). does not matter on which site i am right now. don´t know how to solve it. Do you know a solution? Thanks :)

  • @8899sarang
    @8899sarang 3 года назад

    I mean...
    There are three side bars in the side bar.
    Side bar number 1 is 'Page 1'.
    Side Bar number 2 is 'Page 2'.
    Sidebar number 3 is 'Page 3'.
    When I clicked 'Page 1' Side Bar, I want to run
    the 'pi_graph.py',
    When I click 'Page 2' Side Bar, I want to run the 'line_graph.py',
    When I click 'Page 3' Side Bar, I want to run the 'bar_graph.py'.
    Thank you so much...

    • @CharmingData
      @CharmingData  3 года назад

      If you want to run a figure from a .py file in each page, you need to import the figure like this:
      from firstapp import figure. This assumes your .py is firstapp.py

    • @8899sarang
      @8899sarang 3 года назад

      @@CharmingData Thank you for your reply. I'll try.

  • @rongsu3778
    @rongsu3778 3 года назад +1

    Hi, I was wondering if I can use dynamic callback with the Side Navigation Bar coding

    • @CharmingData
      @CharmingData  3 года назад +1

      Hi @Rong, you should be able to do that.

  • @tonywillcox5802
    @tonywillcox5802 Год назад

    Hi Adam, I wonder if you could do a video showing a combined sidebar with a dcc.Loading object. I'm having in issue where the links go dead / unclickable after the loading callback is complete and content is returned

    • @CharmingData
      @CharmingData  Год назад

      Hi Tony, I highly recommend that you use the new Dash Pages feature and combine that with a sidebar.
      dash.plotly.com/urls#dash-pages
      Here are a few example apps of how Dash pages is used:
      github.com/AnnMarieW/dash-multi-page-app-demos

  • @Sam-hc2el
    @Sam-hc2el 3 года назад

    @Charming Data Hi Adam, great tutorial. I was able to follow it. Btw. if I want to change the H2 title to a logo, how do I do that? I have the logo saved in the assets folder. Thank you!

  • @sebastianrees9142
    @sebastianrees9142 2 года назад

    Hi Adam great video! I was wondering if you have a tutorial about using using a search bar to switch between pages/graphs or if that is even possible?

    • @CharmingData
      @CharmingData  2 года назад

      hi Seb, I don't think I do. But what do you mean by search bar exactly? like the dcc.Input?
      And can you clarify what you mean with switching between pages and graphs please.

    • @sebastianrees9142
      @sebastianrees9142 2 года назад

      @@CharmingData Hi Adam, the documentation is great for building a dropdown menu on the navbar that uses href= to switch between different pages (py scripts) e.g. dbc.DropdownMenuItem("GDP", href='/page-2'), however is it possible to also put this it a search bar format whereby you type in "GDP" press a search button and it takes you to '/page-2', as there seems to be no documentation or examples of this :)

    • @CharmingData
      @CharmingData  2 года назад +1

      @@sebastianrees9142 Hi Seb, take a look at app-A github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Dash_More_Advanced_Shit/Intro%20to%20Python%20multipage/App-A
      And try updating the app.py file with this code:
      import dash
      from dash import html, dcc, callback, Output, Input, no_update
      app = dash.Dash(__name__, use_pages=True)
      app.layout = html.Div(
      [
      # Framework of the main app
      html.Div("Python Multipage App with Dash", style={'fontSize':50, 'textAlign':'center'}),
      dcc.Input(id='my-page'),
      html.Div(id='page-link'),
      html.Hr(),
      # Content of each page
      dash.page_container
      ]
      )
      @callback(
      Output('page-link', 'children'),
      Input('my-page', 'value'),
      prevent_initial_call=True
      )
      def update_links(value):
      if value is not None:
      first_uppercase = value[0].upper() + value[1:]
      for page in dash.page_registry.values():
      if page['name'] == first_uppercase:
      return dcc.Link(page['name'], page['path'])
      else: no_update, no_update
      if __name__ == "__main__":
      app.run(debug=True)

  • @RaviSharma-vu7te
    @RaviSharma-vu7te 2 года назад

    Hi Adam, What should be done to retain data from a previous step. For example, I did some data pre processing in page1 and I want some of that data to be used in page2. What should I do.

    • @CharmingData
      @CharmingData  2 года назад

      Hi Ravi.
      Thanks for watching
      You should use the dcc.store()

  • @brazenhawk
    @brazenhawk 3 года назад

    Thanks Adam for creating this content. I have signed up for Champion membership. Where can i find the link to bootstrap version of this side bar and multiple callback with same output.

    • @CharmingData
      @CharmingData  3 года назад +1

      Thank you @saurabh. I can invite you to my gitlab code if you give me your email address. Can you please send me your address to adam@charming-data.com

  • @brushx3129
    @brushx3129 2 года назад

    Hi Adam
    I have want to use this sidebar to display two apps I have made using dashboard. How do I display my apps while navigating through the sidebar

    • @CharmingData
      @CharmingData  2 года назад

      hi @brush X You should be able to do this with the new video tutorial i made on the multi page dropdown in Python with Dash. ruclips.net/video/Hc9_-ncr4nU/видео.html
      Just replace the dcc.Link I use with the dbc.NavLink that you use.

  • @salehedavarpanah7782
    @salehedavarpanah7782 2 года назад

    Thank U for your amzing videos , i have a question how can i have custom color(like #FF5733) for nav bottoms? For active hover ,text , ...?

    • @CharmingData
      @CharmingData  2 года назад

      hi Selehe, yes, I think that should be possible if I understand the question correctly.

  • @josemariamontesmontiel4588
    @josemariamontesmontiel4588 2 года назад

    Hello Adam. Thank you for your videos, they have been super useful. I wanted to ask you if there is any way to connect the sections of the sidebar?
    I want to load a csv on the home page and plot it in a different section without having to load it again.

    • @CharmingData
      @CharmingData  2 года назад

      Hi José, you mean you want to plot the data in the CSV file without having to load the CSV file again? Is that what you're trying to do? If so, how large is your CSV file?

    • @josemariamontesmontiel4588
      @josemariamontesmontiel4588 2 года назад

      Yes I load the data in localhost:3000/page-1 and want to plot it in localhost:3000/page-2. The CSV is a small file
      I want to make it so the user doesn't have upload the CSV many times.

    • @CharmingData
      @CharmingData  2 года назад

      @@josemariamontesmontiel4588 hi José María. I believe I show how to do that here.
      ruclips.net/video/Np090pWEjIs/видео.html

    • @josemariamontesmontiel4588
      @josemariamontesmontiel4588 2 года назад +1

      Thank you so much. :)

  • @rajatrahatgaonkar224
    @rajatrahatgaonkar224 2 года назад

    @CharmingData Thanks for the awesome video. I just have one question. How can we design the sidebar as the second page of our dashboard. Right now I have first page and then when click on a button it redirects me to sidebar page but when I click on left option of sidebar then it redirects one more time and then sidebar disappears. So how can we overcome this?
    Thanks
    Rajat

    • @CharmingData
      @CharmingData  2 года назад

      Hi Rajat. I think it's better if you use the dash bootstrap offcanvas component. I use it here:
      github.com/Coding-with-Adam/Dash-by-Plotly/blob/master/Dash_More_Advanced_Shit/Multipage_app/app2_with_sidebar.py
      And I think I talk about it here:
      ruclips.net/video/lKXePw01R2A/видео.html

  • @Portuenllamas
    @Portuenllamas 3 года назад

    Hello Adam! I really appreciate your work. If you had a dcc.RadioItems in the sidebar and you wanted to change the graphics inside the content depending on its value, how would you do it?

    • @CharmingData
      @CharmingData  3 года назад +1

      Hi, you would have to use the callback to read the radio button value and output a graph based on the value chosen

  • @eduardo1606
    @eduardo1606 Год назад

    Hi! I have a question. I have integrated a sidebar on my app, and it looks great on wide screens, but on smaller screens the sidebar will collide with the other elements. Is there a way to fix this?

    • @CharmingData
      @CharmingData  Год назад

      hi Eduardo, I recommend using the Dash Bootstrap Offcanvas dash-bootstrap-components.opensource.faculty.ai/docs/components/offcanvas/
      Or use the Mantine Drawer www.dash-mantine-components.com/components/drawer

  • @chakchakaa
    @chakchakaa 2 года назад

    Sir, what might be the possible problem after opening or loading the page the sidebar won't appear unless, I manually refresh the page?
    hoping you can help me.
    Thank you.

    • @CharmingData
      @CharmingData  2 года назад

      it's probably because you have the side bar outside of the layout or you need to reconfigure the callback

  • @williamwei7899
    @williamwei7899 Год назад

    can the navbar menu have submenu, like clicking page 1 will show up page 1-1, page 1-2 etc?

    • @CharmingData
      @CharmingData  Год назад

      Are you referring to something like this example?
      github.com/AnnMarieW/dash-multi-page-app-demos/tree/main/multi_page_nested_folders

    • @williamwei7899
      @williamwei7899 Год назад

      @@CharmingData this looks great but looks an overkill. more of something like hierarchical menu. (sorry if my example of page 1, 1-1 is confusing..), let' say the first hierarchy is Fruits, if you click on Fruits, nothing will show up yet but a drop-down submenu list of Apple, Orange, Banana. Then you can click on one of the fruits on the sidebar, let's say the picture of that fruit shows up on the right...

    • @CharmingData
      @CharmingData  Год назад

      @@williamwei7899 Hey William, I've never done that before. Maybe you can use the dash bootstrap dropdown menu displayed vertically inside the side bar. Then each dropdown menu (Fruits title) will have multiple dropdown items (list of each fruit)
      dash-bootstrap-components.opensource.faculty.ai/docs/components/dropdown_menu/

  • @kevincruz2628
    @kevincruz2628 2 года назад

    Thank you for this video. If I may just ask, I tried using this but the mobile view for the sidebar seems kind of weird as it occupies most of the screen and you have to scroll right to see the contents. However, Ive seen some dash apps in the dash gallery which allows the content to be placed on the bottom. So the sidebar occupies the screen but once you scroll down the contents are there. Any tips to how to fix this?

    • @CharmingData
      @CharmingData  2 года назад +1

      HI Kevin. I'm sorry but I"m not sure how to do that. Probably some CSS involved. Would the Dash Bootstrap Offcanvas work for you?
      dash-bootstrap-components.opensource.faculty.ai/docs/components/offcanvas/

    • @kevincruz2628
      @kevincruz2628 2 года назад +1

      @@CharmingData Wow this is literally what I need. Didnt know this exist. I should read docs more often. Thank you once again for your great work. You deserve more subs tbh.

  • @amir_forooghi
    @amir_forooghi 3 года назад

    like before watching

  • @abdelkabirmenani962
    @abdelkabirmenani962 3 года назад

    Thanks Adam for the explanation. i really appreciate it. I have a question though. what if we have an histogramm with additional inputs(dropdown for example). How can we implement it to be inside the page of the sidebar?

    • @CharmingData
      @CharmingData  3 года назад

      Hi @Abdelkabir, in that case I would use DCC.tab or multipage app. I have a video on that as well

    • @abdelkabirmenani962
      @abdelkabirmenani962 3 года назад

      @@CharmingData i struggle doing it on tabs too. Because u see when u return the html code of the graph u wanna use it s hard to connect it with the callback cause u have multiple inputs(dropdown and histogramm for my case for)

    • @rajatrahatgaonkar224
      @rajatrahatgaonkar224 2 года назад +1

      Hi @@CharmingData can you please give the link to the video where you are using DCC.tab?
      Thanks

    • @CharmingData
      @CharmingData  2 года назад

      @@rajatrahatgaonkar224 here you go. ruclips.net/video/XT7Hsr5DkeM/видео.html

    • @rajatrahatgaonkar224
      @rajatrahatgaonkar224 2 года назад

      Thanks @@CharmingData

  • @senolkurt7864
    @senolkurt7864 3 года назад

    Hi Adam. Thanks for the great video. How can we collapse the sidebar when the screen size is small?

    • @CharmingData
      @CharmingData  3 года назад

      Hi @Senol? What do you mean collapse? You want the side bar to be smaller or completely disappear when screen is smaller?

    • @senolkurt7864
      @senolkurt7864 3 года назад

      @@CharmingData I want to make it like navbar-toggler. Because the sidebar almost covers the whole screen when it is small.

    • @CharmingData
      @CharmingData  3 года назад

      @@senolkurt7864 I'm not sure, @Senol. I'm sorry

    • @senolkurt7864
      @senolkurt7864 3 года назад

      @@CharmingData Thanks for the reply.

  • @seanhensel-coe7792
    @seanhensel-coe7792 3 года назад

    Hey man! These videos are amazing! How do I set this to not count the instances something occurs but the actual values in the csv cells? (So if some thing has a value of 55% percent the bar graph returns a bar of 55% if that makes any sense at all) Thanks, Sean

    • @CharmingData
      @CharmingData  3 года назад

      hi Sean, try to use a histogram. px.histogram, and maybe only define the x axis. See if that does it.

    • @seanhensel-coe7792
      @seanhensel-coe7792 3 года назад

      Oh my goodness, I'm so thankfull you got back to me. It still doesn't seem to be working. The code I have in there is: dcc.Graph(id='bargraph',
      figure=px.histogram(df, barmode='group', x=['A']))
      ]
      I've tried taking out 'barmode' but no change

    • @CharmingData
      @CharmingData  3 года назад

      @@seanhensel-coe7792 why is x=A? Wasn't it years? Are you building your own graph?
      Try to include the y parameter as well.
      I'm not by my computer so I can't test this. Sorry

    • @seanhensel-coe7792
      @seanhensel-coe7792 3 года назад

      @@CharmingData Apologies, yes, I'm using a very tiny data frame to test it out. A,B,C are feature headings. I've messed around with the x and y axes with px.histogram, but I'm not having any luck. It's still counting the instances a value occurs

    • @CharmingData
      @CharmingData  3 года назад

      @@seanhensel-coe7792 Hi Sean, It's hard to say without seeing your data, but look at this webpage, at the second and fifth example graphs.
      plotly.com/python/histograms/

  • @xXraiva33Xx
    @xXraiva33Xx 3 года назад

    Thanks for the video! I also tried to implement a sidebar in my DASH but for some reason the layout of the page doesn't run the data when I push the submit botton. The thing is that each page calls a layout with a different function. But when I change the page it just shows the layout but it doesn't seem to run the function as it doesn't show any graph when I submit the data needed (dropdowns). Do you have any idea of why would this happen?
    EDIT: Solved :) Well, thanks anyway.
    Thanks and happy Holidays!!

  • @sdaffdasdf
    @sdaffdasdf 3 года назад

    Hi Adam, your videos helping a lot.
    Can help to make a video on Dash data table edit using dash bootstrap. The default table edit is not user friendly. Please help. Thanks in advance 👍🏻

    • @CharmingData
      @CharmingData  3 года назад

      Hi Santhosh. Please say more. You want a video on the Bootstrap table? Or you want a video on how Dash Bootstrap can style a dash datatable?

    • @sdaffdasdf
      @sdaffdasdf 2 года назад

      @@CharmingData sure Adam.
      I am looking for editable dash table. When I tried dcc component I can achieve the functionality but the edit is not user friendly as excel cell edit.
      So I am curious to know the dash edit table function can be achieved under dash bootstrap and hence the cell edit is friendly as excel.
      Please advise. Thanks

    • @CharmingData
      @CharmingData  2 года назад

      @@sdaffdasdf some edits can be achieved with dash bootstrap but it's a lot better to use Dash Datatable and the props it offers. Give me an example or two of a cell edit you'd like to make.

  • @8899sarang
    @8899sarang 3 года назад +1

    I really appreciated to you.
    I'm ashamed of it, but please make it difficult.
    I'd like to make sure the link is connected to the Python file. That is, I would like to link the Page 1 screen to run the datatable_intro_and_sort.py file.
    I'd appreciate any comments on this.

    • @CharmingData
      @CharmingData  3 года назад

      Hi. Thank you for watching. I'm sorry but I'm not sure I understand what you want.