Charts in angular with JSON Server REST API | angular charts using chart.js | angular 14 full course

today I am going to explain charts in angular application using chart.js JavaScript library so this is the Free Library it will provide the wonderful visualization of chart and also it will provide different types of chart so we can see the types one by one the first one is bar chart pie chart download radar polar area bubble and Scatter chart so I'm going to implement all the charts one by one so it is going to be very interesting and for the data purpose I am going to consume the exact AP data only okay so here I listed out all the steps we can go one by one the first thing is be how to install this chart.js in our application so the command is npm install chart.js the installation gets completed now let me create one component okay great our commonly disk Creator now let me include this component into our routing side next let me create one link let me run this application and if you noted in this changes so in this package.json file you have to see this chart.js file is installed the version is 3.9.1 okay look like our application also running now okay initially we don't have any changes now let me go to our MyChart component so the first thing is we have to import our chart the file is available in this node models so let me include it slash .js here we have to import the chart and also registrables okay now the next thing is we have to register it okay this is fine now let me go to the HTML site so here we have something let me remove it here I am going to include one h2 tag for the title and then we have to use one canvas element here we have to provide this ID so the first one is pie chart and the title also I'm going to change this into your pile chart okay so this is fine now let me move on this TS side once again here I am going to create one function first render chart now let me move on the official site of this chart.js so in the Google you have to search like this chart.js for angular so the first one we have done the installation related things already now let me copy this data this constant enter at the end here we have the sample data so instead of the CTX here we have to provide our ID so our canvas ID is pie chart now let me save this one okay see the output now okay great our chart is working with some default data now let me explain this code so the first thing is label okay so this label is nothing but how many items so this red blue yellow so whatever it is you are seeing it should be included in this label and the second thing is data okay so that's what we are seeing in this y direction right okay the next one is the background color okay here we have provided the separate color so that's what we are getting like this in case if I am providing only one color the same color is applied for everything and you have to see this border and this border also we have provided the separate color that's what it's coming like this and in case if I am providing one color it should be same okay and other things are just options so we are started from begin zero that's fine now let me explain instead of having this hardcore data how to get and apply our real-time data from our APA okay so now I don't have any APA so let me use this Json server.jpa so the Json server already installed in my mission so let me execute the watch command okay great our Json server is ready let me go to the db.json file here let me remove this Command Center profile so instead of this post I am going to make this as the sales and here this ID is not required instead of that I am going to use this year 2015 and the amount of sales I'm going to provide 5000 and we can use this color code that is interesting green the similar way I am going to add five more datas so we can adjust the values also okay great our AP is ready let me take this URL so in our application already we have on services so this master.services here I am going to create one more function get chart info so this is the get method only so let me follow the existing procedure okay we have done from our service side let me move on this component so in the Constructor let me inject our services first now let me declare some variables and then label data so this is your just array the similar way I am going to declare two more variables the real data and the final one is color now let me go to this NG on inside here I'm going to use our same services and our service method name is get chart info let me subscribe it and let me assign this value into our chart data so now our data is available in this chart data so let me check this null condition then let me create the for Loop let me include this console so this chart chart data I okay let me save it okay great uh here we are getting these five objects so let me push this values into our arrays so the first one is label so this dot label data dot push so here this dot chart data and label is nothing but this year okay so objects are here amount and color code so the similar way I am going to push the next two values amount and the fine loan is color code so let me save it now what I'm going to do let me make some changes in this function here I am going to have some parameters label data main data and the third one is color data so these are the three parameters now let me pass you everything here so the start label data then the start real data and the final one is color and let me move this function into our subscription site if it is not equal to null okay now in this function instead of having this hardcode values let me use this Dynamic data so the Border will not changed and other things we are just modified now let me save it so you know our chart is loaded with our Dynamic data now if I am including one more data also it will work fine let me go there so the year should be 2020. 7 it may refresh the screen see now one more record is coming work it's fine so this is all about our power chart actually the title I have provided like your pie chart let me change it for this pie chart let me add one more content here let me change this one into a bar chart okay now what I'm going to do let me include one more parameter the chart type and then we have one more parameter that is the ID okay so first I am going to provide the type is bar and the ID is bar chart now let me copy the same thing once again so instead of this bar I'm going to provide a pie chart and this ID also just a pie chart okay so instead of this hardcode value let me change into our Dynamic value and here this type also now let me save it so in this first section how to see this bar chart and the second one is the pie chart so the similar way we have to implement our other charts also the next one is download chart let me copy this content so it is just like a reusable thing okay this type is very important so instead of this pie chart let me make I want to chat now let me copy this one so the first one is ID and this short type so let me save it you can see the output so this download chart is added okay and the next one is radar before going to this radar let me complete this polar area okay this is the polar and in this HTML set also I am going to do the same thing okay see this polar shuttles it's working fine but the final two are the bubble chart and Scatter chart are something different and so let me complete this rate of chart also so this one this is a rider shot so you can see for the all the years how it's changed 2019 and this 2018 so the value is completely changed right okay we have completed these five charts the final two are something different public chart and Scatter they're different in the sense the format of providing the data is somewhat different so previous things all are we are just using this reusable format okay but this one somewhat different let me show you so in this official site you can see this chart types so if you go to this bubble chart so you can see this output and you have to pass the data in this format then only it will be work right so we can implement this one bubble chart and the canvas side it's like this here I am going to create the separate function now render bubble chart oh actually I'm missing so let me take this all the content here let me take this data first data and the second thing is type type is nothing but this bubble and then ID foreign so let me call this one also so here we are not going to wait for any AP call so I'm just using this hardcore data only so let me call directly see now if I'm adding first then we will know the difference okay so it's moving okay so this is fine and the final one is cattle chart so the scatter also somewhat same only so here also we have to pass this data something like this anyway we have to create the separate function for that also render scatter chart first we can copy this data section so the data is fine now let me move on this configuration side the type is scatter and in this option we have something so anyway let me use these things and the final one is ID AC chart now let me move on the HTML side see the output now so this character chart is not loaded let me check yeah I believe the function I'm not called in this onload here it's done only okay the ID I'm not copied properly see now it's working fine let me refresh it okay see now everything is working fine uh okay now we have completed this public chart scatter bar chart pie chart and then download polar chart and also this title chart so basically these charts are useful when you are implementing this dashboard kind of screens so now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 28,210

Keywords: charts in angular, how to implement charts in angular, different types of charts in angular, documentation for charts in angular, doughnut chart in angular, how to use api data into chats, dashboard implementation in angular, bar chart in angular, customized charts in angular, angular charts full course, pie chart in angular, bubble chart in angular, scatter chart in angular, polar area chart in angular, radar chart in angular

Id: yc-HnoMsgdI

Length: 22min 8sec (1328 seconds)

Published: Tue Oct 04 2022