Display CSV Data in a Chart In ReactJS | ChartJS And PapaParse

yo how's it going everybody so in today's video I wanted to do a recommendation uh from this YouTube comment right here you want to know how can we use CSV data and display it within a bar graph now I figured this video would help a lot of people out just to display data um using a CSV in really any sort of chart but since we have an example um and that's what we're going to do today by the end of the tutorial I will have made this right here so basically this is a data set that I got online which basically contains all the ages for Oscar winners from a certain year so 1928 for example was uh somebody that's 44 years old and this person right here oh 76 I don't know who won that but uh he I'm not gonna say anything else um and so that's pretty much about it so let's go ahead and get started all right so I'm gonna assume that you already have a little bit of react knowledge and you already have a react app made if you don't have one just go ahead and make one using npx Create react app and the first thing we need to do is we need to install a couple of dependencies for this torque so we're gonna do an npmi the first one is going to be something to parse our CSV data so we can actually extrapolate everything out of it so we're gonna do pop uh purse after that we need to install react chart.js2 it's two and finally we need to install chart.js and that's all the dependencies we need so reactor.js2 and charges need to go together to be able to configure it properly at least the newer version of chart.js and Pop-Up Parts like I said earlier will be used to extract the data and this is our CSV right here it's just a simple uh simple headers index Associated to the numbers the year of the Oscar date the age of the winner the name and the movie and the link to this is in the description or below where I found this alrighty so the first thing that we're going to do is we need to import all of the dependencies and all the packages that we need so the first one is just our CSV data after that we're importing Papa from Papa parse uh after that we're importing use effect and use state to save the state and also run user effect to be able to run our set chart data function after that we are going to import a bar chart from reactor GS2 and we need to import these specific things from churches the way that they're the way that is imported because if you don't do it like this then the chart doesn't properly register and it won't actually work at least in the current version of charges all right so the way that we're going to register the chart is pretty simple so underneath our Imports what I'm going to do is chart Js dot register and inside of these curly braces we're going to do is add all of these individual things just plop them in there and that's it that's all you need to worry about now we've registered the chart and next let's go ahead and create our use State functions for our data and our chart options so I'm going to do const chart data set chart data is equal to use State and let's make this as an object inside of here we'll give it something called data sets as an array block like so perfect and finally we need to do our options so I'll do const chart options and set chart options perfect and use State and this is going to be an empty object perfect all right so the way that this is going to work is it's primarily all gonna run through our use effect function so I'm going to create a use effect and I'm gonna add some empty array blocks like so uh so the first thing we do is we need to parse through our um Pop-Up Parts sorry we need parts to our CSV using Pop-Up Parts so I'm going to use Papa dot parse and inside of here we're going to give it our actual uh CSD data so I called it Oscar data you can do a URL if you wanted but we're just going to do the import like so perfect and then we're going to do another object inside of here would you give us some props that are mandatory to be able to individualize each item as an object instead of how Papa pass default League gives it to as an array uh so we have to do is we need to download set that to be true then we'll do header set that to be true as well Dynamic typing we're going to set that to be true delimiter we're going to set that as an empty quotes like so perfect and complete oops complete and what we want to do is we're going to create a function so I'll do results inside here let's just go in console log our result and hopefully we see that uh our result comes back as uh as an array of objects so if I go into my inspect tool and open this bad boy up I'm going to go ahead and make this bigger zoom in a ton let's click on this and now we have our data and it's all extrapolated within individual objects and that's exactly what we want all right so the way that we have the CSV data is a little funky we can see that we have quotes and we have this weird little space and then we have no space here it's weird um I'm not gonna try to change it because I think it's a pretty good learning tool as well we can figure out how we can um Target proper indices uh that have weird uh weird titles like this so let's go ahead and do the next thing which is going to be setting our chart data so what I'm going to do is set chart data and inside of here I'm going to give an object and firstly we need to give it the labels now this labels is going to be oops result dot data dot map and we're going to do item and index we're not going to use the index but it's good to have uh and then sort of an array block I'm going to give an item and instead of another very block we're going to do uh single quotes space double quotes gear double quotes without a space and then at the very end right here we're going to do filter and then string now okay let me just explain what this basically means so We're looping through each of these items in this array of objects and we're selecting all of the years so this is how the year is right here and sometimes at the very end of the list you might get a null or undefined this is where the dot filter comes in so it basically checks hey it's the year um like is it even a string if it's not a string it's going to cut it out of the array um so these are the type of solution that you would have to come up with if you are parsing through CSV data so now let's go ahead and talk about our data sets so the data sets are going to be pretty similar so I'm going to do comma and instead of here I'm going to do data sets like so as an array block and it's out of here when you have an object and this object oopsie doopsies we're going to give it the label and the individual label I'm going to call it Oscar Oscar winner and we'll do data so the data for this is going to be pretty similar to our labels so we're going to result.data.map item index and then we'll do the same thing item however this time we want to get the actual age of the person uh so we're going to do single quotes space double quotes age without a space double quotes and then we're going to do dot filter and we're going to check if it's a number so same rule applies here so it's basically if um excuse me if it's null or undefined at the end of the list don't even bother looping through that portion and after that we'll just give it a border color let's do black and blue background color and let's set that as soon red black and red pretty cool colors awesome all right so the next thing we want to talk about is setting the chart options which is mandatory so underneath my uh set chart data use state right here I'm going to do set chart options like so and instead of an object I'm going to go ahead and do responses and we'll set that to be true responsive I just want to double check the spelling and we'll do plugins as an object instead of your Legend same thing plugin no do position to be top perfect and then we're going to give it a title so the title for the actual chart display set that to be true and the title will just call it X we'll call it um all Oscar winners since I think it's 1928 1928 yes 1928. perfect and then at the very bottom okay we already added the array perfect that's about all we need to do so now let's go ahead and actually render this bad boy all right so the rendering is going to be a Turner operator I figure that that's the easiest way to do it so underneath my homepage title what I'm going to do is I'm going to curly braces and I'm going to check if chart data dot datasets dot length is greater than zero and if it is we're just going to do a div and if it's not we're going to do again another div but the end div right here we'll just give it something like loading dot so we know that there's some sort of message and it's not just like empty so we're going to do is inside of the first true statement if it's greater than zero suppose to do bar oops what they sell clothing price like so since we already imported it from react.js2 we give it options of chart option so if it's going to find it let's guess I'll just manually put it and data of chart data and now if we save it it should all work beautiful we can see that we have our Oscar winners right there so really quickly what we did here was we took data from a CSV file extrapolated it using Papa parse and then we made a chart out of that bad boy and you can see right here that we actually have all these values filled in so there's no undefined or null and that's perfect uh if you did enjoy this video be sure to like And subscribe and if you have any more recommendations for videos you'd like to see be sure to leave them in the comments down below I always respond to every single comment see y'all in the next one take it easy bro

Channel: Arslan

Views: 3,663

Keywords: javascript, csv, chartjs, papaparse, react csv, parse data in react, display csv data in react, how to display data in react, react hooks, coding, js, react, css, html, arslan, arslan coding

Id: NBDzLO82ZRo

Length: 11min 52sec (712 seconds)

Published: Tue Jan 17 2023