Chart JS For Beginners | Working With A REST API Using JavaScript

hello everyone welcome to another video tutorial on the code angle youtube channel and as you can see from my screen so this video tutorial is going to be about chats and we'll be making use of what is called the charts.js library to graph data coming from a rest api now this is not a rest api we create ourselves is an open source free api on the internet so i'll be showing you the documentation protection so all we did here was to get data from the rest api and then graph it onto the page while the employee said i and then the employee age this shows the amount each of these the values each of these statistics carry so that's pretty much what we'll be doing so going straight to the documentation if you go to dummy.dress api example.com you get access to this page and once you're on this page you have about five routes so we'll be making use of the first one which is the four slash employee endpoints it's a gets request and then this is the full part to the api so when i click on it it loads out all the data now i know you might not be able to read this properly but i have this chrome extension where it can pass this data properly for us and we can see you can see it's in the clay json format so we have two tabs we have raw and we have passed so this this chrome extension is called json formatter so that's pretty much what we'll be building and also i'll go briefly through the charges documentation as we progress in the tutorial so without wasting for that time let's get started [Music] [Applause] so the first thing we need to do let me close this page the first thing we need to do is to create our project so i'm going to go create a new folder so in that folder we can create our html and our our javascript files yes this will be done through vanilla javascript so can call this chat so let me navigate and open this folder in vs code visual studio code so we'll be needing let me see three files html css and javascript file so first one is index dot html second is styles or css and then lastly we have app.js so getting started first with the index.html let me generate the boilerplates for the html let me just say charts gs tutorial and then for the body i think i'm going to make use of bootstrap so let me just go to getbootstrap.com and then copy the cdn so we have access to the classes click on get started so this this is going to be in form of cart so let me put this cdn in the edge tag so what we can do is go directly to the well before i do that let me just create an h2 editor and call it chat gs tutorial tutorial save and then open the page on live server or with live server rather so we have our file displaying on the browser so now the next thing i want us to do is to um link the scripts tag for the chat gs library so if you go to chatsjs.org you get this landing page and then this page gives us access to documentation let's when you click on get started you have the introduction page where you have some pool chats but i think our navigation getting started so i have access to the script tag so i will copy this script stack this is version 2.8.0 assets when this video is being created so when you try to create this tutorial it might be a different version entirely so now we have the charges cdn another thing is let me quickly link the scripts tag for link the postcode the javascript and the css file so for the for this i'm gonna do src goes to js same thing with the css link real style sheets picture so style those css so let's give it a background of pool let's see so now the background of purple so the next thing we're gonna do is on the chat gs documentation we have the ready-made what's it called templates where we can copy on our file so what i'm going to do is i'm going to copy all of these and i'm going to paste it in my javascript for this to work we need a converse to a converse element so once i copy the canvas element it has an id of my chart as you can see so if i put this in my html and then paste it and save the chart should have been yes it gets crafts onto the page that means we now have access to the charts.js library on our page or in our code rather so the next thing i i'm going to do just to style this a little bit better so to do that we're going to be making use of some javascript some bootstrap classes rather so the first thing i'm going to do is create a div and give it a class of card it's going to be in a card format so card also i want the text to be centered so we test center then margin five so the everything has imagined so i'm gonna put everything within the canvas within the conversation tag so let me see what our class can we add okay for the h2 let's give it an header in our class so i'm going to create on that div and then class of cards header okay i'm gonna copy the closing tag of the div i'm gonna paste it so i save i save that so on the page it looks a bit more better or much more data so with this i think we can now start working with the rest api so this looks much more beautiful much more better and readable on the page so let's get started with the javascript part of the code in our app.js file will be fetching the data from the dom rest api but let me just add the comments here search i can't spell fetch this from domi rests api so fade data from dom recipe i will be making use of the asynchronous function so see i think function so it gets dummy data gets domain [Music] data so open the brackets and then call it brace now let's let's create a variable a variable called cons api url so let's go get the url for the api which is yes this put it in quotes then nezra will be creating the response from the api so when i say response so i'm going to await since it's a synchronous fetch so that would be the api url and then we gonna convert the response we get let me see charts yes there's something else i want to note we'll be making use of a bar chart so let me call this batch our data so we're going to be awaiting these two so the rest was going to be in json format it can be in so many formats but it's gonna be in tests i know if i'm being tested but for the sake of this story it's going to be in json format so the response we're getting we're going to call it response.json so let's console.log this in the console so chat data okay great then let's call our function get dummy data so what i want to notice the charges library allows you to draw different kind of charts so when they won't run on the pc line chart but we want the bar chart so we call the type bar and it's going to be from the bar chart so let me save that and then go back to the browser so yes it's informative by chat now so let's check the console out and see the results we have there okay we have an object let me make this much more both so we have an object that contains a data of about 23 items so or 24 because it's counting from zero so each of these data kind of have about three to four data in them employee age employee name employee salary id and the profile image but we make use of those three things here which is the employee age the name and the salary the name would be under the bar chart here and then the age and the salary will be inside our bar chart so now that we have it in the console job here is much more easy so the next thing we need to do is to get the individual data for let me remove this for the employee the age and then the yeah okay let me remove that the employee the age and then the what's it called the salary let me just log them separately on the console so what i'm going to do next is create a new variable called its salary so i can see barchar data dot data because that's what was returned when you check this yeah this is returned as data so the data we need to look through it using the map um function in javascript so dot map let me just say x then x dot what do we have there employee age let me copy that employee x dot oh we forgot about the arrow we need an arrow here x dots employee age so we log that to the console zone so the next one is um employee no salary no age yes sorry about that employee salary let me copy this two more times so the next one is the h so this will be employee age and then the last one will be the name so employee name so if i if i log the three of them to the console i should have they are individual data salary each and name so let me save that yeah and as we can see on the console we have the age we have the salary and then we have the name tiger nixon carrots winters i don't know if any of you guys know who these people are but for me i don't i've never met them before so this is excellent now the next thing we want to do is to append these variables to our charts to make it dynamic what we have here is your static data when you check the leaders we have january february march to july as you can see here then the data we have 0 10 5 so we actually don't want that we want data coming from the rest api so the next thing we can do is to click create a global variable so to do that the global variable request would assign them to this local variable yet then show them on this chart so without wasting much time we need just three data so let me just say employee employee label now it's going to be an array so we have done an array to it so instead of creating another variable like something else let me just create the variable directly here employee salary data employee salary data that is also going to be an array and then lastly the employee age data employee h data which is also an array every data in the charges is in form of an array see this is an array this is an array the data is an array the label is an array but we're trying to graph for two different charts so what we can do is inside the data set we can duplicate these objects so how do we do that now first i want to change this label from my first data sets to this one is going to be employee salary employees salary so the second set of data is going to be employee age so to do that what i can do is let me bring this down i'm going to copy the old of this and then paste it here so this is going to be employee age so the next thing i want to do is change the color let me just give this a color of blue so this is going to be blue i'm going to leave the butter color as it is and then the second one is going to be pink the one for the employee age so background color it's gonna be pink then for the options let me see this unless yeah it appears on the browser okay so for this tooltip it's showing only one i want them to show two so to do that we have the configuration options and any documentation of the charges library if you go to tooltip and you go down to what's called to the mode yes i want to say the mode so i'm going to open that so for it to show to i'm going to put the mode select the mode of index this is going to make me this is going to show both both two tips for the for the 2c for the both data so let me keep starting and then save and you see what i mean yeah as you can see we now have the two tip showing the employee salary and then the employee age so i think that's perfect actually so let me close the console so next thing we want to do i think that might be the final thing in fact is to is to assign the global variables here to the local variable so the employee label let me see the employee label i just say employee label is of course to the label is the name so let me just assign that to the name then the next one is the employee salary the employee salary data that will be the salary and then finally the employee age data that is going to be taking in the data for the age okay now that it has taken in all these the global rivers taking all this we need to put this these charts in its own asynchronous function this is because if we don't do this the reason why we need to do this actually is for the get dummy data here to load before like to load before our chat loads you shouldn't load uh it shouldn't load before our chat load our chat should load then it should now get the data or else if the data loads before the charts the charts would not be able to draw the data which we have um gotten from the rest api so to do that we're going to make use of the asynchronous function we're going to make it an asynchronous function using a synchro weight so instead of declaring it here would instead of calling the function yeah we call it inside the chart so let me call this out you see what i mean so let's call this async function dummy chat this spell function will function dummy chat so i'm gonna wrap this around the entire chat so what we can do is just wait to get dummy data so this is what i mean so when this chat loads then the data can download coming from the gate dummy data yeah which is excellent instead of using less mixtures of let me say let's let me make the zombie since it's a global variable i think vi is still reasonable to be used but within this chart let's make down let's make them let's so let me save this i doubt if our chat is going to display on the browser yes it's empty it's empty because we haven't assigned the variables to the charts themselves so instead of labels here we can just have employee label so this employee label will be coming from the api then this is for the salary data from the salary and then the age the age is here i believe this should show right now when we save okay might be having an error or let me refresh directly it's not showing it's not showing it's not showing what will be the problem let me see what would be the issue here oh i just realized we are not calling our chat data so we need to call this i mean how would our page our functions if it's not being called so let me call that dummy chart and then save so you see data is now been displayed from the rest api and this looks excellent so this is properly draft so if i click on this particular label here it kind of shows only for the employee age when i click on it again it shows for the employee so like the reason why the data for the age is not showing alongside the salaries because the data for the age is kind of minutes like you see a salary of about 403 1060 and then the 80. so there's no is going to show alongside this it's too small the data for this is to mine it so i think that's it for this tutorial we've been able to cover the basics and the dearborns of charges and how to display data that comes from a rest api using the charges library we created global variables we made use of bootstrap and then to make our charts look nice so let me format this the code for this is gonna be in the documentation i know this is pretty much simple and beginner friendly so and uh and it's pretty much straightforward so i hope you are able to learn one or two things from this particular video so thank you very much for watching um please hit the like and the subscribe button and also the notification button to encourage me to create more videos so thank you very much for watching and i will see you in the next one stay blessed bye

Channel: The Code Angle

Views: 3,940

Keywords: javascript tutorial, web development, chart js tutorial, bar chart, data, rest api tutorial, json tutorial for beginners, Chart JS For Beginners, html, css, chart.js, chart js, graph

Id: FtZwJZB0xb8

Length: 25min 6sec (1506 seconds)

Published: Wed Feb 24 2021