Admin Dashboard Website Analytics with Bootstrap 5 & Material Design 2.0

00:00 hey guys it's david from mdbootstrap.com 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 mdbootstrap.com 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