How to Connect a CSV File with Fetch in Chart JS

in this video we're going to focus on how to use fetch in a fetching csv file and then we're going to draw it immediately so it will be instantly impacted and shown on the chart without the tools such as pop-up parse or d3 javascript library so this can be very useful as well so let's try to explore how to do this right now in this video we're going to focus on how to connect a csv file with charges and if you've seen some other videos where i show you how to do it with different tools that we use like the chart or not the charges library but the d3 library we use for that we have another one where we can use pop-up parts as well however we can do it directly which is probably the best way to do it without any dependencies so to do this we need to have a default or just a simple csv file right now i have one here this is a data dot csv quick note here i'm using a local host you should have a local host or web server or you're on your on your hosting itself because we're going to connect with files and for this it is required to have this connection or else it will not work all right what we're going to do is basically want to we want to draw the chart and make the chart look immediately or load immediately the data so let's start with that and what we're going to do here first is get the default code just go to getting started or chargeys3.com getting started and in here we have a nice chunk of code that we can use copy this and if you want to understand what this does please check out this video here so then i'm going to paste it in here and once i paste it in here i'm going to cut that out i'm going to put it in here or at least for me that's not necessary for you but that's for me we save that refresh now we have a chart all right so we have this drawn now what we're going to do now is we're going to use the fetch api and using effect api means that we need to load first the data that we're going to fetch which is this and then we should load the chart so the chart can load first all right so how are we going to do this well first of all let's make this a line chart that's eventually nicer here i'll just give it a tension of 0.4 refresh there you already have this later on we're going to fine-tune this because we want to duplicate this and have a total of three different lines here you can see here there's basically three different companies here you can see here this is the year indicating every year and then maybe the stock value or the value of the company and then you can see here chart ks chartflix and small chart all right very simple stuff so let's start to work with this so what we're going to do here is basically we need to create what we call a fetch api here and so for doing this we're going to use a async and what we want to do first is we want to make sure that this will not load until we have the data that we need all right so what we're going to do here is very simple first of all we're going to say here new function and this function is called the draw chart and basically this is the function that draws the chart and then what we're going to do here is we're going to say here async and then we say function draw the chart all right so what really happens here is simply this if we read this it will understand it needs to load this specific function but it knows it's an async here so meaning that it will expect certain values as well so i'm going to put this basically or enclose this with a function and then all i'm going to do here is just say indentation in itself all right so now we have that and we're not done here of course but if you would save this you probably not much will happen you can see here it still works decent all right so what we're going to do now is going to work with the part where we eventually want to extract the data and this is really important so in here what we're going to do is the form we want to create a fetch and our fetch here will be async for the async function as well and here we could say this fetching would be get data so we want to get the data or extract the data from the csv file but to do this what we're going to say here is first of all we say constant and then we say response so we want a response back and we say equal await waiting for the fetch so we go to fetch and what exactly are we going to fetch here all right so with this we go to fetch basically this specific link here so i'm going to copy this link and what we could do is we can put it in here then it needs to be a string or if you want it you can say url equals a constant this equals that make sure that's between there and then we just copy that and put it in here as a variable so one or the other it doesn't matter all right so now we have this what we want to do now is once we got that we want to say here constant basically we're waiting for the response if the response is positive or it works we say here the following we say constant and then we can say your data points and equal away we're waiting for the response and then r so this is very important because normally if you saw my other videos i'm using dot json here we don't use dot json we do dot text and the reason why we do text because it is not a json file that needs to be parsed into readable javascript now it is a text file or csv file that needs to be converted into basic text so it's readable for javascript very important so this is what we're doing here once we've got that then we can start to look what the response will be all right so we're going to check here what our response will be so what we can say here is uh well we can say console one console.log and then you can say here the data point you want to grab the data point and if you save this go back here and refresh nothing happens here open up here all right nothing happens there as well i realize so we have to just check how we need to activate this one we can do here is the following so what we could do here maybe just for now is just a quick button just to trigger it so it will start to recognize it so we say here a button later on we're going to remove that and then we can say here on click equals and then we grab this specific function for now just to make sure that we trigger this one this is just to validate we will never or after it we won't be using this at all let's say check all right if i save this now refresh we have a button here click on it and then you can see we get all of this data nicely here's the thing we get it now as a very simple text this is not an array there's nothing here it doesn't understand exactly what it is except that it's a basic text so what we want to do now is to break that down what we need to do here is basically break this data point or basically what it is here is a table of data so maybe we could say here table data that's maybe even more appropriate and we refresh it still works alright so we have this table of data and then we have all of these rows in here that we want to pinpoint so that's what we need to do next we're going to pinpoint or at least we're going to cut it or split it into independent rows so we can start to work with it because then we have all the arrays so that's what we're going to do next so what we're going to do here is the following i'm going to say here we're going to grab the item here we say this constant or when we have the content already i'm going to grab this let me say this or we can even fine-tune it into splitting it into rows what would be the right term for this we can say hit table maybe that's the right term table equals because i don't want to adjust this i want to have a separate one just to make sure and then while table data will be we will convert this table data into a table in this table we will say that split and we will split it based on the value here which is a new line all right so quotations and then a new line every new line we will split this and once we did this did this we could say here console.log let me say here grab the table save that i'm going to hide this and we don't need that one for now refresh and press on that now we get erase all right every single line here is considered a separate array including this one here you can say here okay how is this build up well this was the first line then a new line here etc etc so now we're getting closer to what we want but we're not done yet because what happened now is we have here these lines that we should convert this again into an array because these here are multiple values in this single line here so it's like a table of cell so we have our table row and now we should have our table cell so that's what we're going to do next here so we have this here we have this table data um what we can do with the following then what we want to do here we want to split this individually here so we're going to use here a four each because we're going to loop through all these items so say for every item or for every table row or basically here we're going to splice them or so spice is not the correct term but split them again but specifically on based on the comma value here so that's what we're going to do right now so we say here um we can say the following table i'm going to grab the table which is this item here which already split everything and then we say here table dot there's a four each and then for each we'll say the following for every row that we have we want to do the following so we say here constant and this will be a column for every row we want to do dot split and we split it based on the comma here make sure that this is a string value so basically we say you want to go in every row and split in the row the individual values here all right so once we have this here then we can say your console.up we can grab the other column save that and then we refresh click on that and now you can see here they have been split individually for every single value the first one is the year and then you have the values here all right so they're still in a string we can convert them into a integer it doesn't matter in this case charges can read them but if you want to we can always say parse it eventually when we're going to create the array because basically what we need to do here is we need to get down every single one of those to change this here down and then we also want to grab all the values here to draw the line so that's what we need to do now and these are just arrays so what we need to do now is we have to we have now this plain text that we converted into an array or we split them into an array but now we need to create our own array with the exact matches of the values that are matching in these columns here all right so what that's what we're going to do next here so we have all of this here and what we can do is the following so let's say we want to grab the year first to create the year and we already looping through these as you can see because we are in for each already so this is quite nice so in here we can say constant year and with this constant here we can say the following what exactly we want to graph or which array value in this case well it is column zero basically so we're going to grab this one here and we say here we have the column zero um here we say this here year and this will be eventually the year we say column zero all right so if you do this again console dot column zero and make sure that we have your column first semicolon here's no semicolon if i saved it's now a refresh we should see now every year extracted here as you can see this is working nicely what i want now is of course i want to push this specific value but to do this we need to create a proper array so i'm going to go up here and just create the array with a constant and then we can say here this will be the year um what would it could be the year or the labels because this will be part of the x values here so we say labels equals blank so there's no values in there but then what we're going to say here is labels dot push equal and then hopefully not equal so we say push and in parentheses and then we're going to grab the year value so once we did this this can be also semicolon here you can say here console.log and let's grab the labels here now if i do this we should see here i'm going to hide all of these consoles for now and as well this one here so we have a lot of these consoles and notice save that refresh if i click now here we get a whole collection here all right so now you can see we have some issues here and this is the issue but we see here the string issue and this doesn't matter much we see that we have these here so what we can do and i guess this one has really no value because let's look at this okay go here back the first one is only one value and it's just like the title of the file itself it means nothing what we could do here is to slice this away or let's remove it from the array so that's what we can do so let's start to do that first let's remove the first item here so we have this split item here or the split then we can say as well we're going to slice and what we want to slice is the very first value so that's what we're going to do we say dot let me say here slice or slice not spice but slice without the p number one if i save this now we can refresh and if i press this there we are all right so now we have this and you say well wait we have also the year don't worry about that we're going to play around with that because we'll be needing that value if we slice this specific value we will lose later as well all of these values here and these are needed for the title later on so we don't want to remove this from the entire for each loop or basically from the table data we don't want to remove that because if not we cannot use it anymore what we want to do later on is modify the array just to a certain point to remove that specific value and that is easier than deleting then slicing this because if you would do this we will not have any more the names in here because then we have this we have all of that but we cannot extract any more these values and these are still necessary and the only way would would be is to create another same one of these to put it in there but that would be too redundant we could do it just a bit more efficient all right so that's the reason why we're not adjusting it we leave that in there for now so what we're going to do now is the following i'm going to create the others so let's create the objects here so if you understand we have the labels here and we need to make three different lines so you can probably guess that we're going to make here three extra arrays and all of these arrays can be one of the items so we can say here maybe uh stock data number one stock data number two and then we have stock data number three all right so they have no values yet but we can just copy this and we can do the same methodology here i'm going to remove all these access here just to keep it clean and then we say the following here they're going to say here this is related to the stock data and we can say here um what we can do here is the following what we want to do is we want to uh have this here maybe we can say stock price so stock price number one which would be the value of the single item of every one of those individually will be this will be column one oh no not this one but that one here column one because it's this value here then the other one exactly the same go to copy that and we say here number three number two same story here number two number three all right so if you're wondering why not number zero well number zero we did for the year here an array counts of number zero that's the reason why so it's zero base for our race all right so we have this here same story here we're going to just push this i'm going to push this in total tweak copies of those and then we say stock price here and we have this one save and then you're going to go here all right so if i click on this you can see here now we get all of those all right we need to push oh of course i have these are two these are redundant don't do that copy that copy this and copy that one save refresh try it again we get all of these data here and of course i realize we don't have the console log but i guess if i would just get one of those just to check it should show the values here all right so we get the values here um [Music] one two three do we get all of these yes that's it there we are so we have all these values here and i can see uh it repeats it multiple times but that's all right i'll check later on what's going on there but it's supposed to be only once is it it shows multiple all right we'll check later on with that just to be sure stop price column one two three here we are just to make sure what we have all right so we have this here now i'm gonna just test it because i'm surprised that this is here multiple times it's like repeating probably oh of course i understand why it's repeating sorry about this the reason why it's repeating is of course we're in the 4-h loop that's why it repeats if you're going to do it in here and then we do the console log we'll see eventually it will work nicely so we have this one we have the push that one is fine then we have here the console blog for the software labels refresh click on this there we are we have this now only once all right so we had a lot of confusion but don't worry about it we're not done with that all right next part so what we're going to do now is basically this here needs to move up here so basically we have this here it's and it's an asynchronized function it knows there's a synchronized function or it expects something else but of course we right now didn't indicate anything else what i want to do here is we want to check this one or grab this one here to grab this we need to have here a return value this is important so we say here the following i'm going to say here return and this return will be the following items basically the labels comma the stock data one two three and four or sorry i want to win one two and three and then we have as well to do a comma uh what we could do is what we need later on and so we just prepared it and explained in advance we lay down to grab this specific value as well and that should be prepared as well so what i say here instead of stock data we can just say here one is stock name what i'm gonna do here is constant stop name one equals for now it's going to give a basic character letter and later on we're going to extract that correct value out of it so you say this stock name comma number two and comma number three here semicolon if i save this now nothing will happen eventually all right so it all works fine but what we need here is to trigger it now so what we're going to do here is eventually the following we're going here and this is how we're going to now also activate this specific function we're going to say the following we say constant and maybe here we can say you're constant data points and the data point is basically this here as well uh all of the data that we have here where was that the data point i thought we had them here somewhere we don't have it but basically we're going to give this function as well a term because the data point basically consists of all the data points here because it will look to all of this and then thus and extract certain values here so we say data points equals let me say await get data and what we really did here is the following the async sync function can only work if there's an await or at least an array can only work if there's an async function so what it really does is this load this but then it loads this part as well says okay i need to first wait to get the values from this specific function before i can continue on drawing the chart this is very important if i save this now i refresh here all right it still works normal but now what we're going to do here is the following we're going to get the first one which is eventually the labels here so we're going to say here in the labels uh now i don't want that answer labels comma but then we say here not labels only comma but we get it from the data points so basically in the data points function or in the data points constant which is a function that runs for everything then get the dot labels all right if i save this now and refresh we can see here now we get a lot of items including certain things that probably is not what we want so i have to check here what's going on we're going to values here however you do see it start to connect but let me double check here what is going on we have the stock data here all right that should be apparently the years or the year if i save that now now we get all the years here all right that looks nice so we got this one first so now it works correctly next thing what we need to do here is the data here and now the data here you probably probably understand it's the same methodology the only thing that you want to do now is get not the stock name but we want to get the stock data to one let's grab that one and we go in here we say this stock data i want there we are we get all of these values here all right so we're getting closer we see still here this issue don't worry about it we're going to work on that one if we have this here all of these values should be correct if i compare this with our item here 30 31 and then let's say the last one would be 140 so 30 is the first one and the last one will be 140. let's confirm this 140 and 30. all right so we've got this here what i'm going to do is i'm just going to duplicate this for now two more times to create the other lines comma paste comma paste all right and just give it some different colors here it makes sense so i'm just going to get a single color here clean it up all right we have that next one will be this this can be uh 0.2 that's fine here another one we can just grab this one here that will get the if i'm not mistaken it's the first one that would be the red value so we have here as well all right and then finally here i just get the second value it should be a blue one all right that cleans it up here as well the second value and there we are so if i save this now refresh all right you can see there's multiple lines but they're on top of each other because we have the same value let's change that now i'm going to change this if i save this now refresh we can see we get now three different lines and we have all of these different data here which is all correct nice so what i want to do next is basically clean up this here so remember this here consists of the value or basically not the value but the chart or the stock name or the company name as you can say so that needs to be removed here and for that we can basically use shift if you're not mistaken well we will remove the first value of the array and we can also put it and then afterwards you can put the value in here and this is the reason why i don't want to delete it directly this is a slice here or what we could do here and we can slice it as well doesn't matter but i guess the most logical thing here would be um let's see here this one here i'm going to grab this all three of those or maybe it's only this and the only thing what i want to do here is dot shift not sure sorry shift and what does shift do it removes the very first value from the array which is in this case the one we need to remove if you need to move a very specific one slice would be more useful because then you can target a specific item in the array all right so we got this now i'm going to paste this in here paste that in there number two number three all right let's try again there we are so now you can see remove the space here so the next thing and what we have to do here is this year value needs to be removed because we have here a conflict because the numbers are not properly aligned so we can say as well here for the label or labels dot shift so this is why it's very useful to understand arrays in javascript so you can use them as well in your chart next now we have this what i want to do now is i want to change item here for this specific value here so to do this we have these values here but of course if i well i can put it in here we have this weekly sales that say this dot data points data points dot a stock name that's correct here do the same comma stock name number two make sure you remove the quotation and here the same thing stock name number three comma save that refresh all right so we've got this you can see here the names are changing but of course we have them still hard coded in here so what we need to do here now so i just told you about slice what we can do with slices we can say which value we want to remove and which one we want to keep in our case here we slice we have this value here that says remove the reverse value and what we want to do now is we want to remove only we don't want to remove the first value we want to keep the first value and then remove everything else so basically we're going to use slice we have this here but we need to get this specific value first and here we can just copy all of those to which 2v3 and here all we want to do is here is a slice we say keep the first value remove everything else so i want to only keep the first value and i only want to keep one value so this here indicates where in the index you want to keep which one in the index and then you say remove okay and remove all else afterwards all right so that's what we're doing here that's the one we want to keep if i save this now then refresh there you are oh do i have everything correctly i see i have an issue here and the issue is clearly makes sense all right so why does this happen and this is the problem here of course we're adjusting this immediately so i want to cut this out i'm going to move this above because what is happening here and this is very important because when you modify the array you can see here you have like what we call a calculated uh effect it calculates based on what is previously remembering and remember that we remove one and that's why the slice here gets the very first value is number 30. so if i do this now and i refresh now we didn't do any adjustments yet on the official array and the only thing we want to do is we want to slice a certain value out of it and give that a new value that's why you have a stock name here so this will not be in conflict now it works nicely here it grabs the charts beautiful so this here of course we can remove this this is no value anymore and now we have this all nicely connected we refresh this and so with this here this is a way how you can use the uh csv file to connect that and what would happen here imagine this if you would have a new value in here so let's say this and then we say 150 we say 260 and 30. save that refresh now we grab all of these do we have any adjustments here i don't see any adjustments here so let's double check here am i correct okay save that let's do it again all right okay i figure out what it is let's do a hard reload just to see if we will run the member and there you are so it grabs so this is important here maybe sometimes when you add up data it doesn't load immediately so what you need to do is you have to do a right click here and then a hard reload if that doesn't work that sometimes happens as well there's another option this is especially for you for testing you can do it in here it's in the settings so we have to click on the setting and then you have to scroll down a bit let me open up this a little bit more scroll down here and we have to look for here a very specific item which would be network course no disable cache this is the one so disable cache while in depth tools i don't recommend you to use as much because you can see here if i do this now and i refresh what happens is it loads slower because it needs to reload everything consistently by default characters is now loading a bit slower than normally and the reason why it is very simple because it needs to wait for the response here but you can see the difference here in loading compared to with the cache disabled so that's the one that's one of the options you have especially if it just doesn't want to uh if the heart feel reload doesn't work then that would be disabled cache would be the only way to do it to force it all right so that is basically what we did here and this is how you can use the csv file to connect with your charges so if you like this video there's some other videos that i highly recommend to check as well which is basically a charges array series focus specifically on every array that you can use and need and this is really useful because right now what you've seen there we have to modify the data cleaning data is a very important part with data management and with charts basically because if the data is not clean or you have dirty data that's what they call it it will not properly render a chart so this this series here covers 19 videos and it's very useful about all kind of things you can do with a race

Channel: Excellence in Excel

Views: 519

Keywords: how to connect a csv file with fetch in chart js, csv file with fetch API in chart js, fetch API in chart js, csv file in 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: Y1JhMa22CoM

Length: 33min 56sec (2036 seconds)

Published: Mon Sep 27 2021