Fetch API And Update JSON Data on Click in Chart JS

in this video we're going to explore how we can fetch json data with and eventually display it immediately here on the chart when we click a button so when you press on this you can see here the data is changing immediately the label is changing based on the data we have in the json file which we connect with the fetch api and if you are wondering where is all the data stored well we have them here we have a nice json file here that connects it all together and this creates a nice dynamic chart in charges so let's explore how to do this right now in this video we're going to focus on how to fetch or how to use the fetch api and update json data on click in charge us and this will be a bit more advanced than any other video i've made so far so what we're going to do in here is first of all just a quick note we have our json file here you can see this is all the values in here and here we have different company data and what we want to do eventually with this company data is to display one of them and then eventually with a click to show or hide show the one that will be click on so this is here the file as well this is on my browser browser and as a quick note i'm using here the local host and i highly recommend you to start with a local host or web server or if you are online on your hosting because without that you're not able to use the fetch api and the json data data connection so this is very important so what we're going to do is we're going to get started and we're going to immediately start with the code make sure you go to chartchestree.com and just check out the link here it's also in the description getting started and we're going to copy this chunk of code once you copy this and if you would like to understand what this code does please check out this video here all right so then what we're going to do here is we're going here and then we go back here i'm going to paste this in here once i paste that in here i'm going to cut that out and change the title here to this specific type save that refresh and now we have our bar chart beautiful so the next thing what you want to do now is start working with the fetch api to connect our file our json file with our html file here or our php fetch file basically so to do this we go in here and we're going to work with javascript very important here is you must and i repeat you must put it at the very top of the javascript file and the reason why this is is because we're going to use here what we call a fetch api this asynchronous connection and this is required if you don't do this it will not work so the following we're going to type in here is eventually this broad let's put in here we're going to say this will be the fetch block and this fetch block will be connected when we click on a certain button here imagine here we have a button and then we have here well we can just put in here button let me say here on click and eventually this will be the function name function name whatever the function would be and here we'll say fetch all right so here in the fetch block we're going to start with the function name so in this case i'll just say here function and then we say here uh oh sorry not not even function we need to put in the async and then we say your function and then we can give you a function here let's say your stock data it will be having the stock data of charge and then here what we're going to do here is we're going to put in the variables that we need in this case we need a constant and our constant here is the url and the goal here with this constant is basically how are we going to connect whatever we want to fetch or where are we going to fetch the data and if you want then what is fetch think about a dog when you troll bone and say to the doctor fetch that dog will run after the bone grab the bone and bring it back to you so basically what it is you're throwing something out and then it will come back to you then with the specific item that you want on a specific data in this case of what you want so that's what we're going to do here so in this case what is the data that we want well we want to get the url of where this json file consists or is located so we're going to click on this and just click on this item here and if you don't have this one don't worry i'll put a uh link underneath in the comment section where you can just copy or download this specific file so then copy this and then what we're going to do here is what we have to go in here and we just paste this link in here and you can see here is the local host wherever the file or the folder or well basically the json file is located very important here and there's so much more that we can do but i will not cover that in this specific video but we can do a lot of things once you know how to do this here all right so the next thing what we want to do now is to connect or create a response here so we have the data so basically this would be the bone that we say to the dog to fetch and then the doctor will connect it so what are we going to say here we say response there will be our cons constant the response and this response will say away let me say fetch where exactly what are we going to fetch or where can we find the location basically it's this url here since we have this url as a constant you can copy it and put it in here but you can also copy this specific part as a string put it in here it's up to you but this is just a bit more easier all right so once we have this the next thing what we need to do here eventually is to wait for the response because here we create a response and go and throw the bone and now we're waiting for the bone to come back so what we call and that is what we can call here well we can just say here wait for the request to be completed all right and basically what how we would call this is basically this we'll say you're constantly going to grab a value let's say data points and then because these are all data points or charts doesn't matter it can be anything you want and then we say await the response which is this constant here and let me say here dot give me back to json variables or make the json readable in javascript so this is basically readable javascript once we have this we want to say the following here enter let me say console.log and just grab these data points here very straightforward once we save this and then if we refresh oh but before we refresh i realized i need to give you the proper function name so i'm going to copy the stock data and put it in here so it will be responding if i refresh now we have this here if i open up the developer tab you'll find it here and if i click here on fetch you'll see here now we get all this data here including the three companies that we have chartflix chart.js and we have here uh what was the last one here uh chart start or chart start up something like that oh you can see it here you have chart js which is charge us corp and then we have here chartflix and then another company is chart startup all right i'm just making these up as i go so that's it however these are clearly here so we have this so what we want to do here is basically say the following we want to return this result return data points once we did this the next thing what we want to do here is now starting to use this data point that we have returned we want to fetch it again or we want to use our function here now to grab this and analyze or extract only and i repeat only the values that are related so in this case we have three options here let's look at this we have this chart company details like which is chart.js and the charges has like a certain date we have the revenue we have the expenses profits etc for every specific date if we change it maybe we want to do a company and there is a chart flicks but i want to have the chart fix details so we have here basically different data and we have this here again here we have another one chart startup start up so we have three buttons here and when you click on one button we should show the matching values of the chart all right so that's what we're going to do right now i'm going to create your event three buttons that will be later on what we need to do here now is first to fetch the data or basically uh once we fetch this data point to extract only and i repeat only the thing that we need so that's what we're going to do right now so we stay here here uh well stock data and then here we're going to put in something you say here dot then and then we say here we want to say data points we're going to grab the data points variable which is basically all these values in here and then only filter out whatever we need basically so we say here that arrow then we have these curly braces and in here well what do we want well let's look at this what we want first of all we want to adjust here the values into whatever the date would be that would be the month next what we want to do is we want to grab here this data and change this data matching to whatever the data would be in the financials here and we could make three separate items it doesn't matter well let's make only one for now just focus on how to do this the expense profit and revenue all right one of them we're going to grab in the next one you want to do we want to change this title here or basically the legend value or label into whatever the company name is we can do here the company name so this is what we want to do and then after we want to click these buttons to make sure we get the matching one all right so to do this first of all we have to make sure we grab any of these data so i'm going to make it very straightforward let me say here first of all we get the month so we say month constant month and we say your data points which is basically referring back to this here and that data point and we say dot and then let's look here very carefully what we need if we're going here let's say we want to grab first the items we need to go into the financial reports here and this is the json you can see here very important this is here bracket meaning this is an array so this array here consists of multiple values but also here look at the financials there's another array in here as well so so we have two arrays to deal with and you can see here as well financial report is zero then we have financial report number one which will be chartfix so we have different items in here all right so to grab this what we need to do here is we have to go deeper and deeper so which one we want to do now is the financial reports and the reason why because it is under financial report so that's the first step we're going to put this in here the next step is eventually the following here so we say your financial report all right and then what we need to do here is we need to go into the data here and what is very important we go to financials we have to grab here the array value in this case we want only this first value here which is the chart yes so we say here array number zero so financial report array number zero dot and then we say here what do we need to graph well if you want the month which is the date here it's located in the financials so you have to go financials and then in the financials here you say dot map and with map this is a function which is very powerful as well so in map we will say here the following you're going to create a function which will loop to every value we have in here and this value is basically this one here the date one day two or day zero this array number two three four etc etc all up to seven because we have here or all up to six because we have seven elements here but index zero one two three four five six which is the six is july all right very important because we're counting from zero so we say here the following index so you have an index it can be anything is uh but basically index would specify specifically that we're talking about an array here we're going to loop through every one of these values uh don't do it here sorry make sure you put it in here in a function so your function index and then we have these curly braces and in the curly braces we're going to put this here together and then in here we will say return and then we say here index dot what exactly you want to return we want to return the month in this case it's date so that is the one you want to return so now we have this and what we could do now is basically saying here to grab this value now so we have all of this here so what we're going to do now is do console save console.log and in this console log we can grab here the month to see if this works if i save this now and then go back here refresh and then if i press on the button you will see here we will oh sorry we don't even have to press on a button because automatically it starts to load our values here the reason why it automatically loads because it is still here this function is just asynchronized with loads here and of course we have this basic click here but what i want to do eventually is i want to put in here a function to block an auto loading so we want to only load it the moment we press on a specific button all right so that's what we're going to do right now so we're going to click this copy this let me say here function and say stop data then here this will be in you have an indentation because we're nesting it within this function here the next one you want to do here curly braces all right and there we are so if i save this now my refresh doesn't load anymore but i click on this it should load our data here you can see here nicely if i remove this one here basically this we don't need anymore i'm gonna save this again press on fetch there we are all right so now what i want to do is i want to put it in here so if i would put it in here how will we put this in here well basically if you've seen one of my other videos about how to use the update uh chart chart update api that's what we're going to do here so we're going to say here my chart dot update what we want to do here between is eventually what do we want to update well basically we want to reassign the following we want to change the labels here to get to the labels we're going from my chart to config because this is connected and this config is a variable going here so and here we go to data and from data we go into the labels with an s all right so that's here so i repeat again we're going to say here my chart dot config remember that that's this one here and then we go to data and dot data and then dot what are we going to grab the labels with an s don't get don't get this one and get this one because this one is directly related to our x skills let me say your equal or sorry the x axis basically that's the right term then we say equal very simple equal the value here of month save this and refresh now fetch there you are so this works all right so now we want the nexus we want to grab all the others so i'm going to do that quickly basically it's almost similar here what i'm going to do here is within this constant uh let me check this one here we can duplicate this so i'm going to put here semicolon that's all right and paste this here again the semicolon here but here now what we want to do is not any more labels let's say we want to grab here the profits all right so i'm going to grab your profit and basically it's almost similar because we have everything here you say profit equals and then you index.profits all right once i do this we can copy this again put it here but now we want to say profits plus we have to re-check which one it is because we want to get the data here so basically we went here as labels so you go here in data set and data set is an array so we say here data sets zero and then we will grab here the data dot data equals profits if i save this now refresh refresh here fetch now you can see the data starts to move as well next from what i want to adjust is the weekly sales so we're going with the weekly sales and the weekly sales are slightly different and the reason why it's different is because uh the weekly oh sorry that's not even a weekly sales but the weekly sales is the term here so let's look first in charge yes where it is exactly located it's in the label all right but if we go to the json file where it's located we want to grab here the company or let's say the company name or the stock name it's one of the other you want let's say here the company name so we go here from financial report immediately to company name so that's what we need to do here so how will we do this well basically we have if we have all these data points here it can break it down it breaks down into very specific items so what we need to do here is almost similar to what is here except we don't want this anymore we can remove this we only get this here data points and financial report because you want here only a specific value so let's grab this one now paste this in here and then we say here or what we can say here the label am i correct that's the term let's say the label equals not any one of financials because we will go too deep in the array and we will remove this array value because we don't want only the first one because if we would have another button we should be able to go to this one here the chartflix company name and if we go here down here we'll be going to chart startup company all right so that's why we have to make sure this is flexible and with this the map and index is flexible enough and all we need to do now is just to change the array value here because basically it will just say which index regarding this specific part here in this case we want the company name putting the company name in here uh label all right it will be the company maybe we can just change label to company name it's up to you now here we're going to do the same thing here we're going to update again the chart this time we'll update the label itself so say here in my chart config data data set 0 data will not be data that will be labeled and the label here will be equal to company name so if i save this now and refresh refresh here and press this on you can see now we get this one all right so now will be the next challenge we're going to have three buttons here with the matching ones but then we have to figure out how will we click and get the matching value in here all right so you can see here we have oh and i guess that this needs to be uh right now what is happening is we're just getting all these data in our array and this is the reason why we still need to pinpoint this one but don't worry we will pinpoint this as we continue so what we're going to do is the following i'm going to select here and basically what we need to do here is to pinpoint the exact value we want first of all let's create three buttons and then we're going to look at our argument that we need to adjust all right so we have this here and let's say here this will be chart js or of corp and then we have here this was not netflix chartflix sorry chart makes inc and then next one finally is chart startup alright you can put anything in here it could be anything i'm just using this here based on the existing data that we have all right so what we want to do now is basically grab the value and put a argument value in here basically if you're aware of the array values you can see here we have these arrays these arrays are basically array number one or zero and here we have index number one and this is index number two all right so that's what we're going to do here see here 0 1 and 2. so once we have this we need to make sure that this argument is converted into a parameter here so we can say here value so meaning that when we are going to use this you can see here if i do here console.log it will extract the value that we pressed on all right so we say here now this or sorry grab this value save this if i go here refresh press on one we see here zero that's correct press on another one you see one present number or chart startup we have number two all right so this means that this is now basically recognizing the value or this parameter is recognizing the argument value here all right so we're calling this the argument and this is the parameter all right so now what we need to do is this needs to be transferred into here so how to do this well what we're going to do now is we're going to focus on the most important part here is the value so where do we need to use this well basically in here this is the one we're going to change we say this here if i save this and i cancel this ignore that one and refresh and then if i click on this now you will see we get other data here and this data here i'm not sure what this data is really matching with 240 let's see which one is 240 it's definitely not the first one and chartfix it's also not it is 240 oh sorry in the profits it's profits related so it is chartfix which is correct because we put it in one and one all right so that means that here it works nicely so the next thing what we're going to do now is just to change this instead of that i'm going to put in the value here and i realize while doing this that this one needs to be fixed but i will show you later on if i save this go back here refresh if i press this we get this value here all right and then i click on this you'll be 240 and then if i click on start startup which will be 2.5 dollars or something and you can see here profit is 2.5 which is correct all right and then here it is absolutely zero is that correct i know there was a zero in here that is correct profits equals zero so this works nicely but you look at this title here and they say oh my goodness what's going on here on this legend this is no good that's correct i realize you want to do what i'm doing here is we're creating the array itself and that's not necessary in our case because here we just need to extract the only one value so to do this very quickly we could do it like this i'm just going to put it here e value in here we don't have to do we don't have to look through the array so this is a redundancy or extra work that we don't need and then all we need to do here is the following i'm going to say here dot and we get here the company name why company name because that is if you look here again into our value it's this one chart startup which oh sorry this one the company name all right so now we have this remove the return here and now i can just comment out this if i save this then i will refresh here there you are so now we have this this is our default data if you click on this you can see your chart escort then we have here chartflix inc and we have now this one beautiful and of course we could change this as well if we don't want the item here of profit this could be if we change this here into our items well let's look what we have you can do expenses or revenue let's grab the expenses and we say here this will be expenses and then we change it to expenses additional expenses save that go back here and refresh and now we click on this we can see here this is the expenses it's fixed 30 dollars and if you click on chartflix same i guess these two are exactly the same one all right and this one is different all right so let's change this one again i don't want the expenses i guess because it's very consistent of thirty dollars twenty dollars and here again thirty dollars so let's get the revenue that will make more sense because you will see a big difference on that one all right save that refresh refresh this of course press this there we are press that there we are and press this there we are so we get every time a different data and now we have this very nice interactivity and this is very important because once you understand this you are able to understand more advanced items that's coming out very soon and that will be really interesting as well because from then on we can explore new apis outside our existing area next if you are working maybe with an excel file which is also quite commonly done for charges i would highly recommend you to check out this specific video here about how to update the chart dynamically based on csv files in charges and this is absolutely phenomenal it's another level of connecting and making it dynamic but instead of a json file you're using a csv file so the link is showing up here on the screen you should be able to click on right now

Channel: Chart JS

Views: 6,985

Keywords: fetch api and update json data on click in chart js, fetch dynamically update json data in chartjs, chart.js using json data, fetch json file with chart.js, parsing json data into chart.js, how to update data from fetch into chart.js, javascript charts from json data api and fetch, chartjs, chart.js, chart js tutorial, chartjs 3, chart js 3, chart.js 3, chartjs 3.5.1, chart js 3.5.1, chart.js 3.5.1

Id: qZ17lr6Vn94

Length: 26min 43sec (1603 seconds)

Published: Mon Sep 20 2021