How to update a chart dynamically based on csv files in Chart JS

in this video we're going to focus on one of the viewers question which is how to update a chart dynamically based on csv files in charge yes all right so this is a far more advanced topic and basically we're going to do is we're going to create here a chart and in this chart we're going to have the button as an upload we upload a csv file file and that csv file contains certain data so first of all i want to show you where this question came from so it was here on one of my other videos on how to change the label base on click in a bar chart in chart yes and in this video if i scroll down here you can see here there are not so a special thank you for arnold for asking this question and here is the following what he says sir thank you so much for the video could you please help us connecting a csv file with this code so in this code he's referring to here where you have basically a on click button showing different data so i'm going to do exactly the same thing here so we're going to emulate that one and then what he says is so that we can make the chart with dynamic data downloaded from system so he has probably have a system where you can download the excel files or the csv files and then he wants to put it in here and then get the chart displaying it all right so to do this we're going to do two separate parts we're going to create a chart in chart yes and afterwards we're going to create the file itself or at least not the file itself but we're going to upload the file so let me show you here i'm going to grab a sample file here that was let me double check where am i i have to search for this one that's the one this is my tab so in this tab here we're going to work with this similar file here so basically this will be it we have fairly it's a very straightforward file this if you would have this we would do here export then if you would do here export it as a csv file or csv for microsoft excel one or the other then you will get that one so basically that is the one we're going to work on and if you click here back here this is the structure this structure i already downloaded and you will find it here you can see exactly the same structure id revenue profit cost is all of these data points here in total of 10 data points of each item so what we're going to do first let's build the chart first because that's the most important one and then from there i'm going to connect the chart with a special way to connect them in javascript because javascript itself doesn't allow immediately the option for the connection with a csv file so first of all let's build chart here so in here i'll go to chartiers.org i'm going to grab this here this is version 3.4 so in here paste this all right proper indentations and then what i want to enter remove this space here and i'm going to nest this in here in a diff with a diff class of chart box very straightforward basically what it does is it contains the items here so then what i'm going to do here is the following i want to put in here or we still need to put in here style tag that i will cover later on we have to put in here the javascript library for chart js so i think i'm getting started grab this one here and there we are copy this paste is in here and then what i will do here style tech just quickly style tech with a special uh with indication for this the reason why to avoid that the canvas or the charges will not scale into infinity so we say here dot chart box here with 700 pixels is more than enough save this go back here and refresh all right so we've got all of this what i will do is i will just put in the the right structuring here this is important to remember as well because this is now rechargeable is moving towards you so this is uh the best to use as well so i want to make sure we have this so we have setup we have here the configuration block and finally we have the render or initialization of my init block all right so in here i'm going to copy everything related data which is this part here between cut it out in this setup here i will say constant data equals we have here the curly brackets and paste this here all right make sure you have your semicolon once we did this next part is the conjugate the conflict consists of basically the skeleton of charges which is the type the data and the options basically these three here cut it out let me say here constant and this constant called config for configuration equals this semicolon here and paste this all right so once we did this here i'm going to remove this data here because this is a constant here you can see so it refers to that one there and everything else here is sufficient so we're almost done here and all right so i guess that will be it for now that's it all right final one this one here same story here we do constant but the constant here will be my chart which is eventually the element id of the canvas then we say equal and there's a new the new stands for the constructor we're going to make a constructor and the constructor always use a parenthesis no curly braces like here remember that this is curly braces but here now we are using a parenthesis so in here grab this one here only this because charges is intelligent enough to understand this already it knows that this is related to a canvas so that's why no need for that anymore comma and then we say here config so we want to load this and the config all right well we've got everything here we're done here save this now our chart should be loaded exactly the same so no differences but our structure here is now like the documentation so the next thing what we need to do is we need to parse it basically what we're going to use is we're going to use pop-up parse js for this this is very important pop-up parse is this item here pop-ups dot com you can use this here we're going to use the cdn for this one what this really does is it converts csv into json or javascript object notations meaning javascript doesn't go out of the box or it doesn't support out-of-the-box csv files meaning that it needs to be converted first before it can read into a javascript supported language so basically this is a different language than this and what does this is just like you know the best term would be a google translate a parse basically means make something readable so we make it readable for javascript and json is readable for javascript so this is what we're doing basically we convert it into that and from there we can take it off or we can continue on so to do this what i'm going to do is i'm going to go here and we're going to grab here the pop-up parse min.js the latest one which is 5.3 click here you see this here copy html so i'm going to grab this one and i'm going to paste this in here so where we can paste it doesn't matter so much it can be above or below charges doesn't matter as long as the script information is below that because this or whatever the code would be will be dependent on this all right so we have this here now we have this all of this so what we can do here and now just say here this will be pop-up parse so yes and in here we're going to work but what we're going to do is two things first of all we need to create a button how do we see this well what we want to do is we want to do here upload a excel or a csv file the moment it uploads you want to confirm the audio as a button then eventually we should show some data so how will we do this basically here i'm going to put it here a new input type and this type is the file type so we say your file type and this file type i'll give an id there this id name will be upload file that's probably the most practical name for it and then in here what we're going to say is we're going to accept a certain mean item so we're going to say here the accept attribute an accept attribute will only accept which file dot csv all right that's the file we're going to accept anything else is not allowed very straightforward so we're assuming that this is the case here so what we have as well is we're going to have a button and this button basically uploads upload file but that's the confirming of it so i will say this id will be upload confirm very simple it's a button confirm to upload is the id the reason why i use this so we don't get confused because this here is to only upload the file but you don't push it yet or you don't uh push it through with this here then eventually we'll push it through and we will use now puppet parse for this so here we have to connect if we save this right now all right ignore that one we have these buttons here and if i select this i'm going to select a bar chart csv if i enter this you can see here if i click nothing happens why we didn't set anything up yet so just blank buttons so now it's time to activate them so to activate this we have a few things to do first of all we're going to create a new constant here we say constant this will be the upload confirm so basically this is directly connected to the upload confirm id so you say your document get element by id and what's the id name while you guess it i i tend to use this same because the more consistent it is it's easier to find it in your file so all right so we have this and then we figure out we will grab this so we want to grab this button and the moment what we're going to do is we're first going to say we're going to add event listener meaning we're going to give it something a trigger so the moment we trigger it how are we triggered by a click at that very moment i want to trigger a function so we can use a arrow function here very straightforward so we don't have to make it more more complicated and just all within here so we say this and this is the following when we click this what we want to do is we want to do the following we say papa dot parse basically we're using now the pop-up command pop-up parse uh uh commands and in pop-up parse what we're really doing is we're going to convert now a csv file up into a json file so we'll understand it because remember the excel file or the csv file which is this one here is a csv csv file which is not readable so parse it so can make it readable for javascript by making them json variables all right let me say here is the following document dot get element by id and what exactly do we want we want we want to grab the file what is the where's the file located well simply the file located here in the id upload file remember this input type what the url is so basically you want to grab the url here so you're going to grab the url wherever the url is located when you click on upload then we say here the following we say dot files we say you want to grab that file but we only want array number zero so uh the first value in the element of the index the reason why this is because sometimes you have like upload files but you have not one file but you have two or three files you want to open at the same time remember then you have like multiple upload buttons so this here shows only one upload button we have only one upload button button so that's and this is an array the first one in the array so index zero so this is the reason why so in all right we have this one then so we want to grab the first file which is index zero of the files that's the url all right and then what we're going to do here is that your comma and and then uh curly braces and within here we're going to continue again and probably can maybe even move this down here just to make it more organized and then we're going to use some certain options here we say you download you say yes true the reason why is basically here if we go to pop-up parse i'm not sure if this is powerpoint oh there we are you have this if you scroll down here somewhere you will find the documentation at a certain structure this is the one we need we put in the configuration so basically here we're now working with the configuration what is the configuration here basically this we have the file link or this one here basically here the url download is true to confirm it's a download file because we're going to upload it basically here we click here upload the file will offer basically on the browser then it can read it in the browser so that's why it's a download true the next here is i want to put in a header and i'll set the header and true and the reason i'm doing this is because we have this headers here above so the first line is the header if you do false you will not see this as a header you will just see there's a number here as well like this this would be this and that would be that and that's not what we want because we want to have this all connected nicely and you'll see later on why i'll show you that the difference so header is true then i will say you skip and then we say you skip empty lines i want to skip empty line skip empty lines remove every blank line here right now this is directly downloaded from our database here where i click here on export and there is a a tiny flaw in here it automatically adds up here this blank row and i want to skip this because if you don't skip this it will be be considered as well as a part of the array so we say skip empty lines true comma once we have this then we're done we can say here now we are complete and please complete and let pop-up parse start working so it will parse it by creating a function this function has the parameter of result that's what we need we have here the result so we can say results because it's plural that's fine and in here we can now start to do the following console.log and in the console.log we just want to see if the results are being shown as decided so we should save this now refresh open up developer tab you can see here nothing nothing happens here this is also nothing there's a choose file i'm going to grab the file here and confirm then here file option once we click on that pay attention here what happens we have here the array and we have all these arrays nicely match and cross match here id is this revenue it's all of these here so basically would mean that your data then we can go down here which data id number we want or basically or not id numbers or the data array number so for example data0 and then here we could get revenue to grab just specifically this one here so we have this one here and let me show you exactly why this here becomes important let's remove the header let's say you're going to say false meaning this will be only numbers so pay attention here now because you can see this is extremely nicely organized but if i refresh now select chosen file select this and click here on upload now we have arrays 11 instead of 10. open up open up the data and now you can see this is considered a first array it doesn't see it anymore as a header and what happened now is it will see the other items here or as an array as well everything here as well and so what happens you get this this can be an issue it doesn't have to be an issue but it can be an issue because you have to consider the items here or you have to make an array where you skip the first line here however this is basically the way to do it we have now all this so we're almost done here basically with this oh let me as well let me put in this one the files that will be fun as well i'm going to put in the files you see here this is an empty line here pay attention here the moment i refresh and upload the file again upload the bar charts dot csv upload this file we get now 12 arrays of arrays instead of 11. let's open up here pay attention you can see here now the 12 value is just a blank value so basically it's considered this one and if i would put in here some enters you will see now same story even with more refreshes again get this in here get this here upload and now we get 14 arrays so we have a lot of extra data but then the extra data is just blanks so this is not what you want that's why skip the array we can remove this probably you can remove this one but it's not always practical maybe if this is a database it just doesn't work you just say skip the array here true so it will clean up it basically cleans up your data this year header always put on true unless you have a reason you don't want to be like that maybe your top heading is has a different name consistently in that case you can set it on false refresh here let's do this one more time so we get back to original and then from there on we will continue so you can see here all right everything works back here everything is nicely organized so now we're done here what i want to do now is how can we get this data here up and i realized that maybe the popular charts pop-up parse should go up although it can stay here as well doesn't matter so much let's put in your semicolon semicolon just to make it clean but i realize it doesn't matter so much all right so what we're going to do now is the following i want eventually because there was what was also in the other video of mine three different buttons if you look at our csv file we have a revenue we have a profit and another cost we have all these numbers here so we want these to be all linked to each other nicely so how will we do this make a nice array here because once we have the array we can start to connect them with charge.js well to do this if you understand how you can grab the specific value let's show you how to do this so in here we say here console.log and what i'm going to do is we're going to grab the specific value it starts with results why because the function is the result that's being shown here let me say your dots okay how does the dot work here let's look here at our structure so this is the our starting point of the array which is basically the results and then dot and then we have data this data consists of multiple arrays if we want the first value let's say we want this one here i want in data array i want to extract the revenue value how do we do this data zero revenue all right so we say your dot data zero dot revenue same economy at the back and save this refresh now then i grab the bar chart csv upload the file you can see here now we extracted the value of 12. look at this here if we go here to data revenue equals 12 yes this is correct all right so we're now on the right path so what i want to do now is to loop this we can loop the same structure on this now we're going to push it to do this we have to make an array and i'm going to tell you when i'm telling this many times if you ever you're watching and you haven't watched it yet check my charges array series understanding everything about race is very very useful for now because we're going deeper and deeper and our race is going to be your number one companion all right so in here we're going to use the arrays so we're going to put in the following and that's this let me say here constant and let's call this the revenue data equals and then all we do here is we're going to make this a blank array while blank you want to push whatever is in here in there so now what we're going to do in here is the following i'm going to create here a function also another function a for loop but to loop through this and looping or basically the i which means iteration means repeating yourself multiple times so iteration that's an iteration or the loop is basically doing something multiple times so iteration equals loop this is i that's why you use an i here for iteration but you can use anything and now would be more i guess and that would make far more sense because your loop thing is and looping is a a loop which is consistently doing the same thing all right so now we have here this then we say here i loop or iterate this repeat ourselves consistently as long as results data length all right so i'm going to show you here and talk about here i want to show you here why this is important let's do this first save this refresh select this so you understand here what we're talking about the length we want to get the length of it and the length is it's undefined now of course it's undefined it's revenue it's not length sorry save that refresh we'll do it again what i want to do i want to grab the length of the value here 10. is that correct well yes if you look here we have 10 data points itself excluding the first one because we exclude the header remember this all right so we say here four to four i equals zero zero and then we iterate that as long we keep on iterating it as long as result data length is what it is uh uh that is ten so that will be keep on looping as long as i is smaller than 10 and we say i plus plus so incremental increasing in this is one so once we did this we want to do the following we want to say the following we're going to say we're going to get the revenue data okay dot push but are we going to push where we're going to push the value that we get here which is basically this one except that this will be instead of zero it will be an i so we put it here i so it will iterate consistently and i'm going to remove all of this now if we iterate consistently until it's done looping through this and we push it then in the revenue data so if i say here once we're done here let's look at the complete all right that's here so in here we can say now console.log now i want this to know is the value of the revenue data save this and then refresh select this now do we get our wonderful revenue data here upload there we are do we get everything this is really true we can double check that let's check at the very last three digits 20 30 25 all right let's look at that order here if you go revenue we say 20 30 25 all right so this is exactly as i wanted it and now we have this so we can start to combine these things together what i want to do now is because this works i want to make now three or two more i want not only the revenue i would like to have the profit and cost as well so the profit data and we have the cost data and here exactly the same methodology except now instead of revenue data we're going to get that this one here and we're going to grab here this will be the cross data and this will be cost and this will be profit all right very important why i'm using this so maybe you want maybe you know and i can put it in here semicolons that's consistent the reason why is this i'm using these terms here if you do not have this here you cannot use this maybe you have product abc then you grab and put here product abc it makes sense all right so this is why this is the one thing that i warn you if you're using this this must be very consistent if this is not consistent i'm going to suggest to you to use header false here and you do this one instead of i is zero you do i is one what will happen it will graph basically everything from here so let me show you if i save this right now oh i cannot even use this here but it will it will start to grab that one uh yeah that will that's all right so it will start to grab this but of course this will be slightly different here but i will show you that maybe later on but this is really really important to understand all right we've got this now we are very close to completion we have all of this let's console log all of these here i want to grab the profit data i want to grab the cost data and show me if the result is as i desire or as i expect open this upload file we have three different arrays nope we get not undefined so i have to double check why of course we have our headers false so it should be in true the reason why this of course is not anymore alive here probably we need to put in the zero or a number and this right here should be zero if i'm gonna say it's somewhere that i i haven't in my notes but i will just ignore it for now it's not important in this case of the video if you do want to know please put in the comment section below if you want to give me suggestions or if you're asking for that no problem upload file this is the one we want i just want to extract the data here we get all of these let's look at the very last three digits of this one i think this is the uh the profit and this one is our cost so our profit is 15 22 15 and the cost item is 5 8 and 10. let's double check here in our list 15 22 15 that is the profit all right and then the last one which was the cost related 5 8 10. all right we're getting very very close now so what we're going to do now is basically create a function and this function will have the buttons and these buttons will update it based on when we click on we grab it and we put in here the values so we're going to say here function and in this function i'll just call update chart very straightforward and here we're going to use eventually a label i want to use a label here or a parameter sorry this is a parameter and a parameter will be a label and how will we do this well basically like this i'm going to save that first and then i'm going to put in here three different buttons put it here a line and then we're going to make here buttons and the buttons will not have an id but they will have a nice uh on click effect or on click function so one click and then we say your update chart y update chart if you wonder this here is directly matched with this the moment we click on it we want to update the chart now we want to grab the label here i'm going to be very straightforward here i'm going to grab the items we have here the constant of the revenue profit and cost i'm going to do some tricks later on so just pay attention here because this will only work with a trick all right so i'm going to put it in here all right grab this and put it here and another one here this will be profit and this will be cost so we say here we can show you here show cost show profit and show revenue all right so we've got all of this now if i saved it refresh then press on this nothing happens yet why first of all we didn't even upload the data but secondly we didn't even connect a function in here so the only thing is probably work says here is this let's say you console.log and i just echo out the label save this refresh if you press on this you can see your revenue data all right so what i want to do now is basically the following the moment i click on revenue data here after the upload once we upload the file of course then we click on this we should show here everything so what we're going to do here is the following we're going to say here we have the label here all right this works so we say here and let's see we're going to say this let's say here my chart dot we're going to because we're going to reassign basically this one here we need to reassign this to do this in the new structure it's exactly the same as previously the only thing is that we are going this has basically a uh yeah i can't say even what what kind of structure it's like upside down structure normally it starts from up and then goes down but now it's like i'm not sure if top is basically the top down or down or bottom up i guess it goes from the bottom and it goes up here however i'm not sure if that's the right term but this here is dependent on this and this here has a as a variable which depend on that but the structure itself is same we say here from my chart and then we're going to figure out where's the data we go here to config we don't see it yet we have to go data all right in the data we want to go to data sets and then here data all right very important here so in my chart let me say here the following we have here my chart and let me think what we can do here now that is of course the data sorry i'm just overthinking data sets and this one is zero y zero we only have one single data set here we could add more but in this case i'll maintain this dot data equal and then you might say oh okay i know what we need to do we just need to equal label this will not work by the way i will show you one and i'll show you also the solution so then we say of course here the function update my chart and here as well all right semicolons there's so if we click on this we hope to update this and then let's check here so once we do this we select first because right now if you do this all right that doesn't even work although you get also these errors and even if you do this this won't work as well because you will still get errors even if you have the data here the reason why you do why it doesn't work it sees the value now the data as label and this label is now considered a string it's not you might say well i have the label here but if i do this here doesn't it sees it like a constant no this is not the case but there's a trick it's called template literals we're going to use backticks all right remember vectix is it's not the same as single quotations pay attention your back twix is on your keyboard close to the number one all right these are the backticks in the backticks we're going to use this this is uh template literals dollar sign and then we say i want to convert this label this looks like a string but i want to convert it into a constant very important here all right once we do this let me save that you'll see it will work now nicely well that's what i expect so update this and then we select this nope all right so let's see what's going on did i miss something here or misinterpret something update labels uh did i match the item here yeah that's all matching all right so let me double check what's going on all right so sadly i don't know exactly what happened i thought i already had this fix but somehow it doesn't work so sorry about that so we cannot use these object literals for now i will do some research on it and eventually make maybe a separate video regarding this however so what i will do is i will change this then this is a pity but fair enough so we can do another way to do it so we're going to create an if statement basically if let me say here label equal equal what exactly well if it's equals the revenue data if that's the case then i will say this is that revenue data here this is our constant so i thought it would convert it into a concept for some reason it just doesn't work but let's continue on i don't want to spoil the fun of completing this so we have this now we have here the this would be the profit data finally here will be the cost data and this is even that that one is equal to this and once we have this what i still want to do here of course is the next one would be well we can save this first let's double check this works nicely save that refresh and now if i click on that nothing works of course makes sense because we didn't upload it yet upload this now if you click on it here we are so we grab our values here nicely as you can see remember this was 12 so there it is so we're not done yet because look we have added this here but what about this here the votes number of votes we want to change this as well how do we change this well we just grab the label itself here which is also in the data set which makes it very convenient so data data sets number zero of course for the index and then label so in here all we're going to do here is the following don't just grab this all let's say here that label equals the label value which was already these values in the string that form so save this refresh choose this select that there we are upload file show revenue all right here we are and there we are and there we are so there we are so we have this and maybe you want to change this we say wait a minute there are 10 data points here why why we only have six here you're right let's change this as well what we could do is the following i would say here right now with the id i will just grab the id numbers here and you could change this to something else as well for the labels so what i'm going to do is the following i'll say here i'll call this the labels and the white labels because it's a multiple [Music] item it's plural basically and it's called your labels as well so we're going to overrule this one all right to do this of course you need to push the labels and this would say push labels and then here of course we're going to create a new constant call this labels very straightforward push that you can even do a console of your labels but it will be just very straightforward but later on we can maybe change some names of it and all we want to do here is the following i'm going to grab all of this put in here and what are we going to adjust well straightforward we're going to go back here and we say get data and then we go to labels equals the new labels so this it's labels and you say equal labels with an s which is of course our item here so if you do this and save this you will see that now eventually everything starts to change grab this update uh upload file all right uh what happened here why is this unidentified did i miss something labels push labels um let's double check results oh of course why is it wrong do you figure it out well let's look at the data here uh we can look here sorry to pay attention here it's called id here not labels id so but it is a array of labels for us right now so now refresh grab the uh grab the file again upload the file we have all of this now you can see all the numbers here show revenue bam there you are let me say show profits there we are and there we are so now we have you could basically upload another file put it in and play around with this consistently and what would happen now let's say what would happen if we would change this and i'll say this one will be only 11 but this will be total total and this will be let's 100 100 100. save this refresh here and we just refresh grab this in here open up upload the file all right it shows down everything it shows you total then bam there we are and there we are and there we are so this is really a way how you can create eventually your own system basically offline instantly upload your file every time you want you download it from your database or so from your excel you upload it through here you can play around with it and it's really fun this is a very very advanced item so make sure if you don't understand try to check it again because this is quite complicated one so but if you do have questions put them in the comment section below thank you for watching this video and i hope you enjoy it and if you enjoyed this video you probably will enjoy this one as well and if you're interested in chart yes check out in the description box the link directing to my chart js course where you can learn everything about charges and finally of course make sure you subscribe to my channel

Channel: Excellence in Excel

Views: 1,215

Rating: 5 out of 5

Keywords: chart.js data from csv file, create graph from csv file javascript, chart.js export to csv, csv to chart, chart js filter data csv file, read the data csv file and draw column bar chart, chart js data from csv file, chart dynamically based on csv files, create html graph from csv, csv to graph, csv file to chart, csv file, chart js, chartjs, chart.js 3, chart js 3, chartjs 3

Id: 5H1s59jBmpw

Length: 39min 17sec (2357 seconds)

Published: Fri Jul 02 2021