Bar charts and pie charts in Streamlit - Python Tutorial

- [Instructor] As usual, for using Streamlit in Codespaces, we need to do a pip install of our required libraries. So in this demonstration, we're going to be using Pandas, NumPy, Streamlit, and Matplotlib. So I'll just do a quick pip install of each of these. Pip install numpy, pip install streamlit, and pip install matplotlib. Okay, so great. Now we have the libraries that we need. I'm going to minimize the terminal here and start working inside of the Python file. We'll need to first import our libraries, of course, so we will import pandas as pd, import numpy as np, import streamlit as st, and import matplotlib.pyplot as plt. And in a previous Streamlit demonstration, we created a bar chart using Streamlit's bar chart function. This time, let's create a bar chart in Matplotlib and display it in Streamlit. The bar chart we'll create is a group bar chart comparing the heights and weights of the animals. First, let's define the data for the charts. So we're going to say animals. So our first variable, and it's equal to a list of animal types. So we'll have 'cat', 'cow', I'm going to go through and just get the placeholders ready for 'dog' and 'goat'. Okay, now let's create a second variable called heights. We'll set it equal to a list of numbers. That'll be 30, 150, 80, and 60. And then their weights in kilograms will be set equal to 5, 400, 40, and 50. And we'll start first by defining the subplots. So fig, ax are equal to plt.subplots. Next we'll define the label locations and the width of the bars. So for that, we'll say x is equal to, and then we'll call the arrange function. So that's np.arrange. And we'll pass in length, so len. And then we want the len to be heights. So we'll pass in our heights object, and we'll set our width here equal to .40. Width equal to 0.40. Now let's draw the first set of the group of bars for the animal's heights. To do that, we will call the bar method off of the ax object. So ax.bar. And here, we'll first pass the position of the bars. So x minus 0.2. And then we'll pass the heights list next. So first let's just say x minus 0.2, and the next parameter will say heights and width. And then let's set the color of this bar equal to red. Okay, and then I'm going to copy and paste this code to make a second group of bars for the animal's weights. So let's change the position to x plus 0.2 here. And then we will replace the heights variable with the weights variable. And then we can change the color here to orange. Next, we'll set a legend for this chart. So to do that, we need to call the legend method off of the ax object. So ax.legend. And then we'll pass in a list with the titles we want in the legend. So the first will be height, and then the second will be weight. They should, of course, be in strings. Rephrase, and these labels should, of course, be in strings. Now we'll set the labels and their positions on the x-axis. So to do that we'll call the set_xticks method off of the x object. We'll pass in our x variable. And then let's also set some tick labels. So to do that we'll use the set xtick labels method. So we'll say ax.set_xticklabels. And then we want our labels to be from our animals variable, so we'll pass our animals variable. And so here we'll pass the list of animal names. And now let's call Streamlit's pyplot function to display the Matplotlib chart in the Streamlit app. So to do that we'll say st.pyplot, and we'll pass in our fig object. Let me just take a quick look at the syntax here. Don't see any obvious problems, so let's go ahead and then just run this. So what I'm going to do is in the terminal, say streamlit run. We need to copy the file path here, copy path, paste it in, hit Enter. And then click the Open in browser button. Okay, amazing. So now we have used Streamlit to plot out a Matplotlib function on an actual web browser. Now let's look at how to do the same thing in a pie chart. Let's go back over to our Python file. And then what we're going to do is we're going to create an advanced pie chart of some animals and their heights and centimeters. And we'll create the pie chart using Matplotlibs library, and then display it using Streamlit again, of course, like we did with the bar chart. In the pie chart, the pie slices will be ordered and plotted counterclockwise. A wedge of a pie chart can be made to explode from the rest of the wedges of the pie chart using the explode parameter of the pie function. So let's define that now. We'll say explode equal to, and then create a list, and we'll say 0.2, 0.1, 0.1, 0.1. Now let's create the plot. So we'll say plot_pie, ax. Both of these objects are equal to plt.subplots. And then we'll call the pie method off of the ax object, so ax.pi. And we'll pass in the height of the animals, so heights. And then we'll set explode equal to our explode object that we just created. We want our labels to be set equal to the list of names in our animals object. So we'll put labels equal to animals. And next we'll pass in autopct as a parameter, which enables you to display the percentage values using python string formatting. So we'll say autopct is equal to, and then we will write a string that says %1.1f%%. So %1.1f%%. And that's it's string format. The next parameter is the shadow parameter. And so we're going to set shadow here equal to true. In the next line, we will call the axis method off of the ax object. So we'll say ax.axis. And then passing a string that reads equals. It should be equal, not equals. So I'll take that S out. The equal here acts as a keyword. Equal aspect ratio ensures that pie is drawn as a circle. Next we'll call the pyplot function. So that's st.pyplot. And we'll pass in our plot_pie object. So I'll go over to our browser and hit Refresh. Wow, that's amazing. Look at that gorgeous pie chart. It looks so much better than what you can create in default, in basic Matplotlib. And also another added advantage is that this is showing now on a webpage that you can share with other users, instead of just having it stuck inside of your Jupyter Notebook environment. Now let's look at creating statistical charts in Streamlit.