How to use Fetch API to Automatically Update Data with JSON in Chart JS

in this video i'm going to show you how we can use json and automatically update our our chart here with the latest data and you can see here it's sliding in very nicely and it shows you 12 data points and the moment it hits more than 12 you can see here it slides the other one out so let's start to explore how we can do this nice effect here in this video we're going to focus on one of the viewers question which is how to use fetch to automatically update data with json charge.js so basically the date the data is coming from json and we're going to update it one by one so how are we going to do that well the first thing i want to just show you where the question arise from it came from one of my other videos about how to create a donut chart with labels outside with connecting line which is absolutely phenomenal this is one of my favorites so if you scroll down here you can see here this question came from uh fin finisius mendoza and a special thank you to felicia for asking the question and this is what felicia's ass great video friend i would like you to explain a video how to make chart that automatically updates the data in json all right so let's start to work on that and this will be just a quick note this will be a hard coded data that we have stored in our local host so we need to have localhost and this is our json file are we making another one specifically for an api eventually that will be coming very soon online but this one here covers this how we grab the data from my json and we're going to put it and show that nicely here so what do we need to do well the first thing what we need to do is we need to go here to charges3.com getting started to get the default code so you might notice this for some reason my google chrome gives this error anyway i'm going to copy this code here and once i copy this code i go back here and then i'm going to paste it in here once i paste that in here i'm going to cut this out paste that in there all right so we have the title here matching and then i will save that a refresh and now we have a beautiful bar chart so what i need to do now is start working with the fetch because it's a fetch we need to be on a local host or server so this doesn't work if you are going to be on your basic html file on your desktop so what we're going to do here well we have this and what i want to do and this is very important if you are looking for this file i will put this file basically in the comment section you can get the entire file just copy paste it and save it as a json file but you will see here this specific company if you really look carefully there are three companies in here chartflix and chart startup and another one is called chart.js or charges corporation but this one here charges corporation has 24 data points you can see here year-round it is the second year and then every other one has only 12 data points so that would mean that we're going to focus only on this specific one here that has the most data points because it's useful so how are we going to do this here so if i scroll down here what i'm going to do now here is going to work with sleep fetch options so we're going to use your fetch api so we're going to do here first thing is here going to create here a a synchronize function and this is called our fetch data where we basically want to fetch the data and fetch if you're wondering what does fetch me fetch means to get the data if you say to a dog you imagine you have a bone in your hand you throw the bone and you say to the dog fetch it what it really means is that the dog will run after the bone that you have thrown and come back with the bone and bring it to you almost like a boomerang so that's how you can imagine fetch so basically fetch says i'm throwing something out please give me what i'm throwing out so what are we drawing out now well it will depend on what we're looking for so we're going to work here we say here fetch data and then in here we're going to first get the value where it's located so i'm going to say a constant and then let's grab the url and in this case our url will be the name of the file and you can see here this is the name of the file and because my my file here is in the same folder as the json file all i can do is just grab this if it's not in the same folder you need to get the original folder and from there you just get it or you can localhost or whatever the starting point is the root all right so i'm going to copy this i'm going to say here this will be the url or where the json file is located next what i want to do is here constant will be the response and the response is basically equal to await so we're waiting for response from the fetch that will fetch us the url item here this concept basically this here so once we have this what we can do here is do another constant and this console called we can call data points so we want to fetch not only the file but the data within that file so you can call this data points of course you can even rnas but i'm giving it as most logical as possible name now we say here await your wait for the response.json and what this really means is the response is related to this but then we basically parse it into json to make it readable for javascript because it's a json file we need to make sure that json file becomes readable in javascript so this is very important so that's why it's parsing here and parsing needs to make something readable for and in this case for js or javascript so now we have this here let's start to work with the console.log and just show you what we have because this is important this is a visual representation save this go back here refresh open up our developer tab and let's see if we have anything oh of course we have nothing here reason why we have nothing yet because we didn't have anything to activate the functionality so what i'm going to do here just a quick one here is to make a button uh button i guess here we are let me see here one click and the on click will be flex data and i'll just say fetch save that refresh click there we are so the moment we press down the button it will trigger this phenomenal function that gives us the data so now we're basically done with the most important one all i have to do here on to say to make sure that we save these this function or at least the data of this function to say return data points this is very important or else later on if you have the other functions you cannot use this basically what you're going to do here with this this will be stored in memory and then from there we can move it one side to the other so semicolon here and then we can start working on that so to do that i will make another function here and this function will be called the let's say update chart function that is basically a nested function because with this we can start moving things around why because this is a function in itself that is an asynchronous asynchronous means that it's not aligned or not in chronological order being loaded meaning for example if you have two functions here one will load the other one will load afterwards or at least this will load well the other one will not know afterwards we will wait for each other so basically they're they're loading differently from each other so uh synchronized means they they low load one after the other asynchronized means they they follow their own path all right so we have this here so what i want to do and i realize i need to move this down and the reason why is later on i need to use this specific constant and i want to make sure that we can load that by grabbing it so now we have this here what i want to do is the following so we have this i want to start working on it so that we can maybe draw at least the values in here so we can see if this works so what we're going to do here and this is why i was referring to that we have these functions here this is the nested function i'm just going to put in here some extra enter so we have some space here and then here what i'm going to do is another item which will be built on for whatever we have here basically these data points here so what i'm going to say is the following i'm going to say your fetch data as you can see here that's this will function here you get this function if say dot then meaning we have this data here that we get from fetch and after we want to do something more so we want to keep the return values here so we want to grab that in memory and start working with that so we're going to say here data points let me bring here a function arrow expression because you're going to create a function here and we're going to say the following we're going to say this will be constant month and this month will be equal to what well let me explain what we're going to do here i want to get only the company name of charge.js organization that's this one the origin charges company or corp i do not want the other two but the last two and the reason why is because this one has a financial system 24 data points and if you look at the others you can see here they have financials of seven only i was expecting 12 but seven that is far too less so that's too few to work with so i want to grab this one here with all of this data here so this is very important for me so i have to indicate now where exactly or what exactly i want to fetch and i want to fetch this only not the others i don't care about the others so what we're going to do here is just say in the data points and if you wonder what is exactly the data points well we did the console log already from the data points that's basically all the data but we need to go down deeper we go into the financial report which is zero index zero because there's there are basically three indexes here or three elements with these same structure and then in here i need to go into the financials and then specifically here you can see here there is multiple items we have a date we have expenses and the date is basically the month here we have the profits targets and revenue so what i want to do here for our case we want to grab the date which is the month label which will be eventually shown down here and i want to get the revenue which would be the bar value here so to do this we need to pinpoint that so we say here data points and then we say dot where we need to go well you can see your financial reports or let's even grab this financial report zero index zero and then i say here again dot where we need to go again we're going to the financials and the financial is also zero so copy that put it in here and basically i realize that we don't have to really get the financials and specify zero but we're going to put it here dot map that's fine so the map functionality will look to every one of these items but now we can go be very very specific all right so we're going to say here what i want to do here is what i want to grab or what i want to fetch that's the right term batch the date which will be eventually called the month and i want the revenue which is the value so i'm going to say here first of all i'm going to say indicate month comma index those two are important but the month basically means just all of this here nothing special yet he didn't specify anything yet here because it's a function as well so it's called that arrow or that error or a function arrow expression it's probably more nicer term to use so we're going to say here what i want to return is the following so what i want or what i want to fetch what is the item i want to fetch very specifically i would like to fetch in the financials i want to fetch here the date so i say here month which basically indicates here just these items here in financials and then i'll say here they so i'm going to grab this here dot date and then once i have this semicolon so once i have this here what i could do here now just to make sure you understand that and see what it does in here we have the fetch data so i have to make sure we have this one here all i want to do now is to grab this month here if i do a console.log we should see here something refresh click on this to activate all right um the fetch data is not defined all right let me explain what's going on here so why is it not because we have created or we nested the function in another function so we need to make sure that this update chart will be placed in here so if i save this we should now have this there you are so now we get this we get two values so i want to now clean up the values of what we have so let's see here we have this console log of the data point 105 can be deleted because i only want this console of the month save this refresh press this and there we are so we get all the data points here which is only related to our specific chart company or chart js.org or company or organization or a corporation it's one or the other so we have the first one so what i can do now is just simply this if i go to remove these labels here or at least this label here this one i can go to common out and i'll just comment out this as well so what i want to do now is i want to just grab this and just say update chart i'm going to say here my chart and this is the reason why i push the function down because now i can use my chart say here dot update all right so once we did that we're not done yet because what are we going to update well specifically this point here the labels so how to get there well from my chart to config and from conflict to data and from data we go to labels so that's what we're going to grab here i'm going to say mychart.config.theta dot labels equals what is it the month here if i save this now refresh all right there's nothing but if i click on fetch all right uh month is not defined fair enough let's see what's going on why is this not defined or what's going on here uh of course it is within that part so what i need to do is i need to move everything up so i go to cut this out move it up because you can see here the value is in this block here the fetch data block so we have to put it in here we're going to make sure that this has a proper indentation save that refresh click there you are so we get everything instantly we don't want it we want them one by one being shown so we have to still work on that but don't worry the most important part is we already have the data working for fetch so what i want to do first is get the other data which is the values then we can start working with the more advanced item so i'm going to copy this or well i don't want to copy that i would just do it step by step it's easier to follow so then i'm going to say here constant value or let's say the data well i guess value is better because we have another term for constant data so that would be too confusing so we're going to do here constant value equals basically very similar we're going to back to data points that is this one here remember so we're going to start here that's why we have this here this one will fetch only a specific item during the month this one will be specifically for the date or so not for the date for the values so well if i could do maybe a console log here for the item let's look also log here now we have this console data points i want to just show you again so you can follow along save that refresh press this all right there we are we have this here if you can ignore that for now and then what i want to do here is basically you are in charge as corporation and this charges cooperate with financials but now i don't want the date no i want the revenue remember that so that's what we're going to do here so um we can just delete this again so now we know where we have to go so we say value data points and then it is again in the financial report noticing it dot financials you can see finance exactly the same methodology financials dot map so we do another map array we're going to look for every specific item you also have this arrow function and the curly braces so what i'm going to say here instead of month i just say your value and say index so i'm not sure if you're going to use the index might be necessary i realize it might be necessary to go to c so the next thing what i want to do here is the following we have this here what i want to return here is now the value dot then i'll get here the revenue there you are semicolon all right so once we have this we save this and we can do even here a value save that refresh and if i click on this this is here that shows everything but you can also see here all our data which is correct but in total of 24 items so this works nicely and if i now move this in here i guess we just copy that we're going to grab this value here but this one must be adjusted so how do we get here now the data instead of data labels no we need to go to data and then our data sets and then data so i'm going to say here data and data sets and this data sets here will be we can put in a zero that's fine and dot data so if i save this now refresh press this there you are now everything is starting to work nicely i want to put them in now one by one all right so what are we going to do next we have everything working at least all the data that we need to fetch is showing up nicely so what we're going to do here is the following um we're going to play around with a few items so the first thing what i want to do here remember this is still within this update function or update chart function so what i want to do here uh this here we can all concise that this condensate more but i will say here a set interface so what i want to do and the reason i'm doing this is i want to push or activate this function every single time or every 1 000 milliseconds meaning every second it should be activated so i'm going to save this now the refresh you will see here now what is happening there you are it comes and probably if you push it again it should do something again all right it does something but i'm not sure if it's really showing so what we could do here maybe as a console on let's say console log show say i should expect you know every second it will be shown there you are every second it shows this console log here it doesn't show anything anymore because there's no more there's only 20 data points or 24 data points it doesn't push them so they will not add up so we need to work on this now so all right so just for to reduce the amount of uh memory of our browser i'm just going to delay that with 100 seconds and refresh here there you are nothing happens now that's fine we're going to work on it so what we're going to do now is the following we want to first of all push the value so how are we going to push the value now to push the value we need to go here we have this one here we grab the entire value but this is not what we really want what i really want to do is follow i want to say here basically i want to push my chart data all right so we just can put it in there let's say here labels dot push and what i'm going to push now is the following i want to push the month value in here but the month value this should be a index number so i'm going to say here let's say 0 for now and if i do this i comment out this here and i will do exactly the same we should see here now a very nice updated month value of the first month and here push this should be the data set with the data so i'm going to grab this uh not like that but i will need to remove the labels because we're going to my config data set from data to data sets data push push what value save that refresh and now um all right we're missing here something of course so let's do this every second now there should be now a post value there you are there you are and there you are so this is starting to show nicely but now we have to figure out how can we look through these numbers here so what i'm going to do here slow this down save that refresh all right so it doesn't make it too heavy for us we can delete all of this and now what i want is instead of the show here we don't need this anymore we have all of this here you can start working on it so how do we solve this one here well for this i'm going to use a trip and this is the only way how i can do it so i need to have what we call a global value or i just put a value as hoisting we're going to put it at the very high and after we we could update that so we're going to say here is the following we'll just say here let and then we say here hoisted value equals zero and what i really need to do here is basically like a for loop i plus plus that's what we're going to do here eventually i'll give it a different name to avoid that if ever we have somewhere else that will be impacted and this here is the only way as now i can find figure out i was hoping to find it within here but it's not possible or at least so far anyway that doesn't matter so much what i want to do here in the update basically i want to say here the following hoisted value plus plus so basically we will be adding the value consistently so if i grab this now and what i want to do here i'm going to put this here index save that refresh we should see something here and of course it doesn't show because we need to put 1 000 seconds save that refresh all right so now it's being added here step by step with all of the data that we have from our json file so that's beautiful so it starts to look very nice there you are and then eventually here you can see here this was correct and here this is number one two three four five so that's why these are very tiny bars so but here's the issue you can see here the moment it hits december 2022 no more data that's one but also it keeps on going into infinity well at least this one here that's all right lazy this is fine but what i really want to solve here this is the real issue is this infinity adding up because this doesn't make any sense because after a while as you can see here the sound gets very condensed it's too hard to read and if everyone would have an item that's like a api where you keep on getting new data you have a big problem if you have one with a million data points so let's solve that item here so to do this i'm going to show you just a very very simple trick this is just javascript arrays so what we're going to do now is the following i'm going to create an if statement this if statement is very straightforward it will just say here my chart so what we want to do is we want to measure what is the length of the labels and if the labels hits for example 12 data points at that very moment i want to make sure that the very first data point will be removed so that the next one will just easily slice in and nothing happens no problem so we're going to say if and i say my chart of data the labels is a dot length and if the length would be uh larger than let's say 13 or equal larger to 12 well i guess 12 30 is fine if it's larger than 13 or maybe 12 yes because one only two updates in that case if that is true what i want to do here is i want to start removing certain data points so i'm going to say here and this is just javascript array lessons labels dot shift and shift means removing the very first value in the array so i'm going to do the same here and i'm doing it here up i'm going to show you later on what you have here this data point as well then specifically this here i'm going to copy this put it in there save that refresh all right you can see it goes into infinity that's all right and what i will do is just to for the sake of it let's reduce this or increase the speed of it so here it should be added here every two per second all right so we get this here it's beautiful starting to work here nice nice nice and then here eventually what will happen it will cut it off here but it will just keep on going and this is beautiful all right so this works so what i want to do to give you an extra highlight is do not put this down here and i sometimes do this as well but you will see you get a very ugly design so if i do this say refresh you will see here after we hit the 12 it will give you a weird design you can see here it looks like it's not working and the reason why it doesn't work it's just simply this it is working however because you have this here it it's getting confused before first add and then it deletes and then sometimes what we have to do here is to refresh or to reload it will destroy not only everything it will destroy also the effect you have this here and you can see here and usually if i do this and then do this again and open up doesn't show no it doesn't even want to show you see it's too heavy all right so that doesn't work at all don't do that put it up here this gives you the smooth transition and personal fine go back here there you are you can see here now it will work nicely once we hit the december period there you are you might be you can see it you immediately it just shows it nicely so this is basically how to do it and if you like this video maybe you want to go even deeper infection how to learn more i would highly recommend you to watch maybe this specific video here on how to use fetch use advanced json hr js

Channel: Chart JS

Views: 8,809

Keywords: how to use fetch api to automatically update data with json in Chart js, fetch api to automatically update data with json in Chart js, fetch api with json in Chart js, fetch api in chart js, chartjs, chart.js, chart js, chart js tutorial, chartjs 3, chart js 3, chart.js 3, chartjs 3.6.2, chart js 3.6.2, chart.js 3.6.2

Id: 7KBwz1pcQsw

Length: 27min 47sec (1667 seconds)

Published: Wed Dec 15 2021