WEBVTT 1 00:00:00.230 --> 00:00:01.530 Hi guys, and welcome back. 2 00:00:01.530 --> 00:00:02.890 In this video, we're going to learn how 3 00:00:02.890 --> 00:00:04.600 to adjust the size of our plot 4 00:00:04.600 --> 00:00:07.540 so that we can make our labels fit a bit more easily. 5 00:00:07.540 --> 00:00:08.383 Let's get to it. 6 00:00:09.300 --> 00:00:10.980 What we've got here is our function 7 00:00:10.980 --> 00:00:12.350 that creates a bar chart, 8 00:00:12.350 --> 00:00:16.730 it gets data from the database via app.py. 9 00:00:16.730 --> 00:00:20.210 And that comes from the database through this query. 10 00:00:20.210 --> 00:00:23.070 And essentially, it just plots them using tick label 11 00:00:23.070 --> 00:00:25.940 to give us the x values for the labels, 12 00:00:25.940 --> 00:00:29.330 and here we pass in the height of each column. 13 00:00:29.330 --> 00:00:32.930 However, we had the problem where if we run app.py, 14 00:00:32.930 --> 00:00:37.420 we end up with our pole names here, intersecting each other, 15 00:00:37.420 --> 00:00:38.820 which is not great. 16 00:00:38.820 --> 00:00:41.410 So we decided that in order to make them fit a bit better, 17 00:00:41.410 --> 00:00:42.880 we're going to rotate them 18 00:00:42.880 --> 00:00:45.640 and we're going to discuss how to rotate in the next video, 19 00:00:45.640 --> 00:00:48.730 but in this one, we're going to adjust the size of the plot. 20 00:00:48.730 --> 00:00:50.980 So let's go over to charts.py, 21 00:00:50.980 --> 00:00:53.640 and we're going to add a couple of things. 22 00:00:53.640 --> 00:00:58.430 The first thing is to do fig size in here inside plt.figure, 23 00:00:58.430 --> 00:01:00.670 we can do 10, 10 for example. 24 00:01:00.670 --> 00:01:02.910 This is going to set the figure size 25 00:01:02.910 --> 00:01:05.150 to 10 inches by 10 inches, 26 00:01:05.150 --> 00:01:09.010 where each inch by default is 100 pixels. 27 00:01:09.010 --> 00:01:12.200 So 1000 by 1000 really, if we run this, 28 00:01:12.200 --> 00:01:14.460 now we get a bigger figure. 29 00:01:14.460 --> 00:01:16.300 However, it's not quite big enough, 30 00:01:16.300 --> 00:01:20.070 it would have to be this big in order to avoid our problem. 31 00:01:20.070 --> 00:01:22.580 So although this helps, it's not enough. 32 00:01:22.580 --> 00:01:24.920 Also at this point, I also wanted to add something 33 00:01:24.920 --> 00:01:26.340 that I forgot to add earlier on, 34 00:01:26.340 --> 00:01:29.480 which is a title and the y label for the graph. 35 00:01:29.480 --> 00:01:30.810 This just makes it look a bit nicer, 36 00:01:30.810 --> 00:01:32.810 so feel free to add that in if you want. 37 00:01:32.810 --> 00:01:35.450 Now, we can also adjust the relative sizing 38 00:01:35.450 --> 00:01:38.310 of the elements within a plot. 39 00:01:38.310 --> 00:01:40.820 And so by that I mean exactly this. 40 00:01:40.820 --> 00:01:44.850 I'm gonna run app.py again, and we've got this problem here. 41 00:01:44.850 --> 00:01:47.630 And now if you're using the default plot viewer, 42 00:01:47.630 --> 00:01:50.950 you can click on configure subplots down here. 43 00:01:50.950 --> 00:01:55.090 And that brings up this nice configuration window, 44 00:01:55.090 --> 00:01:57.640 here we can adjust the subplots 45 00:01:57.640 --> 00:02:00.550 and what this means is we can adjust 46 00:02:00.550 --> 00:02:02.930 how far from the left they are 47 00:02:02.930 --> 00:02:05.960 or how much padding they've got on the left, 48 00:02:05.960 --> 00:02:08.930 how far from the bottom they are, 49 00:02:08.930 --> 00:02:11.913 we can also adjust how close to the right they are. 50 00:02:12.840 --> 00:02:16.140 And also how close the top they are. 51 00:02:16.140 --> 00:02:18.030 So these configuration property here 52 00:02:18.030 --> 00:02:19.850 are exactly what we need. 53 00:02:19.850 --> 00:02:21.360 What we want is to adjust the bottom 54 00:02:21.360 --> 00:02:22.910 to give us a little bit more room here, 55 00:02:22.910 --> 00:02:24.750 so that when we rotate our labels, 56 00:02:24.750 --> 00:02:26.500 they will fit in a bit more easily. 57 00:02:26.500 --> 00:02:28.990 Now we're going to learn how to do this in code obviously, 58 00:02:28.990 --> 00:02:30.680 because as soon as you close this 59 00:02:30.680 --> 00:02:34.250 and restart the application, it resets back to the default. 60 00:02:34.250 --> 00:02:36.250 But nonetheless, it's good to visualise 61 00:02:36.250 --> 00:02:37.950 it like this because now when we come 62 00:02:37.950 --> 00:02:40.160 to the code is gonna be a bit easier to understand. 63 00:02:40.160 --> 00:02:43.110 So let me close that and we can go down here 64 00:02:43.110 --> 00:02:44.540 and make our changes. 65 00:02:44.540 --> 00:02:47.223 Under the figure.subplots_adjust and we can pass in 66 00:02:50.490 --> 00:02:53.450 something between zero and one for each value 67 00:02:53.450 --> 00:02:55.860 that's left, top, right and bottom. 68 00:02:55.860 --> 00:02:59.150 Here, we only want to adjust the bottom to 0.35, 69 00:02:59.150 --> 00:03:00.880 seems that is all we need. 70 00:03:00.880 --> 00:03:02.540 If we run app.py now, 71 00:03:02.540 --> 00:03:05.830 you'll see that the plot has a bunch more room underneath. 72 00:03:05.830 --> 00:03:07.280 By the way, I know that we haven't talked 73 00:03:07.280 --> 00:03:09.820 about wspace and hspace. 74 00:03:09.820 --> 00:03:12.240 These are used for when you have multiple plots 75 00:03:12.240 --> 00:03:13.390 in the same figure. 76 00:03:13.390 --> 00:03:16.030 We will come to those later on in this section. 77 00:03:16.030 --> 00:03:17.500 So now that we've got a bit more room, 78 00:03:17.500 --> 00:03:19.800 we can start rotating our labels. 79 00:03:19.800 --> 00:03:22.300 Let's learn how to do that in the next video. 80 00:03:22.300 --> 00:03:23.540 Thank you for watching this one, 81 00:03:23.540 --> 00:03:25.173 I'll see you in the next one.