Getting Started With Chart.js

[Music] hey what's going on guys in this video we're going to take a look at chart J s which is a JavaScript library for creating really nice-looking charts in your browser bar charts pie charts I think there's eight different types that you can create and this tutorial is going to be very beginner friendly so even if you're not a JavaScript Pro you should be able to follow along really easily and create your own charts so chart j/s is that is pretty similar to d3 which is a data visualization library I did a series on d3 about two years ago and I find charge is to be much easier to work with I don't think it says advanced in as in-depth but it is very simple to work with at least on a basic level now there is a lot you can do but we're going to be scratching the surface if you do like what you see I'd suggest going through the documentation and looking at some of the more advanced stuff but what we're going to be doing is creating a chart that shows you the top five or six cities in Massachusetts by population okay and I'm going to show you how we can create a bar chart and then easily convert it to other types of charts and if we want okay so we'll look at the basics we'll look at some of the options that we can use and yeah we'll get going so we're going to go ahead and click get started here and this is the documentation which is pretty nice it shows you the basics of creating a simple chart I'm going to click on installation and it shows you the different methods you can use you can install it using NPM if you want to use nodejs you can use Bower which is a front-end package manager but we're going to go the simple route and use the CDN okay which is just a remote link to the chart.js file and of course you can download and include it in your local structure as well so I'm going to go ahead and open atom which is the text editor I'm using and we're going to create a folder to work in so I'll go to add project folder and I'm going to create this in my projects folder and let's just create a new folder called my chart okay we'll open that up and I'm just going to create an index.html file here alright and let's add some basic HTML tags I'm using Emmet so I just did the exclamation mark and then tab and it gives us this basic file structure and then for the title let's just say my chart J s chart and we want to bring in that CDN so let's put in our script tags and we want to bring in for the source let's go ahead and grab I'm going to grab the minified version here so we'll copy that and let's paste that in and then I'm also going to grab bootstrap as well all right so we'll just grab the bootstrap CDN basically just for the container and just in case you want to add some styles later so go ahead and grab the CSS for bootstrap and let's put that right here so paste that in alright so now we have charge is included now what we want to do is go into our body and I'm just going to create a div with the class of container and then in here we need an element to insert our chart okay and you're going to use the canvas element which is an HTML html5 element okay and all we need to do is give this an ID so we'll give it an ID of my chart alright and that's where our charts going to go everything else we're going to do is going to be in JavaScript so let's create our script tags here and then we need to create a variable for our chart looks to be that should be let I'm using es6 let you can use a bar if you want and then we're going to set that to document dot get element by D and we want to get the element that has the ID of my chart and then when you use when you use canvas you want to get a context so we can do dot get context and we want a 2d context okay so this is what we're going to use now to create our chart so I'm going to go ahead and save this and then I'm going to open this up I'm going to use something called atom live server if you want that plug-in you can just go to settings install and search for atom live server click on packages and you can download this first one here and install it alright once you do that you can go to packages atom live server start server and that will open it up okay it's going to open up that that index.html file and if we look at our source code here actually let's do a control you you can see that we have our script and then down here this so this is just stuff that's included by live server so you can ignore that okay now let's reload get rid of that message now what we want to do is we want to create a new object okay and we want to use this my chart element in that object so let's go down here and let's say let and I'm just going to call this bar chart okay we want to set it to a new chart object and then we want to insert that my chart element okay actually it's not called this bar chart because I want to be able to chain it's not going to make sense if we change it to a pie chart so let's call this I'll call it mass pop chart because it's going to be the population of the top the top cities in Massachusetts and then this is going to have a second parameter which will be an object and this is where all of our stuff goes all the properties the data everything so the first thing we want in here is the type of chart that we want it to be which is going to be a bar chart all right we'll put a comma and then I'm just going to put inside call a comment here the different types we can have so we can have a bar we can have a horizontal bar we can have pie line donut radar and polar area I think that's it if you guys know of any others let me know and then under the type we're going to have data which is going to be an object and then we're going to have options which is also going to be an object all right now inside the data we want to have a couple things so one is going to be labels okay and the labels is going to be an array and then we want the data set our data sets which is an array and we can have more than one and then I think that's all we need for now now for the labels in our case we're doing the top cities in Massachusetts so that's what we want to use for the labels so let's go back to Chrome and I'm just going to search for Massachusetts to the populations and then we click on this first link here which is from together we teach calm and it just gives us the city name and then the population so we're going to grab like the first five or six here all right and you don't have to do Massachusetts populations you can you can use whatever data set you want which is really nice and there's all types of ways to do it so what we'll do is for the labels we're going to put those city names so let's say Boston let's do Worcester okay so and for you guys you people let out for Massachusetts not war stuff there it's not Worchester it's Worcester we do have some very strange pronouncing pronunciations for city names let's say Springfield Lowell and Cambridge and New Bedford okay so those are the labels and then inside data sets this is going to be an array of object so you can have more than one data set we're just going to have one no it's going to have a label of population all right and then it's also going to have the actual data and in this case it's going to be an array of population numbers okay which we could get from that website but I'm just going to paste them in just to save some time all right so it's just a simple array of numbers so let's go ahead and save that and go to our web page and that's what we get okay so just from the labels and the numbers it gives us this really nice-looking chart we didn't have to add any styles or anything now we can customize this in a lot of different ways so one thing you're probably going to want to do is give these colors and look if I hover over it we get these nice tooltips with a little bit of animation so to change the background color we can go and go right after the data array put a comma and we can say background color and let's say you want to make it green okay so if we save that we take a look you'll see that now they're green now in many cases you may want to have different colors for each one and we can do that by instead of putting in one value here we can put an array so I'm just going to comment that out just so you guys know that you can do that and then we'll save background color and we're going to set it to an array okay now you can use color names you can use hexadecimal colors or you can use RGB a values which is what I'm going to use so I'm going to paste in a bunch of different RGB a values okay for different colors and then what it'll do is it'll start with the first one apply this one this one will be this color and so on so if we save that and go back now you can see each one has a different color and then we have other properties that we can we can add as well so say after the background-color array let's say we want border width and we could put board with for let's say border color and the border color we'll just do a gray and we'll use a hexadecimal value so let's see what that gives us and now you can see it has a 4 pixel border with a gray color all right but I'm going to actually change the border width to 1 because that's too thick and then if we want we can also do hover border width and let's set that to black and we can say hover focus legend people act that should be let's say 3 and then we can do hover border color and we'll set that to black okay so now if we go and we hover over it you'll see the border changes in color and width and there's a lot of other properties as well if you go to the documentation you can see all that stuff but I just wanted to give you some examples now there's also global properties and global options that we can apply so if we were to go right here and we can take X let's put a comment here we'll say global options and we can take the chart object and we can say dot defaults dot global and let's say we want default font family and let's set that to lado or laddo I don't know how it's pronounced and then we can also change for instance the font size so we'll say default font size and let's change that to 18 actually this should Apple you should have semicolons commas and then let's change the color will say font color and we'll say it will set that to a light gray all right so if we save that oops what happen here unexpected token this D should actually be equal sign sorry about that and there we go so now you can see all of the font is the same size and same color and I'm going to show you how we can target different sections as well alright so let's move on to the options down here okay so this options object let's say that we want to add a title to this chart so in options we can say title set that to an object and set display to true and then we can set the text of the title so I'll say largest cities and Massachusetts save that and go back and now you'll see that we have the title up at the top and it's nicely formatted by default if we wanted to change the font size which which by default is 18 because that's what we set for the global font size but we can change that here and let's say font size 25 and now you can see that the title is larger than the rest of the text we can also target the legend which is this right here so if we go and we put a comma after title and say legend same thing that's going to be an object and let's say we wanted to position it to the right because that's for being quotes okay we can do top bottom left right so if we were to do that you'll see that it now moves over to the right let's see another thing to do is change the color now inside the legend we also have an object called labels and we can set that font color let's set that to black and now you can see the population here and if we click it it actually we can crop we can enable and disable it but you can see the color is black okay it overwrote the rest of the global values now in this case since we only have one data set it doesn't make much sense to have this if this was a pie chart it would and I'll show you why but if we wanted to not show that we could just say for a legend we could say display false okay now save it now you can see it's gone alright so another thing we can target in options is the entire layout so if we go layout and we could set like padding we could set a single value which would add padding to all sides but we can also set it to an object and we can say for instance left we'll say 50 right zero bottom zero and top zero okay and that'll push it over to the left 50 okay so now you can see that it's over 50 pixels to the left and then we can also target the tooltips you see how we have the tooltips when we hover over let's say we don't want to show those we could go under layout and say tooltips and set display to false all right and now if we go back you'll see that oops that didn't work oh it's not display it's enabled okay and now you'll see we don't have the tooltips I like them so I'm going to keep that it true okay and there's other options as well like I said if you want to really look into it you can check out the documentation I'm just trying to give you some examples of some of the you know the more common things that you would look at and change okay so let's see the last thing I'm going to do is to show you the different types we have here so let's change this to a pie chart all we have to do is literally just change the type and then I'm also going to just change the legend to display true because now it makes sense save and there we go and you'll see the legend now has each city with its its specific color and we can see it in the graph we also have tooltips which will show us the the population and the city name alright so just imagine what you could do here with with different data sets and you don't have to create your own data sets you can use api's that can look up you know statistics and and data sets on really unlimited things out there and you can bring that in you can make an AJAX request bring that data in and then display it in a chart which is really nice alright let's take a look at see we'll look at horizontal bar and there we go so there's a horizontal bar and it's really nice you can just change the type and you don't have to do anything else now there are some options that only pertain to certain types of charts but like I said you can check out the documentation for that so see what else we have here a line chart so that would be a line chart see it starts at Boston and it just could gives you the different points you can hover over the points so you can do a donut chart which is kind of like a pie chart just has a hole in it and you can do a radar chart which is pretty cool looking alright so I don't want to get too deep into this let me just change that back to bar I'm going to make this code available in the description hopefully you guys enjoyed this and maybe you can find a reason to use this in your own projects it's really nice looking there's no C s special CSS that you have to you know you have to add yourself or anything it just looks really nice right off the bat so thanks for watching guys if you like this video please leave a like Li subscribe whatever you can do is great and I will see you in the next one

Channel: Traversy Media

Views: 392,172

Rating: 4.9648499 out of 5

Keywords: chart.js, chartjs, charts javascript, html charts, html graph, chart js

Id: sE08f4iuOhA

Length: 19min 26sec (1166 seconds)

Published: Mon Jun 19 2017