1 00:00:00,210 --> 00:00:08,190 And while we're still on a roll, I also want to set up columns for the most popular repost, meaning 2 00:00:08,190 --> 00:00:11,820 we are going to count how many stars the repo has. 3 00:00:12,140 --> 00:00:18,210 Not, of course, the one that has the most is going to be displayed an arrest of the four, meaning 4 00:00:18,210 --> 00:00:19,020 the top five. 5 00:00:19,470 --> 00:00:26,460 And then the same thing we're going to do, we most for three point and forty repos, we're going to 6 00:00:26,460 --> 00:00:31,130 use the column chart as well as departure. 7 00:00:31,750 --> 00:00:34,160 Well, these are two charts that we're gonna set up. 8 00:00:34,200 --> 00:00:41,040 And again, we'll start with the basic setup where essentially we're just gonna pass in dummy data and 9 00:00:41,040 --> 00:00:48,720 then we'll iterate over our array and grab the most forked on the repos with a most stars. 10 00:00:48,930 --> 00:00:53,820 So let's navigate back to our project and then we're looking for the column. 11 00:00:54,180 --> 00:00:56,610 We can remove everything that's currently in there. 12 00:00:57,210 --> 00:01:04,140 And then I'm looking for Pie three, because this is the content that I'm going to copy and paste. 13 00:01:04,500 --> 00:01:09,450 So again, let's select everything in line in the column, three day copy and paste. 14 00:01:09,990 --> 00:01:14,340 And then once we copy and paste, of course, we would want to change some of ours around where here 15 00:01:14,430 --> 00:01:16,140 everything stays exactly the same. 16 00:01:16,560 --> 00:01:21,400 But instead of PI, we're gonna look for column three D. 17 00:01:22,110 --> 00:01:32,040 Then I'd also want to change the caption was gonna be most popular popular language and then I'm not 18 00:01:32,040 --> 00:01:33,720 going to use any of these three properties. 19 00:01:34,020 --> 00:01:35,370 So it's just move it. 20 00:01:35,730 --> 00:01:36,310 How are out. 21 00:01:36,420 --> 00:01:40,420 Want to add y axis name as well as the font size. 22 00:01:40,460 --> 00:01:42,840 So y axis name. 23 00:01:43,050 --> 00:01:44,600 So what we're changing right now. 24 00:01:45,760 --> 00:01:47,080 Is essentially this one. 25 00:01:47,560 --> 00:01:54,790 So I would want to change the font size as well as add the values for Y axis as well as the x axis. 26 00:01:55,150 --> 00:01:59,470 So y axis name is equal to a stars. 27 00:02:00,130 --> 00:02:04,880 And we're gonna copy and paste and we're going to change it to a x axis name. 28 00:02:04,900 --> 00:02:05,860 Let's add a comma. 29 00:02:06,010 --> 00:02:07,540 Let's add a comma between them. 30 00:02:08,150 --> 00:02:10,540 And of course, the value here is gonna be a little bit different. 31 00:02:10,570 --> 00:02:12,100 It's not going to be x axis name. 32 00:02:12,550 --> 00:02:13,890 We're gonna say or repos. 33 00:02:14,380 --> 00:02:16,720 And then also it wants to add a different font size. 34 00:02:16,720 --> 00:02:22,660 So I'm gonna go with x axis name and line, font size, font size. 35 00:02:23,130 --> 00:02:25,480 And that is equal to a 16 pixels. 36 00:02:25,900 --> 00:02:27,760 So 16 pixels. 37 00:02:28,180 --> 00:02:29,110 Let's copy and paste. 38 00:02:29,170 --> 00:02:32,320 And we just need to change this, of course, to a Y one. 39 00:02:32,710 --> 00:02:33,890 We need to add here, comma. 40 00:02:34,480 --> 00:02:41,790 So once we have this setup, of course, in the Repos, we are already importing the column three. 41 00:02:42,340 --> 00:02:49,960 So now where we have the place holder instead of this div, we're going to go with column 3D and then 42 00:02:49,960 --> 00:02:53,290 for the data Propp we're gonna pass in the chart data. 43 00:02:53,470 --> 00:02:56,170 So for the time being, we're still using this dummy data. 44 00:02:56,710 --> 00:03:00,700 And once we serve, it should have a nice looking chart. 45 00:03:01,120 --> 00:03:02,320 In this case, column chart. 46 00:03:02,740 --> 00:03:06,340 And of course, we're going to set up the relevant data in the next video. 47 00:03:06,850 --> 00:03:11,770 And I also would want to add the bar chart where the same setup. 48 00:03:11,920 --> 00:03:16,120 So I'm going to navigate to column 3D and select everything. 49 00:03:16,180 --> 00:03:20,590 Then I'm going to open up the bar 3D file here. 50 00:03:20,950 --> 00:03:23,920 Remove my current code copy and paste. 51 00:03:24,340 --> 00:03:26,140 And we just need to change some values around. 52 00:03:26,230 --> 00:03:31,240 More specifically type, which is going to be equal to a bar 3D. 53 00:03:32,150 --> 00:03:36,370 And once we have a different type, the width stays the same, the height stays the same. 54 00:03:37,080 --> 00:03:44,320 And of course, the only thing we need to change are the values for the caption, why X is an X axis. 55 00:03:44,860 --> 00:03:46,740 So it's not going to be most popular. 56 00:03:46,740 --> 00:03:49,870 Words are gonna be most forked here. 57 00:03:50,350 --> 00:03:56,650 And then as far as y axis name, we're going to go with Fork's on X axis is going to stay exactly the 58 00:03:56,650 --> 00:03:57,010 same. 59 00:03:57,430 --> 00:04:00,820 So the last thing we would want is in the Repos. 60 00:04:01,450 --> 00:04:03,220 And I guess I'm going to close the sidebar. 61 00:04:03,670 --> 00:04:06,510 We have already imported the bar three day. 62 00:04:07,240 --> 00:04:13,990 Now, of course, where I have the div just gonna replace it with var 3d nand as far as the data. 63 00:04:14,410 --> 00:04:16,340 Again we're just going to pass and char data. 64 00:04:16,360 --> 00:04:22,530 The dummy data for now and then in next video will properly set it up where we can see the most for 65 00:04:22,540 --> 00:04:23,190 three balls. 66 00:04:23,650 --> 00:04:26,230 So this is what we should have at this point. 67 00:04:26,710 --> 00:04:29,290 So now of course we can iterate over our repos. 68 00:04:29,320 --> 00:04:29,620 All right. 69 00:04:29,620 --> 00:04:30,370 One more time. 70 00:04:30,820 --> 00:04:35,170 And now do a similar setup like we were doing 40 languages.