Enhance your data dashboard by integrating multiple graphs, including interactive bar charts, using Dash and Plotly. Learn how to structure these visual elements in your app layout and take advantage of built-in interactivity features without additional coding.
Key Insights
- Create a bar chart in Dash by using px.bar, specifying x-axis as item names and y-axis as item prices, and passing the data into the figure parameter.
- Update the Dash app layout by passing a list of multiple dcc.Graph components as children of a div, allowing the display of multiple visualizations side-by-side.
- Dash components provide built-in interactivity like zooming, auto-scaling, and tooltips out of the box, eliminating the need for additional customization in early stages.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
Let's try adding another graph. We'll add a bar chart. We'll say bar figure is px.bar and for that we'll pass in much the same.
We'll pass in our top five. We'll also pass in an X and a y and for a bar chart her X-axis is our item names and her y-axis how high things are, well that's the item price as number. All right, now to get this bar figure into our app we're going to change it from being just one thing here in this div to being a series of things, multiple children of this div and to get that we're going to need a list.
So I'm going to change what's in these parentheses to a list instead of one graph we're passing in multiple and we're going to pass in a couple of different things. Let's start out with just the two. Dcc.graph let's make a graph of the dash core components where the figure is the pi figure and let's do a comma because we are within a list here that will all evaluate to one graph but that's just one item that's a child of this list here.
Okay and let's also add in our bar figure and it's good to have a little extra comma there so it'll be easier to add things in the future and there we go we have two items in our bar graph. Now something that I don't believe we showed last time is that just out of the box we get a lot of interactivity. We saw a little bit with our pie chart where we were able to mouse over and get some information about each one and we can do the same here.
Let's do some other neat things. One of my favorites is let's say we're like you know the chicken bowl is really dominating this graph I want to see what it would look like without that. Well we can use our cursor to just click and drag an area and then it will zoom in on that area and make a new graph that's just that area.
I can zoom back out, auto scale, all kinds of tools we can get to look at the information that we want. That said that we get that just out of the box without adding extra interactivity. We'll be adding an extra interactivity in following lessons.
Okay so we've added one graph in our next one extra graph and our next we'll add two more graphs and look at them all together and then we'll figure out how to lay them out better.