1 00:00:00,390 --> 00:00:02,310 Forest are working on a next charts. 2 00:00:02,760 --> 00:00:10,200 I don't want to cover how we can make the charts responsive, because even though at the moment everything 3 00:00:10,200 --> 00:00:14,600 works as we expect it is because I already add a D yesses. 4 00:00:15,240 --> 00:00:18,900 First, let's navigate back to a repost and worry. 5 00:00:18,900 --> 00:00:19,750 You have the wrapper. 6 00:00:20,190 --> 00:00:21,420 Now, I mean, this is up to you. 7 00:00:21,450 --> 00:00:27,230 But in order to showcase Hahm setting up the responsiveness, I'm going to come on this out. 8 00:00:27,530 --> 00:00:33,270 Now, again, you can just leave it and you can just sit back and relax and watch how the responsiveness 9 00:00:33,540 --> 00:00:34,230 takes place. 10 00:00:34,590 --> 00:00:39,780 But if you would want to see that in action, then of course, our just encourage you to comment about 11 00:00:39,870 --> 00:00:43,080 the dev, the fusion chart container and the Asaji. 12 00:00:43,620 --> 00:00:45,210 And then you'll see how that happens. 13 00:00:45,660 --> 00:00:51,750 So at the moment, if you're looking at the example chart or the pie 3D, we have the width. 14 00:00:51,840 --> 00:00:52,230 Correct. 15 00:00:52,310 --> 00:00:53,640 And the width is 400. 16 00:00:54,220 --> 00:00:57,060 And even though it works kind of okay. 17 00:00:57,390 --> 00:00:58,950 What's going to happen in a bigger screens? 18 00:00:59,230 --> 00:01:01,860 Of course, it is not going to be responsive. 19 00:01:02,700 --> 00:01:07,950 So if you're just going to be stacking three shots together, you might have some distances in here. 20 00:01:08,250 --> 00:01:13,830 And if you already have some kind of grid layout, well, that is probably not the best look that you're 21 00:01:13,830 --> 00:01:14,400 shooting for. 22 00:01:14,730 --> 00:01:17,180 So how we can make these charts are. 23 00:01:17,910 --> 00:01:19,440 So here goes first. 24 00:01:19,680 --> 00:01:20,850 As far as the width, of course. 25 00:01:21,150 --> 00:01:22,800 We're not going to use absolute value. 26 00:01:23,180 --> 00:01:25,020 We are going to use a relative one. 27 00:01:25,350 --> 00:01:27,990 So in this case, what I'm looking for is hundred percent. 28 00:01:28,300 --> 00:01:30,090 So I'm going to go with eight percent. 29 00:01:30,150 --> 00:01:32,290 I'll say at the moment we do that. 30 00:01:32,310 --> 00:01:35,400 Of course, this is just going to be giant because now it's going to be checking. 31 00:01:35,700 --> 00:01:37,980 Well, what is the width of the screen? 32 00:01:38,470 --> 00:01:41,220 And that's why I'm just going to make it giant all the time. 33 00:01:41,520 --> 00:01:41,910 OK. 34 00:01:42,450 --> 00:01:47,760 Even though it looks somewhat better, because now we're, of course, are responsive. 35 00:01:48,330 --> 00:01:49,980 That's not the look that we're shooting for. 36 00:01:50,370 --> 00:01:59,380 So now we wouldn't want to be more specific where we use CSX and we make sure that the chart is always 37 00:01:59,380 --> 00:02:00,510 going to be responsive. 38 00:02:00,960 --> 00:02:07,290 As far as the parent container and the way I did that, if you check out the repos I was targeting, 39 00:02:07,290 --> 00:02:11,850 first the dev, then the fusion chart container and then the S.A.G.. 40 00:02:12,210 --> 00:02:16,860 And for all of them, I was just using higher percent than I was making sure that I always, always 41 00:02:16,980 --> 00:02:21,260 override that because, of course, everything is set up there to be an inline. 42 00:02:21,750 --> 00:02:22,980 Now, let me showcase that. 43 00:02:22,990 --> 00:02:30,070 So if we go with inspect and learn, if we take a look at the chart, we'll first see the d'Hiv. 44 00:02:30,540 --> 00:02:32,330 So we have the section center. 45 00:02:32,670 --> 00:02:34,650 This is where I'm setting up right now. 46 00:02:34,680 --> 00:02:36,660 Of course, my column layout and all the. 47 00:02:37,080 --> 00:02:38,460 But then I have the div. 48 00:02:38,880 --> 00:02:43,860 And then within a day of I have the span with a class a fusion chart container. 49 00:02:44,220 --> 00:02:46,980 And then within that container I have the SPG. 50 00:02:47,460 --> 00:02:55,090 So essentially what I did is I targeted all three of them and just make sure that they are 100 percent. 51 00:02:55,500 --> 00:02:59,220 That's the reason why here in the wrapper you'll find this code. 52 00:02:59,520 --> 00:03:07,690 So now, of course, the moment I uncommented, you'll see how my chart is responsive for my grid. 53 00:03:08,070 --> 00:03:15,150 Because if you take a look here for the men with off twelve hundred pixels, I have a Tulkarm layout. 54 00:03:15,240 --> 00:03:18,930 Our second one is going to be bigger. 55 00:03:19,260 --> 00:03:21,060 So the first column is going to be two fractions. 56 00:03:21,360 --> 00:03:23,730 And the second one is going to be three fractions. 57 00:03:24,180 --> 00:03:30,780 Or just remember that it's not just setting up the hundred percent in the chart. 58 00:03:31,320 --> 00:03:37,260 If you'd want it to be responsive to a parent, you might need to do a little bit of work. 59 00:03:37,620 --> 00:03:38,920 And also Fortius Riggi. 60 00:03:39,240 --> 00:03:40,860 I just added this board radius. 61 00:03:41,130 --> 00:03:43,530 So it matches to everything that I have. 62 00:03:43,990 --> 00:03:48,180 And just to showcase that, I have a column layout. 63 00:03:49,140 --> 00:03:54,210 If we're gonna go here, we have a div and then for example, on Common D example chart. 64 00:03:54,660 --> 00:04:02,000 And then another div, you'll see that the first column is going to have a tone with numbers. 65 00:04:02,130 --> 00:04:05,340 I have the second one, which is going to be for my bar chart. 66 00:04:05,670 --> 00:04:10,590 So that's just something to keep in mind, that if you want to set them responsive, not only you need 67 00:04:10,590 --> 00:04:16,960 to change those values in the chart, but also you need to target the C. 68 00:04:17,520 --> 00:04:21,390 And we're targeting the parent, Dave, than the class. 69 00:04:21,480 --> 00:04:24,180 So the span as well as the SPG. 70 00:04:24,510 --> 00:04:30,990 And in my case, since I didn't want to run into some Escher's, I just use the import flag, even though 71 00:04:31,050 --> 00:04:35,910 I'm fully aware that that is not the best case scenario for to see assess. 72 00:04:35,940 --> 00:04:39,210 You probably shouldn't use for your regular shifts is important. 73 00:04:39,480 --> 00:04:40,500 I'm fully aware of that. 74 00:04:40,800 --> 00:04:45,820 But then sometimes if you have a third party, I don't want to deal with their in lines, he assesses. 75 00:04:46,200 --> 00:04:48,990 So I just make sure that we use the important flag. 76 00:04:49,290 --> 00:04:50,730 So that should do it for responsiveness. 77 00:04:51,510 --> 00:04:52,010 I think. 78 00:04:52,020 --> 00:04:55,380 Next, we're going to work on our donor chart.