How to Integrate Chart.js Using Angular 12 with Data from a REST API (2021)

hello guys welcome to today's tutorial and in today's video i will show you guys how we can integrate strategies using angular as well as data coming from a rest api the api we're going to be working with it's from the coin ranking api and it's something i've worked with a couple of times my tutorials and we continue with that today so as you can see on the page it's a sample of what we're gonna build what we have here is data from cryptocurrencies if i hover over one of the charts and then i get a label that shows details so as you can see this one is bitcoin and the price around forty seven thousand if i over over another one let's say that of xrp you can see it shows srp as well as the price so without wasting much time let's get straight into it so first thing i'm gonna do is to open up my terminal and i already have a directory called map so i'm gonna generate a new angular project inside this directory so the command i'm going to use to do that is run ng new and i'm going to call this project ng charts so i press enter some question prompt is going to come up before the project has been generated first thing sucks is if i would like routing for this project of course we don't need routing so i'm going to say no and then it actually wants to use css xcss s e s s which is sas or less but we'll just go with css in fact we will not even be using css for this project now our project has been successfully generated i can move into that directory which we call ng chat and open up the projects on visual studio code by running code dots so inside visual studio code we have a bunch of boilerplate templates we can work with if i open up the src directory i have this app directory that has a couple of components we have an app component.css appcomponent.html an app module and an app component file this is all what we'll be working with i won't need to create a new component rather what i need to create is a new service the service is used to consume the rest api we're going to work with today so to do that i'm going to run under another angular command called ng generate service and we can call this alts so it's going to generate a new service called old service as you can see the service has been generated here so the next thing we need to do is to go configure the service in our visual studio code so let me minimize this editor to projects head over to all services.ts then we can see we have a boilerplate code for this to work we need to import a couple of packages so i can just do that by running imports http client because without importing this we can consume the service we need to work with the api so i import the http client as well as the http headers this is coming from at angular slash common slash http next up is to inject this service in our app module so i copy this hot service head over to the app module components this is where we set up the providers and as well as the imports index for the application to know we are trying to consume a rest api so what i can do here is to paste the out service inside the providers and then import it into the application next up is to also import the http client module because we also need this for the app to recognize we are consuming we'll be working with a service so what i'm going to do is just type in http client module i think we have a list of error in the odd service i add adore to your service or made a mistake by not adding the p so with that done we can now set up the configuration for our service so the next thing i'm going to do now is set up the base url so like i said at the beginning of the video we're making use of coin ranking so i head over to the coin ranking api documentation which is on coinranking.com i scroll to the bottom of the page there you can see api documentation and i head over to my dashboard because i have an account with them this is where i can get the api key i'll need for this project as well as the api url will be using for this project so let me open the documentation so what i want to get is this particular base url as you can see at the beginning of the documentation we have this highlighted string gear url so i'm going to copy this and then we can create a new variable in our project so i can just call this private base url is equal to so it's going to be inside of a screen a string rather so there we have our first variable another variable we're gonna need is the proxy url but before okay let me quickly set that up too so there's something called um let me just create a variable now so i can just say private proxy url so i'll explain the reason why we're using the proxy url when i complete typing in the url so we have htcps code on double forward slash so it's gonna be course dash anywhere dots error cool app dot com then forward slash so this is like a form of proxy url that helps us to bypass any form of course error because we are trying to consume the api using our front end we are not using we are not setting up any form of um proxy server in the back end probably using node.js or any form of backend programming language which allows us to avoid cause error because we are setting it up in the front end we need to bypass the course error and this url here is going to help us to do that so that's why we are setting up a proxy url so um does that about that so the next thing we need to do is just to grab the api key so i'm going to head over to my current ranking dashboard and copy this particular api key so if you download where i'm gonna put the api keys are both yeah so it's gonna be in form of a variable so i can just say const api key it's equal to so i put this in a string so that's our api key we're going to be using in this project so one more thing i need to do now is to set up an http options this is like a form of header so to do that i'm going to create another variable so i'll say const http options it's of course too it's gonna be in form of an object so i can just say edis so new http address the https is what we imported at the top of our page if you can see that alongside the http client so it's also going to be in an object so we're going to have something called content type content dash type which is going to be which is going to be application slash json so application four slash json another thing we're gonna need is the custom api key like the form of custom header so you can just have also in a string we can call this my custom slash header so this is going to come along with the request once we consume the api so it's going to be in the backseat so what we have to do is reference the api key so it's going to be in a backseat so i'm going to call the api q variable inside of this particular x um this header rather so the last thing i'm going to do is to now create an access control allow origin so to do that it's going to be inside of a code tool so we're going to have access control dash allow dash origin so this is going to be in an asterisk so the access it signifies like a form of white card that is it should allow access from anywhere this rest api has been consumed like it's also a form of enhancing up from getting a form of course error but this procedure already takes you of that but and when we are trying to create an error this is like a formal convention we try to do when we are trying to avoid the course error also so that's why i'm also doing that there so they do over in this project is to create a function that is service rather that our consumer api before i do that and i need to pass in some form of defense density injection so in angular we have something called dependency injection so that's what i'm going to do now so i'm going to have a private http then it's going to make reference to the http client to imported above so i have http clients so below this constructor i can just create my service now so we have crypto data because we are getting details of cryptocurrency so why not name this function crypto data so inside this function i can create a url so i can say costs url and then using make use of the backseat we can easily access our variables created above so the first i'm going to do is to to call this the proxy url so i can just say this.proxy url then also call the base url so these dots base url so we're going to go with the url of the application so we need to return something so i'm going to return [Music] these dots http which has access to http client so don't get because we're trying to get data i'm trying to make use of a get request so i can just so don't get them passing first thing that i'm gonna pass is the url which we created above which we can see here so the second thing i'm gonna pass in there is the htcp options which has the header so this will come along with our request when we try to consume the data in our application so i'm gonna return a promise i'm gonna type into promise and then [Music] person.then there are many ways you can do this so this is one of the ways so you know create an error function that takes a variable of data and then open a bracket then return the data so that's all this is all we need this is our service that calls our api so i believe this should work when we try to com consume this particular api in our application so the place we're going to do that is the appcomponent.cs file which was generated for us when we're generating this application so i head over to the app component dot cs file the first thing i'm going to do is to import the old service so let me see if i can't quickly do that so i copy this i want to make use of the constructor to do this so i'm going to create the constructor so constructor this is like a form of dependency injection so i call it create a service called private and then assign it to the service file we created earlier in the project so we need to import this into this particular file so we can just quickly do that by saying import or service from because it's in the same level so i can just say those for slash alts dots service so i think that's all i'm gonna play this title in the chat and also i'm gonna play by default because this is a new project we're gonna have some bunch of the um default templates so i'm going to clear everything in fact i mean that's weird back to our components dot html so this is where we need to this is where we will have to consume our apis the next thing we need to do is to create four variables we need for these projects to work so i can just create the first one so i will type in the results and this is gonna be any coin price coin name so not taking a type of any because we're making use of by default angular makes use of typescript so you need to always specify the type um it's just going to be any and it's coming in form of an array so these are the four variables one need we are going to need to reference to before i proceed like we know we are going to be using makings of charges we need to import charges so to do that i can just quickly [Music] head over to the chat js documentation and if you scroll down and if you go to charges.com this is what you have so for you to import install the application you need to run npm install chat.js so that's exactly what we're going to do now so i'm going to copy this line of code and then paste this into our application and then let that get installed that's all we gonna need so as that is installing what i can do next is to import that chargers itself so i can just say import chats from chats.js so i guess that's all now we need to make use of a we are getting the error because it has not fully been installed i guess that should likely be it's but we don't need to bother with that now so what i'm gonna do next is to make use of the [Music] life cycle called ng on init this is where we're going to be calling our service so the ng only needs life cycle hook works by loading any form of variable data within it as a page loads like the first time of action when the page loads this is what this particular life cycle does there are so many lifecycles in angular you can check the angular documentation for more information on that so to work with this what we need to do is to make reference to our service we created in service file or service file so i can just say this dots because already depending on c injection here with this private service we have here so i can just say this dot service dots the function we have in that service file is something called crypto data if i'm right so crypto inside we are supposed to have intelligence for them but i don't know why my usual studio code seems slow today so it's going to return a promise so i can just say then and then we have an arrow function so i can just say rest opponent brackets then the result variable we have above i can just pass in the result into that so i can just say these those results is according to the response we get from the data so what i can now let's console this and see if we have the data on the console in our project so console.log this does results so i'm going to save everything we've done so far and then i'm going to serve the application oh boy what's all this yes charges has been fully installed so we can just run ng serve as you can see the projects compiles successfully exactly what we wanted so what we can do is head over to the browser and in the browser we can open the console remember in our code we are sort of um logging the results to the console so we did this.result variable so i head over to the console and oh dear lord we have a bunch of errors here so let me click on this link over here and see what we have it says missing required request header more specified one so let me go back to my code my old service because it's likely coming from the old service and i noticed two things the first thing i noticed is uh base url there's no well show what we are trying to consume that is they suppose we are trying to show a list of coins so if i head back to the coin ranking documentation you just have a busy area there but what we are trying to do is to get a list of coins so there should be something at the end of the version two like it's something like a four slash coins you are missing this in the url exactly like something like this so it's supposed to be v2 slash coins so i added that to the project and i correct that by putting a four slash coins let me confirm that again yes for slack coins so we are good to go with that and also in this proxy url i noticed a white space here this is something that could also be causing our error so let me fix these two things and then save and we head back to the console to see if the error is dually corrected and um boom there we go we have access to the data so we have a list of coins an array of coins and another object called stats so the one we are going to be working on is called coins and inside of these coins let me build in this a little bit inside these coins we have a lot of data in each of the objects so we only need two data inside the subject the first one is the name and the second one is the price these are the two things i need to display on the chart so with these two things we will be done with this particular tutorial so let me just um let me let me head back to the project and what we need to do now is head back to our component.ts file and then i need to access those two things that is the coinprice and the coin name that's why i created these two variables area these are what i'll use to access them so what i'm going to do next is to clear this console.log and then call this dot point price and then say is equals to these dots results dot data because the response returned in our console if you can see it's called data so this does results not results results the data dot coins because we are trying to access the coins so i'm gonna map through this with the map operator in javascript so i'm gonna take in an arrow function called coins i can pass in this as a type of any and then in the other function i can just return coin dots price so that's all so to get the name i'm just going to copy this down because it's also the same process so i'm going to say this dot coin name so it's also going to say this is all these are the coins mapped through it and then um you can just return coin coin dot name coin no coins coin coin dots name so we could also console these two variables just to be sure we are getting the right response to append to our charts so i can just save on so those log i can't spell console properly consider plug these dots coin price and then come put a comma and say this dots coin name save that add back to the console the page refresh is on its own as to most angular projects you do except to change the settings so there you have it these are the data we are working with we are able to get the result for the prices as you can see here and then the result for the names so you can see that here so this is all this means we are all set to append this data into our charts which is the final thing we're to do so to do that we already import the chart up here from the charges library so still this is going to be done inside of the ng on in it so i'm just gonna scroll down a little bit maybe add a comment that says show chats these are so to show the chat data i'm going to make reference to that chat by running these those charts remember we created a variable appear called chat so i'm gonna it's sticking in an array and a type of any using the type scripts so this just just then we make reference to the charts we imported above by saying new charts now it's gonna take in something like a subtle from a reference sort of works like this in the in the app component this we're gonna make reference to this particular variable i think i'll call it a variable you can check the charges documentation for more insight on this but i'm not going to go too deep into that but this is how it works and as you see later in the video when i work in the app.html so what type of chat i'm going to be working on i'm going to working on it the line because we can work with different type and work with the bar chart pie chart and likes but for this tutorial we're working with a line chart so that's why we have this line and then the next um object we're gonna be having here is the data object this is what we um we need to pass in the data we got in from the coin ranking api now this might look like um complete um gibberish to you like i'm typing software from top of my book to make things clear i'm gonna add to the charges documentation for you to see that i'm following the documentation as well so what i'm gonna do is to head over to chat types and then head over to line in fact let's edit let's add to the landing page of the documentation so as you can see here we have a data that contains some objects like data sets background color background so what i'm gonna do is to copy this particular data objects so i'll clear this off and then paste it and i'm going to get rid of some things so for instance i don't need i don't need the options so i'm going to get rid of the options i don't need the border color get rid of this butter color get rid of this background color in fact um i'm going to leave the border with i'm going to leave the border with and then um what i need to change now is um the the data we're getting so the first one is this label so the label in our chat is gonna be coin name so instead of having those variables in there so i'm going to pass in our data that'll be this dots coin name and then in the data sets what i'm going to change here is the first one is we're not working with this data so we're working with this dot coin price so this will be this dot coin price which we have in the console we have access that's the console and then the label you can just call the label something like coin price so this there are so many settings to this like you can check the documentation so the border width like i can just increase it to three let's increase the three then what else i can just say feel let me have that as false then the background color let me let me change the background color background color so i can just um pass that as some rgb same with the example i showed at the beginning of the video i can just say 93176 i mean you can use any form of color you want is up to you but i'm just trying to make it consistent with what i showed in the example in the beginning of the video so i think um that's all um okay we can add one more thing the border color let's also add the border color so border hello i just have an hashtag 3e 95 cd so i think that's all i can save this and then head back to the projects and see if we have a chart to split on the page oh we have this error can't acquire context that's because i made a huge error i didn't import this in our app components a big error for me sorry about that so like i said earlier we're gonna make we're gonna get this canvas variable so i'm gonna head over to the app component and then i'm gonna create a div and inside of this div we're gonna have a a tag called canvas so it's inside of this canvas we pass in the id called canvas and then we make reference to the charts variable we created inside of the cs file so we can just say the width and the height of this so which can be something like um let's say 400 then the height can also be 400 i think that's a good size so let me save maybe this time it will show on the page i don't know so we have all three dots running okay now we have an arrow i want us to pay attention to this error it says line is not registered controller so there's something in the documentation of charges quotes you might have this error anytime you want to implement charges in your angular application so what i want you to do is to search for something called registry boost so let me see if it's gonna work here registrables it's in the documentation somewhere in chat.js so let me let me show you when i was working with this spirit i had a slight issue with this so this was what made it work for me so if you have any form of errors like this it's maybe what you need so this is it yeah so instead of importing charts alone you might need to import registrables as well so what i'm going to do is to put this here registry boost and then in the construct so what we have to do is to make reference to the chats module and then say something like register dot register you start then spread your registrations imports in it yeah something like this yes if you check the documentation that's what the we asked to do so i think that registers everything in the chat so when i save and i head back i i expect the error to disappear yes as you can see the error disappears we have a chart showing live on the browser no errors and then you can see we have a coin ranking name our coin name as well as our coin price so this is bitcoin just like we have in the sample i showed in the beginning of this tutorial so this bitcoin and the price um we can just over over any of the coins i think there are 15 total and then you get the name and the price so this is just a simple and straightforward application if you have any form of questions please drop them in the comment section below do not forget to like and subscribe to support me in creating more videos i really appreciate you guys if you do that so before i go let me quickly run a summary of what we did once again the first thing we did was to generate what service file and inside this file we import the necessary modules needed to run this application we imported the client and the adders in the service we got the api key from coin ranking and then set up a bunch of headers created the crypto function injected the http client set up the bridge url for the and as well as proxy url then we return the data as you can see here also in the app module let's not forget that's where we imported our http client module as well as our old service in the import and the providers module successfully and then we head over to the component cs file this is where we set up our service we imported service imports charges as well as registrables created these four variables here we also did some bits of dependency injections and then registered the charts so inside then on in its life cycle oh this is where we consume this service which is crypto data which can be gotten from the old service then it returns the data we pass it to the we go the price and then the name assigned the data to the price and the name variables we created above here then last thing we did was to make reference to the charges library by passing in the type of chat we want to do and then personally the data and then as well as some default options in the data sets array so that's all we did here um i think it's pretty much clear so so thank you very much for watching this particular video and i would see you in the next one take care

Channel: The Code Angle

Views: 3,685

Keywords: chart js, chart.js tutorial, angular tutorial, angular, angular 12, line chart, web development, rest api, Cryptocurrency Data, Integrate Chart.js with Angular, Coinranking, Coinranking API, chart.js and angular, chart.js angular 12, angular charts, angular line chart, javascript tutorial, angular chart, learn chart.js, html, angular chart js tutorial, angular 8 charts, angular 9 charts, angular 2, angular 6, rest api tutorial, charts 2021, charts, js chart library

Id: WCI4yvrzFwc

Length: 34min 52sec (2092 seconds)

Published: Mon Aug 23 2021