Build Modern Charts with ApexCharts.js | React Tutorial

hi guys welcome back to a new video in this video we're gonna look into how to create this code with 19 global graph using one library and I'll show you how to install that library starting from scratch until we create this graph right here so here you can see that we have this basically looking similar to a line graph but this one is called a area graph so for this one here we can see that this is a number of cases recover and DEF so I went ahead word on that we can see this is the total number of that date I get the data from so two data from each month so starting from the first of the month and until the middle of the month which is the 15 of month and not only that this graph we can also try to download it as a PNG file the image file or CSV file and what make it look interesting is that when I hover on that you can see this is the its highlight the recover and when I hover here it's try to highlight the ear cases and it has some thought of like a little bit of animation and suppose to say right here when I try to reload this page you can see that there's like a little bit of the animation right there and when I scroll down here this is another graph which is the bar graph the data is again the same as the top one right here starting from this here up until right now so I just want to show you the differences of the graph that I have generated using this library without further ado let get started alright so before I install this library video chat that you just seen earlier let not just have a quick look why I decided to use this library other than the others so right here if you watch one of my previous video you can also see that I also have implement this one as well so they have tons of charts right here you can just check that and the next one which is the charge js2 which is quite popular you can see this is the number of that it's not only for react is available for other languages as well such as JavaScript and this one here are some of the examples so you can see this is the example from the reactions of js2 and the next one which is the one that I am going to use and install so this one is called react epic starts and as you can see that the look of this chart is look a lot better compared to the others and I really like this animation and also the color everything so you can see this one is the example from epic shot you can see this is 4d a particular 40a react and it has a with the new angular and also a JavaScript as well so right here we're going to install can be line or can be area or can be more like as you can see here so the look of it and also the combination of the color I really like so this is why I decided to use this one all right so enough talking so now let's just install this library and before install this library I also want to quickly show you what we have on the commitment in life now right here so here you can see that I created a new page is called graph and right here we have more things and also a little bit of we need to fix this margin as well so now let's just have a look what I have here here it's quite similar to the other page like the about page so as you can see right here I just copied from the about page and I would change the name yet so now let's just do it here okay so next one go to the APS so you can see I import this file which is a graph yes right here and it's inside the pages folder you can see and now I use this graph and basically create like a path for that so the graph the component is coming from this page right here and next one the navigation is an FK s I basically create like a new one the link the link is coming from the react router table and here it's going to when I click on that it link me to this page which is the graph page and this is the name of that but right here I've seen on the website are there little have like a space in between so let me just create like the marching right I will give this as 50 pixel right we fix this and now let's just have a quick look again so here you can see that this looking a lot better when I click on the about page it goes to the about page and a graph page which we're going to install this one right here the graph so the graph should look stay after the title right here all right so now let's just install this library I'm going to copy this right so now the library has been installed we just need to have look here what the one that I'm going to use which is this area and now let's just see some of the example the code sample so I would choose the second one here and here these are the code that generate these charts all right so what I'm going to do I just need to basically copy the sample right here and then render it on the new application and see how it goes so now let me just copy this value right here from the draw this not state and here here so I'm gonna paste that inside the react here alright so instead of storing into the distal state or inside the use data you see we are coaxed and I just paste everything right here first then I want to install it inside the constants variable which is the series and then change the colon into the equal sign and the same as the option right here Const and then this change to equal sign so right now is storing in these two variables series and the option alright so now we have importantly dummy data up there and we want to actually render the chart itself so let's just need to copy this part this code and then just remove this so this is what it looked like but again we don't use this we just call that directly so this would be it and then we need to import this one here so just import from react apex charts this would be the one okay now see what all that we need to update so right here we have the option series okay so right here I just change this to semicolon we need to separate this same as this one no longer need that one so now let have a look on the website we may get an error because right here which is imported directly but now let's just check if you get that error then if so we can just install a new library from the epoch charts so now let's just have a quick look for us so here you can see that the more you not found and then what we are going to do we need to install another library on top they react epic charts so it just like it depends on the other one to be able to run this component okay so as you can see this is quite similar to the one that we just had look into so this is the react APEC charts and then this is just epic charts this is the library from basically for the JavaScript and now we need to install this and then we can just look again right you can see that there's no arrow at all after I install this library then now let's just click on this graph all right this is what we are going to look for and here is it tried to render the data from the right here did a meteor coming from this page I just copied into this react and what we are going to do instead of like using this dummy data what I need to use the real data coming from the Kovach 19 API so now let's just have a quick look into the API okay so now before we going to go and continue working on this we need to have the data for this so the data that I'm going to use again with the places from this API so sometimes you can see that the URL is this one here but sometimes it's this is the one this is not a Hesse age so these two are basically the same thing right now we can just instead of using this again use this they are the same basically and now we can see that once we go to this home page you can see this is called global States for the Kovach 19 and this is coming from the start and up to basically this is the lattice State so we need to have the data to be able to create look similar like this but not the same which be going to use this chart to get the data I just need to click on the our Doc's here and now when I scroll down looking for the history so this one this is basically for all the countries and now let's just click and then Cephas execute so here you can see this is what each country coming from this but then in this tutorial I'm not gonna show you how to do or show the data for each country instead we're going to use all for history Schloss all here right here just click on the get try it out execute so this one it will try to get the date data data for the last 30 days so this is the one and now let me just copy the request URL and then open this in a new page so this is for the last 30 days okay so this one is show the data for the last 30 days if you want to see all the data from the start of the cases found up until today then what you need to do you just need to replace the study with the word all but not this one so say if you want to remove this and then hit enter and you suppose that you can get all data but it is not working that way so now let's just again do this and instead of third H is equal to all so here this is the first cases found which is 555 in the 22nd of January up and here the latest one which is in the fifth and the day I record this video it's all which is today on the nine of May but for this one it's show like a day before that and at the same time in us that the timezone is different from kirlyam here in australia so that's why it's show me basically like the day I record this which is the night of May but it showed me two days ago before that and also instead of using this API to render everything's on this react right here in this tutorial for simplicity sake I just want to get some data from here so basically this is the first one and say next data that I'm going to get which is the first and then again with the 15 so for each month I just take two data from that and then we just place that data place it inside I will react here so now let's hop out the data here and then see you guys in a minute okay so for this category which is the label for what we're going to show on the graph the chart so here we have any data coming from this 20 second the first and then 15 again up until 7 of May so here this is the data you can see this is the number and right here for the cases again which here for the next one here for the recover this is the number again coming from the same date from these states so this is the red color right here start with the 28th and here this number so here 28 and here this number and the death again just want to show you this in the data that I get from so from these 17 until this number so here is but instead of again getting all of the data from a list here I just just choose it in between for two data for each month so now let have a look again on the graph so right this is the graph that we have right now and we can just give see a big picture of what the virus like rice so this is the first date up until now so you can see that it's quite serious the cases that help me found okay one things you can see that the tooltips underneath what I show you right here you can see the date as well as the time as well but the time here it's not what we are going to knit because the data that we get from it doesn't indicate that the time that it gets because I will show it for each day so I'm going to remove that one and for the day it start with the 21st of January but then when we have a look here we can see that the date is actually 20 seconds so the reason is that before I remove the time here I'm going to show you why it's show differently from what we can see in the code here okay so now let me just remove this one real quick so that's it and then this is the curved mode yep that's that should be good okay so now let go again and you can see that the time has been removed okay so now let's talk about the date that we can see here which is starting from the 21st of January but again here this 22nd of Jan so the reason again re mentions me because of the time zone so you can see right here this is the time zone of Australia it's right here it the 9th of May but then and this is the current time so now let me just quickly change my time zone from Australia time zone and Melbourne just go and change it to the United States which is this one right here Central Time so once I change that you can see that this is the time it's one day before Australia right now it's at 836 p.m. and the date which is on the 8th of May now let's just go back again and I try to refresh this and then we'll check to see if the date is correct now ok as you can see right here down there it says 22nd of the January which is right here you can see the date coming from that up until the 7th of May no let me just go there here 7 of May down there you can see that so this is because of the time zone that you may see looking differently so now let me just change it back to Melbourne Australia and then let me just refresh this real quick and you can see that this is the time so let me just check again you can see this is one day before I'm currently recording so this looking a little bit different but again it because of the time zone and we can also see this is the color for the cases which is the blue one and then the green one which is to recover the f1 which in this case the orange color and we can see it goes up for the cases and this is the Deaf and as well as the recover so next one let's see if we can configure a little bit with using this library so here you can see we have the charts and the height so this is the type so the s-1 which is the data label first by default is service as sports I'm going to set this up through and let's see what we can see on the website here alright so here basically when I try to set that us true we can see that number directly here without having to horrible my mouth on that so we can see that there are here but I just want to change this back to force and then for the top here I just want to see what Li can do if you remember we have the line graph so let me just change this to line graph and then I refresh that again so this one is so when I change that we can see nice things actually change nothing happen at all so let's just check down here we can see that right here we also have the type and also have the height as well so I'm these two actually the same thing what if I just remove this and see if it actually are still working so just remove that and then change the area to line and the height just keep us 350 and now right here we can see that we have already changed the style from the area to graph so this is what is looking right now and then next one I want to change it to bar graph so let me just type the bar right here see if you get that right so here we go we can also change the type of the graph that the chart here to the one with needed bar graph so this is what it looking like I think that I want to basically in this page I want to show to graph rather than just like one so first one again I just keep the original one which is the area I really like the look of this one next one I just put it right here again using the same option using the same series coming from the data on top there and then the type here I just changed this to bar graph I like to have these two so now let me just refresh try to render again okay so we can see that right here inside the graph page we have two one is the area chart the other one which is the back rough and the main feature or what make this library interesting is that so say I'm going to come here and I can just click on this button to zoom in to see the data for each day but again in this case we don't have the data for each day yet I just choose to date from one month and we can also click this to just scroll let me just zoom in and then we can just use this to scroll left scroll right and click on the home to reset zoom and right here what makes it special is that we can just click on that and try to download this graph as well so let's see I want to download this in the picture format the PNG so here we go it's already downloaded when I try to click open it you can see that here is we can actually try to download that from this library as well so that what make its really interesting and again for this one it with the CSV file the excel file ok so here you can see when I try to open that you can see this is the value that I just enter it in the root application so coming from this state up until this state and this is the number of cases recover and also the death so this is very cold so this is the date or all of this data and along with this state so this is actually it's shown right here and again for this one same thing I can just download this image type and also with this CSV also with this SVG as well so now let's just have one quick final look here this is the graph the image the bar graph and again the same as the previous one and this is the SVG so this is what it look right now how cool start and again so for this title I might change a little bit maybe I just do something like this global states right here so just change that title cover it 19 global graph so that what I'm going to call it press again alright so this is the title of this page and yep I think that looking a lot better now this is the about page this is the home page so here we have the animation but for the graph we don't have that the reason is that we right now use hard coded data so that's loading very quick one last thing before I finish this video just right-click and I just want to check the responsiveness of this website see if this cross is actually responsive okay so here this is it right so you can see that it's actually responsive here we go let's look a lot better okay I hope you learn something how to install this library and how to insert the data into it and try to make some change and the cool thing about this library again it's got this modern look Ping's charts and also when i try to refresh it you can see this kind of animation and also we can also download this data as well and can zoom in zoom out and try to reset it and this is the label for the date from here to start up until now and this is the total so this is the basically right now it's around so in this the latest data here is around 4 million cases and we can see that this value will automatically generated ok so um I think that's spermatic for the tutorial hope you learned something from this video and until then see you guys in the next video [Music]

Channel: Hong Ly

Views: 9,131

Rating: 4.6399999 out of 5

Keywords: reactjs tutorial, react js project, reactjs tutorial 2020, reactjs, react tutorial, react js, reactjs tutorial for beginners, react charts, react chartjs, react chartjs 2, react apexcharts, reactjs apexcharts, react apexcharts example, modern charts, coronavirus, coronavirus live, coronavirus live stats, covid19 tracker, covid 19 chart, covid-19 chart, covid19 graph, covid 19 graph, coronavirus reactjs, covid 19 live now, covid-19 live now, reactjs chart, react chart

Id: NeVq-mSIzFI

Length: 27min 5sec (1625 seconds)

Published: Sat May 09 2020