Admin Dashboard Website Analytics with Bootstrap 5 & Material Design 2.0

Watch other courses

Here is the second part of the tutorial that shows how to build an admin dashboard. In this video, we're gonna create a new one, called the traffic dashboard, which is gonna show us traffic data about our page. We're gonna use some new, awesome components like charts, tabs, inputs date pickers, and we also gonna enhance our sidenav and navbar.

Important - this tutorial requires the MDB 5 Pro package

00:00 hey guys it's david from 00:02 welcome to the second 00:04 tutorial on how to build admin dashboard 00:07 in the previous tutorial we learned how 00:08 to build a basic dashboard with some 00:10 charts 00:11 sidenav and navbar and in this video we 00:14 gonna 00:15 create a new one called traffic 00:17 dashboard which is gonna show us 00:19 some traffic data about our page we're 00:22 gonna use some new 00:23 awesome components like charts you 00:25 already know but we're also gonna use 00:27 tabs component which allows us to put 00:30 more 00:30 content into the same place thanks to 00:33 switching the tabs 00:34 um we also gonna learn how to use inputs 00:38 uh some date pickers and we also gonna 00:41 enhance 00:41 our sidenav and navbar from what we've 00:45 done 00:45 in the previous version if you missed 00:48 the previous tutorial it's not necessary 00:51 for you to do it because we're gonna 00:53 build everything from scratch 00:55 but i strongly encourage you to do so so 00:57 you get 00:58 some basics because we talked a little 01:00 bit more 01:01 on how sidenav works and things like 01:04 that which we're gonna 01:05 now do very very quickly without going 01:08 much into 01:09 details so as i said this is a second 01:11 tutorial in a row we're gonna have 01:12 more we're gonna have another admin 01:14 dashboard third one we're also gonna 01:16 have the 01:17 full ecommerce tutorial set for you so 01:19 how to build the e-commerce 01:21 sites from scratch so if you don't wanna 01:23 miss it don't forget to subscribe to our 01:25 channel don't forget 01:26 to turn notification on and now without 01:28 further ado let's get started 01:30 so in order to start obviously we have 01:33 to 01:34 download mdb you can do it in many ways 01:37 one of the way is to go to 01:38 navigate to 01:40 your orders and download mdb as a zip 01:44 package 01:44 if you are mdbcli user ready just open 01:48 terminal 01:48 and type mdb init choose a 01:52 proper version we have plenty of them 01:54 today we're going to use mdb5 standard 01:56 version 01:57 and hit enter if you don't know 02:00 what mdbcli is please check the 02:02 description down below you're going to 02:03 find a link to tutorial 02:05 on what mdbcli is and how to use it this 02:08 tool um allows you to quickly initialize 02:12 new project as well as publish them to 02:14 the web 02:15 so your final project can be deployed 02:17 with just a single command just 02:19 mdb publish and your page gonna be 02:20 published to web without 02:22 any extra configuration okay so we 02:25 have our project here 02:29 let's rename it to mdb5 admin 02:32 traffic and let's open this in 02:36 a visual studio code i'm going to be 02:39 using this one 02:40 let's open this in a live studio so we 02:44 have a live preview 02:45 and let's get started so as i said in a 02:49 previous tutorial 02:50 we already went through um components 02:53 like uh sidenav and navar so let me just 02:56 quickly rebuild them 02:58 without going much into details so 03:00 obviously what we're gonna need 03:01 is our docs page so i'm going to 03:04 navigate to mdb5 docs pages this 03:06 bootstrap icon over here 03:08 to the right on our site and let's start 03:11 with sidenav i'm going to go with a 03:13 basic example 03:14 obviously i strongly encourage you to 03:15 check others as there are plenty of them 03:18 so i'm going to copy this one i'm going 03:19 to paste it into 03:21 our header actually i'm going to create 03:25 this first so i'm going to have header 03:28 and i want to have main part so let's 03:31 paste it into 03:32 header so what i'm gonna do now i'm 03:35 gonna go to mode transition 03:36 because we want our enough bar to hide 03:40 on the smaller screen so i'm gonna get 03:41 the javascript part from this 03:43 example side of navigation with the mode 03:45 transition i'm gonna copy that 03:46 um i'm gonna get back to our code go to 03:49 the script part 03:51 now paste our code i'm gonna change id 03:55 so this is side nav 03:57 one and we want to change um screen size 04:00 at which 04:01 we're gonna collapse we're gonna hide 04:03 our side nav 04:04 let's have a look whether it works or 04:06 not so now 04:08 when we change screen size 04:13 uh it hides side now as well now we're 04:15 gonna add nav bar 04:17 so let's go to nav bars let's get 04:22 basic example 04:26 let's get basic example i'm going to 04:28 copy this one 04:30 let's add 04:33 [Music] 04:35 nav bar here 04:39 comments so we know where it starts when 04:41 where it ends 04:43 we're gonna add id to our nav bar 04:47 main nav bar we're gonna change 04:50 uh color from light to white 04:54 and we also gonna add fixed top 04:57 class to make it fixed to make our 05:00 number fixed 05:01 now we are going to lay out the break 05:04 points we're gonna reuse 05:05 uh bootstrap breakpoint to add some 05:08 styles 05:09 so we're going to use this one and let's 05:12 add it on top of our page 05:14 over here 05:17 and we want to add this few queries for 05:20 main header and 05:24 main navbar if you don't know why i'm 05:27 doing this please check our previous 05:28 tutorial 05:29 where everything has been explained and 05:32 long story short we need to 05:36 push our content 05:39 uh 200 pixels from the left margin 05:42 because this is the size 05:44 of our uh sidenav so now 05:47 this nub bar is pushed without that it 05:49 will be 05:51 overlapped it would be covered with side 05:53 nav so we couldn't see 05:55 this brand link over here okay finally 06:00 what we're gonna do we're also gonna 06:01 change style of our body 06:04 so i'm going to add this inline so style 06:08 background color and set it to 06:13 fbfbfb 06:15 so we're going to give this is going to 06:17 give us some nice contrast because we're 06:18 going to add 06:19 these cards over here which are white so 06:22 we won't have the small contrast over 06:24 there 06:25 so it looks better okay now let's take 06:29 care of 06:29 our sidenav so as you can see here we 06:32 have 06:33 this sidenav with logo and also with 06:37 some accordions over here so let's learn 06:40 how we can do that 06:41 let's start with logo so i'm going to go 06:44 to 06:44 docs get back to sidenav 06:48 find the one fine example with 06:51 logo so i'm going to show you how easy 06:53 it is and that you probably going to 06:55 find 06:56 any example you can possibly think of 07:01 and the one which we are looking for is 07:02 here in mdb navigation here we have this 07:04 logo 07:05 so what i'm going to do i'm going to 07:06 search for this logo part it's 07:08 here and i'm going to add it 07:12 to my code 07:17 like that 07:21 now we have logo over here now 07:24 let's change uh this links and by the 07:27 way 07:28 please have a look at this behavior now 07:30 we have this collapses over here 07:33 and i'm able to uh 07:36 expand both categories category one and 07:38 a category two 07:40 uh this is one way of doing that you can 07:43 you you may want to have your menu 07:45 working like that 07:46 or the other option is to turn accordion 07:49 on what accordion means is that as you 07:50 can see 07:51 as soon as i collapse or expand actually 07:54 as soon as i 07:55 as soon as i expand one of the section 07:59 the other one which was already expanded 08:02 collapsed 08:03 automatically so i'm gonna show you how 08:05 we can do it it's 08:06 very very very easy what we have to do 08:10 is we just need to add another attribute 08:13 which is data accordion and set it to 08:16 true 08:18 and mdb will gonna take care 08:22 of that for you now let's 08:25 change the content and the icons over 08:29 here so i'm gonna show you 08:30 how to do that you can go to icons 08:34 here you're gonna find um 08:38 icons um documentation so how to use it 08:41 how to enlarge it 08:42 and also you're going to find this list 08:46 of 08:46 all the icons which you can use 08:50 and you can search for them so for 08:52 example 08:53 if i'm gonna look for something like 08:55 chart 08:58 and i'm gonna use let's say this 09:01 chart area just copy this one here you 09:04 have a code generated 09:05 so you can copy entire entire code 09:09 or in our case i just need 09:12 a icon name because 09:16 we already have icons here 09:20 and i just need to replace it with the 09:23 correct icon 09:24 one thing to remember is that this um 09:27 these new icons 09:28 um found also icons they have these 09:31 prefixes like f a s 09:33 f a r like here we have f a far so i 09:35 also need to change this one for 09:37 fas so if you would wonder why 09:40 your icon doesn't work please make sure 09:42 to check the prefix as well 09:45 and let's say it's a website 09:48 traffic 09:52 and let's check now it's changed so let 09:54 me quickly 09:55 change the remaining two icons 10:05 okay it's ready now it looks better 10:08 looks more like a real uh 10:11 real dashboard so now let's get moved to 10:14 the navbar part so 10:15 let's see what we're gonna do now we're 10:17 gonna get rid of this content over here 10:21 and we're gonna replace it with a search 10:24 and we also with this drop down 10:26 which you can see in most of the 10:28 dashboard which allows user to 10:30 navigate through its account or logout 10:34 let's start with something which is 10:35 invisible at 10:37 the moment but as soon as i 10:41 shrink window you're gonna see it so 10:43 this is that 10:45 is our toddler button which is 10:48 visible only on a smaller screen 10:52 once sidenav disappears so once it 10:56 disappears we want to have an option to 10:58 to toggle it so let's do it now 11:03 so we're going to remove everything from 11:06 our nav bar 11:09 so we're going to have it empty now 11:12 we're going to get this toggler uh 11:14 which was which comes from sidenav 11:18 code and put it into our container fluid 11:22 uh we're gonna get rid of this okay let 11:25 me show you what's going on now 11:27 so we have this toggler here now it's 11:28 working fine we want to get rid of this 11:31 button 11:32 primary class we're going to change this 11:34 color to 11:35 white and instead what we're going to do 11:38 we're going to add 11:39 shadow 0 to remove shadows 11:42 and we're gonna also reset our padding 11:45 so it looks like that 11:46 our number it's uh no smaller but don't 11:49 worry as soon as we're gonna fill it 11:50 with some 11:51 content uh search uh input 11:54 and this avatar it's gonna take a proper 11:57 size 11:58 uh what we also gonna do is we also 12:01 gonna add 12:02 mr tree for a future 12:05 uh so that our uh search was gonna be 12:08 here 12:09 i was placed in a proper place okay now 12:12 let's enlarge the icon 12:14 so in order to do that we're gonna add f 12:17 a 12:18 large let's make it bigger 12:22 and that's it for now 12:25 as far as the design is concerned what 12:27 we also want to do now we want to get 12:30 rid of this we want to hide this toggler 12:32 on a resolution higher than 12:33 1400 pixels and we want to show it only 12:36 on the smaller 12:37 so for that we gonna use flexbox for 12:41 that 12:42 and by adding d block and 12:45 d xxl none 12:50 classes we make it invisible 12:53 on the large screens and visible on a 12:57 smaller 12:57 screens if you want to learn more about 13:00 this 13:01 classes just go to docs search for 13:05 flexbox and you're gonna find 13:09 more information on all this 13:13 flexbox feature supported by mdb 13:16 including alignments display 13:20 and so on and so on so uh 13:23 you can hide elements um depending on 13:26 the screen size you can make them 13:28 visible only on a certain screen size 13:30 so this is very very very useful tool 13:34 so let's add the search form to our 13:37 navbar so let's get back to navbar 13:40 documentation 13:43 and from a subsection forms let's copy 13:47 this form here 13:53 and let's paste it next to 13:57 our toggler 14:02 okay so this is our search now 14:06 what we want to do we want to do 14:08 something opposite 14:10 so we want this 14:13 search to be visible only on 14:17 large screens and on the small screen so 14:19 we want to hide it 14:21 so we're gonna do that by removing this 14:25 d 14:25 flex class and adding two classes 14:29 which are d none so 14:33 it stands for display none and define 14:37 breakpoint 14:41 on which we want to 14:44 hide it so let's see if that works now 14:47 yeah as you can see 14:49 now they are swapping either we have a 14:51 toggler or a search form 14:54 now the last remaining part is obviously 14:56 the avatar on the right 14:58 side so let's find 15:01 a proper subsection over here avatar 15:05 and let's copy the example 15:08 the sample code from here so i'm gonna 15:12 copy this nav bar this u 15:15 u list 15:18 and let's paste it after a form 15:23 let's check it it's working fine however 15:25 we're gonna have a small issue over here 15:27 because 15:28 since it's aligned to the right 15:31 edge of the screen this drop down is out 15:34 of our screen 15:35 but we can fix it very very easily we're 15:38 just gonna add 15:39 one class to our drop down menu which is 15:42 called drop 15:43 down menu right 15:47 and this gonna fix this issue for us 15:52 okay now when our navigation is ready 15:54 let's 15:55 move to the main part so let's move to 15:58 the main 16:00 section let's add container 16:04 here it's gonna be our placeholder for 16:07 what we're gonna do 16:09 we also have to add this margin top 16:12 so i'm gonna add it inline margin 16:16 top 58 pixels 16:19 this will make sure that our nav bar 16:22 won't 16:23 overlap with a main part 16:26 so it's giving this margin here and now 16:28 let's add some heading 16:30 here so i want to have h1 lookings like 16:34 which looks like h3 which is centered 16:38 and has some paddings and margins 16:41 set traffic 16:45 dashboard 16:48 yeah okay now we're gonna be working on 16:52 a section 16:53 so the section is like semantic element 16:57 we could be using div obviously but 16:58 since html5 uh we should be using 17:01 more descriptive um name so we're going 17:03 to have few sections here so we have 17:05 this section with inputs which allows us 17:07 to define 17:08 which time span we want analyze 17:12 then we're going to have these cards 17:13 over there then we're going to move 17:16 to this top uh section 17:19 and we're gonna fill it with some charts 17:20 and then we're gonna add some more cards 17:22 to the right to fulfill the entire 17:25 content 17:25 so let's start with the first uh or the 17:28 first 17:29 section which is which is this one where 17:33 the inputs 17:34 so let me create 17:37 a section and we're going to go 17:41 to cart's documentation 17:45 because you're gonna see that the cards 17:47 are very very useful 17:48 um component which allows us to 17:52 uh present different type of 17:55 content and we're gonna use this 17:58 the very basic cards i'm going to copy 18:00 this one here 18:01 i'm going to paste it now for now it 18:05 looks like this 18:07 but what we want to do we just want to 18:10 get rid of 18:11 everything i'm going to leave just the 18:14 card body 18:16 and the card itself 18:19 we're also going to add some paddings 18:21 here 18:23 to make sure everything looks good and 18:25 we have 18:26 proper spacing and now we're going to 18:28 add grid 18:29 inside our 18:33 cart so i'm going to have a row and i'm 18:35 going to have call 18:38 md6 so we have a two 18:41 columns with the same size what we're 18:43 going to add in a first column 18:45 is select so let's go to select 18:51 component and we're going to use 18:55 as you can see there are many examples 18:58 as always 18:59 we are looking for the one with the 19:01 label so 19:02 customer know our user knows what to 19:05 expect 19:06 or what this select is meant for so i'm 19:08 going to copy this one 19:09 and i'm gonna paste it over here and now 19:13 let me just quickly 19:14 uh change adjust options here so we have 19:17 today 19:19 yesterday last 19:23 week last month 19:26 and custom so the custom 19:30 means that we're gonna choose the date 19:32 from a date picker 19:34 and let's 19:38 change the label here and now we have a 19:41 date 19:42 so customer knows what to do with this 19:44 select 19:45 now let's fill the second column here 19:48 with a date picker so again let's go to 19:52 the date picker 19:53 we're gonna use a basic example here 19:55 although there are many others 19:58 uh options we're gonna go with the basic 20:00 one so let's just copy this 20:03 let's paste it here 20:06 okay and let's see how it works 20:12 so it's working fine 20:16 now we want to do some small adjustment 20:19 over here currently 20:20 in order to open a date picker we have 20:22 to click this icon over here 20:24 what we want to do is we want to 20:28 make this entire input clickable so as 20:31 soon as 20:31 user click on that we want to see this 20:34 date bigger 20:35 so we can do it very 20:39 easily what we have to do we just need 20:42 to 20:42 add a new property over here 20:46 which is called data toggle 20:50 and set it to 20:54 date picker 21:00 and this will make our entire 21:05 input clickable and finally we want to 21:08 add um default value 21:11 set to something like select 21:14 a custom date or a date 21:19 now another very cool feature which i 21:21 wanted to show you right now 21:23 about mdb is something called design 21:26 blocks so let's have a look at this 21:28 example in our docs 21:30 if you navigate to this section you're 21:32 going to find 21:34 a lot of predefined blocks over here you 21:36 have few sections 21:38 top where you're going to find most 21:39 interesting design blocks 21:42 from mdb new we're gonna find all the 21:46 newest one 21:47 and trending which are the most popular 21:51 blogs used by mdb users 21:54 you also have sections um like admin 21:57 blog landing page 21:59 so you have different categories and if 22:01 we go to admin blocks 22:03 you can see that you're gonna find a lot 22:05 of predefined 22:06 sections also the one which we just 22:08 built before 22:09 i wanted to show you how to do it 22:10 manually and now i want to show you 22:13 that you can easily reuse an existing 22:16 block 22:16 predefined and created for you by our 22:19 team so you can just go 22:21 open this block you're gonna see this in 22:23 our snippet editor where you can 22:25 play with it you have a live preview 22:27 over here so 22:28 you can play you can adjust you can fork 22:31 it you can save it 22:32 as yours you can show to your friends 22:34 now what i'm going to do i'm just going 22:35 to copy this one 22:37 and place it in our project 22:41 so let me add a new section over here 22:48 and let's paste this block 22:51 and see the result now 22:55 what we have to do we need to add some 22:57 paddings 22:58 so i'm going to add some padding 23:01 to actually margin to our previous 23:04 section 23:07 so to this one 23:12 yeah now it looks cool and if we look at 23:15 the final 23:16 um design we want to have four cards 23:19 like this 23:20 so i'm just going to add one more 23:23 let me quickly do that obviously we need 23:27 to adjust 23:29 this 23:33 lg-4 and change it to lg 3 because we're 23:36 gonna have three 23:38 cards now so we are making space for the 23:40 fourth one 23:42 and now let me 23:45 copy paste and actually duplicate this 23:48 code 23:49 over here so now we have four and let's 23:52 quickly adjust the data 23:56 to look it more realistic something like 24:00 bounce rate measured in 24:03 percents like 30 to 35 24:09 percent and then we have some drop 24:13 we had some drop let's say 13. 24:17 obviously i'm giving some random numbers 24:20 and this drop was by let's say 28 24:22 percent 24:23 so now it looks and now it looks 24:28 more realistic so we have this bounce 24:30 right here 24:32 okay now let's move to the next section 24:34 which is this one so we're gonna start 24:36 with 24:36 um we're gonna start with um 24:40 grid uh we'll have eight columns here 24:43 and 24:43 four columns on the right side so let's 24:46 create it 24:47 let's add some 24:51 margins to this section we can collapse 24:58 it 25:00 okay and let's create a row 25:03 let's create a call md4 25:07 times two this is going to change to 25:10 eight so 25:11 now we have two now we want to add 25:14 something which you already know so we 25:16 want to have card 25:17 and inside the card we want to have card 25:19 body 25:22 and we want to have the structure in 25:24 both places 25:28 so we have these two two cards here 25:31 they're empty for now we can close this 25:33 one 25:34 so now let's move to the new 25:37 component which is called pills 25:46 so here we have different examples 25:48 obviously 25:50 you can have different options you can 25:54 have vertical 25:55 pills so you can imagine already that 25:57 you can create 25:58 a lot of um different setups 26:02 uh for a settings page and so on and so 26:04 on 26:05 or even some chats uh we obviously i'm 26:08 gonna 26:09 use a basic example here 26:18 and paste it to our first card body 26:23 let's see how it looks now yeah now we 26:26 are missing one tap 26:27 so now let's add the step and let's have 26:30 a look at the construction so 26:32 as you can see it's not complicated we 26:34 have this 26:35 allies over here which are responsible 26:39 for these uh buttons over here 26:43 and we have also this placeholders here 26:46 this divs 26:48 we have a different ids and attributes 26:52 like this uh and here is the content for 26:56 corresponding tab so if you want to add 26:58 another tab the fourth one 27:00 we want to add another button first 27:03 obviously we want to change all these 27:05 values to 4 because it's going to be the 27:07 4th 27:08 tab 27:13 and we want to add this extra 27:16 div change 27:20 it to 4 27:23 and let's see if this works now yeah 27:26 it's working fine so what we also want 27:30 to do 27:31 is we want to make this um 27:34 this this tabs over here these buttons 27:36 over here 27:37 to take the whole width available we're 27:40 gonna add that 27:41 simply by adding enough justified class 27:44 to our pills so let's add it here 27:51 yeah now it's looking good 27:55 let's change content so we're gonna have 27:58 users 28:00 uh page views 28:06 then we have average time let's say 28:14 and bounce rate 28:20 okay so now it's high time to fill this 28:22 with 28:23 data so in a previous tutorial i showed 28:27 you 28:27 how you can use charts 28:31 simply by using these 28:34 html attributes and we also said that 28:37 this is very good option 28:38 for simple charts 28:41 in this tutorial i'm going to show you 28:42 more advanced options so how you can 28:44 create 28:45 and adjust your charts using 28:48 a javascript option so let's have a look 28:51 at this example now so let's 28:55 use a line chart 28:58 uh but instead of the data attributes 29:00 one we're gonna use in this 29:02 um so we're gonna copy html into our 29:05 first tab 29:06 so this is top one content and let's 29:09 copy this java 29:11 script code so i'm going to copy this 29:12 one and i'm going to separate it here 29:17 just in case you 29:21 use this code and let's have a look how 29:25 it looks like 29:26 so as you can see it works pretty much 29:28 the same as the previous one with the 29:30 data attributes but what we're going to 29:31 do now 29:32 we want to add another set 29:35 of data and we want to display them 29:38 in the same chart all together 29:42 so how we can do that what we have to do 29:46 is just define another data set 29:48 so let's call this data set current 29:51 period and let's copy paste 29:55 previous period 30:01 and now if we gonna change if we're 30:04 gonna 30:04 check our screen you might be a little 30:06 bit surprised because 30:08 although the data are the same you can 30:09 see the current and the previous are the 30:11 same 30:13 our chart has has option 30:18 which can either 30:22 enable or disable overlapping of 30:26 our charts so in other words 30:29 um since we have exactly the same data 30:33 this chart the second line will be 30:35 invisible 30:36 and now this this is disabled 30:40 so assuming that we don't want that we 30:43 can change this configuration 30:45 and i'm going to show you how you can do 30:47 that and please keep in mind to always 30:49 refer to our docs documentation because 30:51 this option might change in the future 30:52 so by default 30:54 it might be already disabled so you 30:56 won't have to change that 30:58 um anyway but it's good for you to know 31:00 because otherwise if you 31:02 just happen to have the same data you 31:04 could be surprised 31:06 so how to how to change how to change 31:09 chart options let's go to dogs 31:13 let's go to custom options 31:16 so here you can see different options 31:21 so what we have to do except for our 31:23 data 31:24 object we can specify options object 31:28 where we can set all the different 31:29 options which you can find 31:32 in the api so there are plenty of them 31:34 you can change them adjust them 31:36 to your needs so let me show you this 31:39 example so we have this option 31:41 object here and then we just pass this 31:43 option object 31:44 to our initialization code so let me 31:47 just copy this one 31:49 we're going to use this as example 31:52 let's add it over here 31:58 now what we want to do uh we don't 32:01 need this x 32:04 we just want to set y and what we want 32:08 to change for this 32:10 is something called stacked 32:15 and set it to false 32:18 let's change the name to something like 32:20 users 32:21 chart options because we're going to 32:23 have more 32:25 and now let's pass this 32:29 attribute here 32:32 and now you can see that there is no 32:34 issue anymore 32:35 uh let's also adjust a little bit 32:39 and the way data are displayed because 32:41 now they are a little bit different we 32:42 have this grayish 32:43 zone and then we have this blue line so 32:46 let's work on that 32:47 and we can define all the settings 32:51 in the data set so you can change 32:54 options like background 32:56 color and set it to for example i have 33:00 something 33:01 prepared so let's see how it looks like 33:04 now we change it so there is no 33:06 background color anymore we can add 33:09 border color 33:13 to i choose this one 33:17 yeah so let me just 33:22 go through other settings like border 33:24 width 33:25 point borders color point background 33:28 colors 33:29 and so on and so on and now because we 33:31 have the same data set we have two lines 33:33 exactly at the same place so let's also 33:35 change 33:35 this one so let's replace this data 33:39 and this numbers with something 33:43 like that 33:46 and this will generate this nice 33:50 multi-line chart for us 33:54 so now let me quickly um add 33:57 remaining charts um it's going to be 34:00 exactly the same so i will be doing this 34:02 with um you know use of javascript so 34:04 let me quickly do 34:06 that now 34:19 okay so i just added the remaining chart 34:24 so now that it looks like this so let's 34:26 take care 34:27 of uh the last remaining part 34:31 of a chart on the right side we're gonna 34:33 use a pie chart 34:34 over here so we're gonna need 34:37 two cards like this so let's do it 34:42 now we're gonna add 34:45 heading here 34:57 we're gonna duplicate this card 35:01 and set previous period 35:05 so now let's add um 35:09 two pie charts 35:14 here 35:16 pie chart 35:20 so the first one is 35:25 current second 35:28 one is previous 35:40 now let's get javascript part 35:54 pie chart current 36:00 yeah and now let's adjust the data and 36:04 duplicate it to the previous period 36:07 so i did it before so let me just 36:11 replace it 36:15 and now our chart is ready 36:19 okay guys i hope you enjoyed this 36:21 tutorial i hope you find 36:23 are using mdb easy 36:26 and if you have any questions please do 36:29 not hesitate to ask them we have a 36:30 facebook group you're going to find a 36:32 link 36:32 in the description down below so please 36:35 do not hesitate to join our group and 36:37 ask any questions 36:38 which may come to your mind if you 36:41 finish this tutorial 36:42 please also do not hesitate to post it 36:44 and show with the others 36:46 and if you don't want to miss next 36:49 tutorial where we're going to build 36:51 a dashboard to maintain users and orders 36:54 don't forget to subscribe to this 36:56 channel and turn notification on 36:58 and for today that's it as i said we're 37:01 gonna have 37:02 more coming so please stay tuned and 37:05 we're gonna see each other in the next 37:16 video