Data Display With ApexCharts | Vanilla JS & React

[Music] this video is brought to you by brilliant a great way to learn computer science and much more go to brilliant org slash traversée media and the first 200 subscribers get 20% off hey what's going on guys soon this project we're gonna be dealing with charts okay we're gonna use a library called apex chart which is open source and free and it allows you to display your data in really cool ways okay so I'm going to show you some examples if you were to download click this download button you'll get a package with a whole bunch of samples and you'll get stuff like this so this is an example of a line chart if I go ahead and reload you get some cool animations you can interact with it a little bit you have mix charts so this is like a line chart with a column chart and then you also have like full dashboards that they give you if I reload you'll see the cool animations here so this would be really nice if you were building like a CMS or something maybe an e-commerce platform where you wanted an admin area and you wanted some analytics maybe the views or number of users say it's tough with sales it's it's really cool and yeah it's just it's a nice idea to implement into your projects if possible you know if you have data that you want to display so what we're gonna do is we're gonna build a bar chart that shows the the 10 largest cities in the US by population okay so something very simple so it's an introductory level level video so if you're not a JavaScript whizzed and don't worry about it and it's not this stuff isn't that difficult we're gonna first do it in vanilla JavaScript and then we're actually going to implement it into react because if we go to Docs and go to integrations you'll see that they actually have packages available for react and view okay so we'll do it in vanilla JavaScript and then we'll spin up a quick create react app application will install apex charts and we'll create a component that's going to be the same chart that we create with vanilla JavaScript okay so that's what we'll be doing let's start off with just the vanilla JavaScript so I'm going to jump into vs code I just have an index.html file and a main.js file so in the index.html I'm just gonna put some boilerplate hey head body tags I'm just gonna say apex chart example and no CS no CSS well we are going to put a little bit of styling but I'm not going to put it in a separate file because it's it's very little then we want to include the CDN so I'm going to say script with a source the source you can find on this page here this is the docs page and down at the bottom if we click this it'll open up the actual file but we just want to grab the URL so we'll grab that and include that in our source ok then of course we need our main j/s so let's go ahead and put that in here main j/s and as far as styling it's gonna be very simple so I'm just gonna put a style tag up here and I'm gonna grab the styling and paste it in so basically we just were changing the font and then we have a container that's just gonna it's gonna make it 80% of the full width push it into the middle with margin auto very simple and then as far as HTML goes we just want our container and then we need an element that's going to display the chart okay our output the chart so it's gonna be a div with the ID of chart and that's it that's all we need for our index.html so let's save this I'm gonna go ahead and open this up with live server which is a vs code extension and there we go so we just have an empty page you can see the title showing up here though so now what we want to do is start to implement the chart options that's that's what makes the chart is you have this huge object that has all these different values including the data the labels and styling all that stuff and if you go to the documentation and you go to like chart essentials it'll show you how to add the add the data which is in something called a series okay so that goes in the options categories is going to be kind of like the the labels of the data and we want ours to go across the bottom so we're gonna put it on the x-axis and then we also have options for just like color and stuff like that if we want to show labels and all the all types of stuff and it's all in the documentation but let's go back to vs code and let's go to main J s okay so first we have our chart options and then after that we're going to initialize our chart and then we want to render our chart okay so those are basically like the three steps we need to do here so we're gonna have a variable called options which is gonna be just one big object and to initialize the chart we're gonna create a variable I'm going to call it chart and we'll set it equal to new and then apex charts which takes in two things it takes in the the selector that we want to output it in which is going to be this div with the ID of chart so you could use any any JavaScript selector you want or jQuery if you wanted to but I'm gonna do document dot which is a query selector and we want the ID of chart okay and then the second parameter is just going to be the options that we define above and then to render it we simply call chart dot render all right so it's not going to show up now because we don't have our the correct options that it needs so let's go into this object here and basically we have first of all we have just chart which and here goes like the width the height just some basic options so let's say we want the height to be 450 that's in pixels the width I want to go all the way across so I'm going to use quotes here and say a hundred percent and let's do a type okay so the type is going to be bar there's lots of different types you can use and I'm also going to do a background color of just light gray and then you can also do a foreground color which is for color like that I believe yeah so let's say we'll do 333 which is almost black alright so as far as the data we have we have data and we have the labels for the data which is called what you call categories so the data goes in something called series okay so we want to say series and this is actually going to be an array with an object inside and then we want to give it a name what this is actually optional but I'm going to give it a name of population and then we want the actual data okay so instead of going to the article and copying everything one by one and I'll show you that article again it's right here it gives you all the different numbers for all the different cities instead of doing now I'm just gonna paste the array and and it's just the numbers without the commas okay so let me just grab those real quick okay so let's paste this in here as an array and it's in order so this is like New York Los Angeles what's the other one in Chicago and so on so that's our data now for the categories we want to go under the series so I'm going to put a comma here and I want these on the x-axis so I'll say x-axis this will be an object and inside this object we want to do categories okay now this categories is actually an array of of the labels so I'm gonna grab those as well rather than typing all those in okay so as you can see these are gonna match up with the data and and you can do whatever you want you don't have to do populations of cities whatever you want just put the data here in the label here okay but make sure they're in order like this should be New York this should be LA this should be Chicago and so on so just by doing that and when I save it's gonna fix it up a little bit because I'm using the prettier extension for vyas code but let's take a look at our chart now and there we go so just from what we've done so far we've created a pretty decent looking it has some animation okay so when it reloads up it animates a couple things I want to do here is I don't like the the actual labels in here so I'm gonna take those out when you hover over it you get you get the population anyway so I'm going to take those out I'm also going to change the color I'm gonna change it to like a reddish orange kind of style I also want to add a title in here showing what this is so let's go back to our options array here let's go under the x-axis okay make sure you're you're under the curly brace not the categories array so we're going to put a comma right here and we're going to continue on with some options so I want to do plot options and this has a couple different things that you that you can do all I want though is bar and this bar object has a property called horizontal and this just basically it can format the bar chart to go horizontal if you want the false is actually the default which is what I'm going to keep but just to show you if I put it to true and we go and take a look at our chart now it's going in a horizontal fashion okay later on I'm actually going to show you how to put a button here you can click and we can switch it to horizontal just to give you an example of an event because there's different event methods that you can use with this library all right but for now let's let's actually put this back to false that'll bring it back to normal and then underneath that I'm gonna do Phil so Phil we can do colors and then this is actually an array you can do multiple colors but I'm just gonna do one so it's gonna be hexadecimal it's gonna be F 4 4 3 3 6 so now if we take a look it's like a reddish almost orange kind of color and then I want to remove those labels like I said so we want to say data labels and in here we want to say what is it enabled and we want to set that to false because I don't want those to show so let's go check that out and now those are those are gone and you can see when I hover over it shows the population number anyway so the last thing I want to do is the title I want it right in here to say like top ten cities or whatever so we can add on here title and this can take a lot of different things actually of course we need the text so text I'm gonna say largest cities in say largest cities by population or largest US cities okay so if I just put that it's going to look like that which doesn't look that great so I actually want it in the middle I want it bigger I want it I want to add some margin I want to push it down on the y-axis a little bit so we're gonna add some extra properties here we're gonna do a line so a line Center we're gonna add a margin 20 we're gonna do a y-axis or offset y offset Y width 20 and then I want to make the font size a little bigger you can't just do font size here you actually have to put style and then font size and then I'm gonna put quotes and let's do 25 pixels all right let's check that out and there we go so now this is pushed down it's bigger its centered so great so now we have a nice little chart so you can see how easy it was to create that now you can also have different methods okay so if we go to the docs and we go to chart essentials let's see right actually it's right here methods so there's a whole bunch of stuff you can do here you can like update the data which is the series toggle series append data what I want to do is update the options okay so we can create JavaScript events that will actually change any of these options what I want to change is the orientation the horizontal okay so I want to change this to true on a button click so I'm gonna go back to the index.html file and I'm gonna put a button right below here all right so I'm just gonna put a button and I'll say horizontal okay and I'm not gonna not doing anything special here I'm like I don't know I'm gonna add an ID I'm just gonna use button as a query selector so down here let's create our event or method will say event method example so we need to grab that button so let's say document dot query selector and it's the only button on the page so I'll just do button and we want to do add event listener okay we want to listen for a click event and and the second parameter here is gonna be a function let's use an arrow and what I want to run let's just go back to the docs real quick so what I want to run is this right here chart dot update options and then you can pass in any options that you want to change so I'm actually going to I'm not going to copy it but this is what I want to run chart update options so right here chart dot update options alright and inside here we'll put our curly braces and we can choose anything we want to update in our case we're gonna grab the plot options bar and then the horizontal value so I'm actually going to just grab this right here and paste that in wait a minute update options yeah that should work so we want to change this to true making it horizontal when that button is clicked so I'm gonna save this and let's go back okay so we have a button here if I click it it goes to horizontal alright so you can see how these different methods work and there's a lot more that you can get into with with the different all these different methods that are available you also have different event so obviously we did the render but there's other lifecycle methods here that you can use as well so there's a lot you can do I'm just really going over the basics if you want to add another button to make it go back to original to the original orientation that's fine as well but I think we're gonna stop here as far as the vanilla JavaScript version and now we're gonna jump into react alright guys so now we're gonna jump in to react we're gonna just spin up a quick application using Create react app and then implement apex charts okay so I'm in a new folder called apex underscore react I have my integrated terminal opened down here and I'm gonna generate a new application so I'm gonna use n px which just runs create react app without it being installed on your computer so we'll do n px create - react - app and we want to just put a dot for the current directory okay so that'll just generate a new app so while that's going on I'm going to jump into the docs here and go to integrations and then react apex charts okay so basically what we need to do is install these two packages we need this standard Apex charts package along with react - apex charts ok and then we need to create a component that's going to have the options in its state it's also going to have series as a separate piece of state so the series won't go in the options like it did when we were using vanilla JavaScript and then of course we output the the chart component we pass those the state options in as as props okay so let's go back so that's all done let's let's install the two dependencies we need which is what is it Apex charts and react - apex charts okay while that's going on I'm going to open up source app dot J s and just clean this up a little bit so I don't want this logo here I'm going to get rid of that and then I'm gonna get rid of everything that's within this div with the class of app so basically the whole header here so we're gonna get rid of that okay and for now let's just put an h1 and we'll just say hello and save okay so now I'm going to just go ahead and run the server with NPM start and we should just see hello alright good so let's go back in here and I'm just going to get rid of all the styling and the app CSS for now let's get rid of that actually you know what we'll do is we'll paste in the styling that we had in the vanilla JavaScript app so this right here the body and the container I'm gonna just grab that I'm gonna copy that and paste it in here okay and then we need to create our chart chart components so in the source folder we're going to create a folder called components and inside there we're gonna create a file and I'm gonna call this pop chart Jas now what I'm going to do is I'm going to drag over the original main Jas that we had that has all the options because we need all these options but they're going to be formatted differently because they're going to be part of our components State right so first of all let's create a just a basic react component so we'll go ahead and import its imports react component from react oops okay we also want to import the one import chart and that's gonna be from react apex charts alright and then let's create our class so say class pop charts extends components and let's be sure to export default pop chart and let's put in our render okay so our render for now I'm just going to return let's just return an h1 and we'll just say chart okay so we'll save that and I just want to import this into app KS just to make sure it shows up so let's import pop chart from and we want to go inside components slash pop chart and we want to put that right in here like that and save okay let's go back to our browser and let's open up 3000 and we get chart good all right so let's head back into pop chart and let's let's set up let's set up our our chart component that we brought in so instead of returning in each one let's get rid of this let's actually return a class of container because when we want to put it in the middle and so on we could actually put you know what let's not do that let's put container in app guess so instead of class name app will just say container like that alright that way we can just return our actual chart component all right and this is going to take in a bunch of properties oops okay so we want our options so options is actually going to come from the state so I'm just going to set it to just an empty object for now we want our series so we'll set that then we want the type type is gonna be bar so when we did vanilla JavaScript we actually put the type and the height and the width inside this chart object but now in in react we're going to put those things in here so let's say height equals 450 and let's say width equals 100% okay now the options in the series these are going to come from our state so we'll say this starts state options and series this dot the state series okay so now we need to create our state so I'm actually going to use a constructor here all right so let's say this dot state equals our state object so we're gonna have options which will be an object and then we're also gonna have series which will be an array with an object in it just like it was here in main j/s if we look at series actually what I can do is just copy the name and the data and we can actually just put that right in here in series okay and then four options we're gonna have chart just like we did just like we did here except we don't need height width and type because that was directly passed in so we'll just take the background in the four color all right next thing we'll do is the x-axis and that's an object and here's where we put our categories which is an array so I'm just gonna go to main j/s and get our categories which is our city names and we'll go ahead and put those in here all right so what else do we have we had so chart series x-axis categories those are taken care of so let's grab the rest of this stuff plot options fill data labels and title so we'll grab that and go right under x-axis put a comma paste those N Save and that should be everything so if we go back to our application and there it is so we basically have what we had in with vanilla JavaScript now I do want to add the button to toggle the orientation so that it can go horizontal so that's gonna work a little differently since we're in react so go down here and create a button now right now we're just returning the chart component so I can't just add a button down here because then we'll be returning multiple elements and we can't do that so we're gonna wrap them both I will put actually let's put the button here first so say button horizontal but we have to wrap these both in an element you could use a div or something I'm actually going to use a react fragment so react dot fragment which is like a fake Dom element it's not actually going to show up in the Dom okay and then this button here let's just tab these over this button is going to have an event so let's say on click equals method called this dot on click so up here right above the render we need to create on click now I'm not going to do this because then I would need to bind this to to this method so I'm going to use an arrow function so we want to use this format alright and just to test it out with say console.log one two three okay so we'll go back to our app and let's open up our dev tools here and and go to console and click and we get one two three all right so we know that's working now the purpose of this is to change the state right we need to reach in and change this value from false to true now this is going to be a little difficult because it's so deep in there it's it's an options plot options bar and then horizontal so we need to kind of reach in and grab that's that single value and change it so we're going to be using the spread operator quite up quite a bit here state is immutable in react so you can't just change it you have to kind of make a copy of it alright so what we're gonna do is say this dot set state okay so we're gonna set our state we want options okay it's an options options is an object and then we want to copy everything that's currently in options so what to do that we use the spread operator okay it'll take everything that is currently in the options and spread it across into this value so we say this dot state dot options okay then we put a comma I'm gonna go on to a new line let me just format this so it doesn't look crazy I'm gonna go on to a new line and then we want inside options we want plot options and we need to copy everything that's in there so again spread operator this dot state dot options dot plot options all right so comma and we want to go another level deep into bar so we'll say bar that's going to be an object and we're gonna put the spread operator with this dot state dot options dot plot options dot bar comma and then finally we get to horizontal and we want to change that to true like that okay so I know that that looks a little crazy but we have to kind of reach in and change it without mutating it so let's go back and let's try it out horizontal and it works awesome and if we were to let's let's reload here and let's open up our react dev tools and if we go to pop chart we look at state so under options or is it plot options bar horizontal is false but when I click this you'll see that it changes to true so what if we want this to toggle we can do that pretty easily actually so instead of hard-coding true what we could do is we could take the value whatever the value currently is and just set this to whatever it's not if it's set to true set it to false if it's set to false set it to true so the way that we access it is by saying not this dot state dot options dot plot options bar dot horizontal okay so whatever that value is not that's what we're going to set this to and that should let us toggle it so let's go down here and change from horizontal we'll just say change all right so now if we go back and hit it it's gonna go horizontal if I click it again it's gonna go back okay so we can now just kind of switch it around all right guys so that's gonna be it for this video hopefully you enjoyed it and hopefully you'll use this in some of your projects if you ever need to display data nicely in a chart obviously this is this isn't the best looking chart that you could create and you saw that with the examples but this gives you an idea of how to use the library alright so thanks for watching guys if you liked it please leave a thumbs up and I'll see you next time so programming is all about logic with some principles of math and science and a great place to strengthen your mind and become a better overall programmer is brilliant they have some of the most unique types of brain building courses I've ever seen including computer science and math courses quizzes and more the tests & quizzes really break down the answers for you when you get them wrong and they give you a much better understanding of where you went wrong and it doesn't matter which type of program you are or which language you use brilliance concepts benefit everyone in the industry by installing deep problem-solving skills and critical thinking you won't learn to memorize like many online courses teach but you'll learn to understand and really wrap your head around all types of concepts that have to do with computer science and just logic in general they have both free and premium accounts available so click on the link in the description and the first 200 people to sign up will get 20% off

Channel: Traversy Media

Views: 61,953

Rating: 4.9564691 out of 5

Keywords: apexcharts, vanilla js, javascript, javascript charts

Id: JxEyXOlSgV0

Length: 30min 48sec (1848 seconds)

Published: Thu Oct 11 2018