Javascript Bar Charts with ChartJS

hello and today we'll be taking a look at how we can make a graph like this in a browser with just javascript so we're going to do this with the help of a library called chart.js and this library just a quick note here we can actually use this library in react with react-js too so this is something you can use if you're using react.js to build your web application and first of all let's take a look at our original chart here that we want to convert and you can see bill 5 jf2 and micro 12 team 19 zuck 3. so this is what we're going to be making now let's take a look at the boilerplate that i have here so this is my current directory i have an html file with just a simple html boilerplate in my styles.css i have just some simple styles to align the title and to make to give margins to the body and to make development easier i've installed a vs code extension called live server if you want to do that you can do that as well so just go to your extension page and search for live server so this allows like quick reload of your server so you can just preview changes without reloading every time and you can control the live server in vs code by going down to the bottom right corner of your screen you can see i have port 5500 there that means that my live server is running already and if it isn't running already for you you'd be seeing go live so just click on go live and your live server will be up and running so let's take a look at what this code looks like right now i'm gonna go here and refresh this and you can just see that we have who deserves a cookie that's um the h1 tag here and i have the style to make it center the next thing that you're going to notice is that i've included some script links here so first of all i'm going to install char.js with the cdn by adding the script tags here and then i'm also referencing scripts.js which i'm going to create right now scripts.js so this is where we'll put all of our javascript so as you can see right now we have an empty blank html page and to make it not blank what we're going to do is add in a canvas element here and this is going to be where the javascript chart resides so we're going to have to give this canvas an id so we can reference this later on i'm going to call this cookie chart and then i'm just going to give it a width of 250 and a height of let's say 200. i'm going to save this and when i reload this there's still nothing here so let's go to our scripts.js here and actually add in our javascript chart so first we're going to have to get the element from html so for our canvas element equals the element by document.getelementbyid and then this is where you're going to put your the id of the canvas that you're set earlier on so this is what i've said cookie chart so i'm going to put that here and a semicolon so i'm using var here if you're using es6 syntax you can use const or led it doesn't matter and then the next thing i'm going to do is create a config object here and then i'm just going to leave that blank for now we can populate that later so var cookie chart equals a new chart so we are creating a new chart instance here and the place that this is coming from is from the cdn so if i look at my html here you can see that we have the script tags that's going to be running the cdn scripts so that's where this chart object is coming from so the first parameter that we're going to be passing in here is canvas element and the second one is going to be config so right now the config object is just a blank object so when i go and reload this we're not going to be able to see anything at all so we're going to actually have to configure this chart before we're going to be able to use it so let's go to config and then let's give it a type of bar so this is going to tell chart.js that the chart we're going to create is a bar chart and then data data is going to take in another object inside of it and this object will contain two props so labels and data sets so labels and data sets will both be arrays so label is going to be an array and data sets is going to be an array too and this it actually has to be labels and data sets not labeled so let's tackle the labels first i'm going to look at our target graph here and you can see that we have bill jeff michael tim and zach so these are going to be the labels so let me do that bill and then jeff then tim actually it's michael named zuck so michael then tim and then zuck there we go so that's going to be our labels i'm going to just put this data set on the next line by the way i've prettier installed so prettier is a vs code extension that will help me format every time i save so it's going to look prettier and for data sets though it's going to be a list of objects and each object being individual data sets so if i look at our example here we only have one data set and that being the cookies data set now if you were to have multiple data sets like number of cookies and number of cakes and number of chocolates then maybe you'll need multiple data sets we're just going to be making one right now and even though it's just one we still have to put a list with an object inside of it so in this object i'm going to have labels so the label of this data set is going to be number of cookies then we're going to actually have the data itself so this is going to be a list of numbers and i'm going to put in the numbers here so let's look at our example here the first number is going to be 5 because bill is 5. so 5 is there and the next number for jeff that's two and then the third number is i think that's 12 fourth is going to be 19 and then the last is gonna be three so five two twelve nineteen and three this is an ordered list of numbers based on the sequence of this in your example so that's our data and i'm going to go back and let's reload this and there we go we actually have our actual chart right now but if you remember the initial version that i showed you in the beginning of this video you'll remember that we actually have nice colors in this bars so let me show you how you can add nice colors there so the way we can add in custom colors to our graph is by going and adding the attributes of background color and the border color so let me first put this on separate lines so we can see this better i'm going to put label on its own line data in its own line and let's add in background color and background color is going to be a list and this is actually a mistake here because we have to put background color inside of the dataset object so background color we can also do border color like this and let's give in some background colors so i'm going to take and paste some colors in here and this are css colors so i have orange red blue green and purple and one thing to take note here is that this is an ordered list so it will be based on the sequence of your data and then that's going to be our background color now that we have done that we can reload this and you can see indeed we have our background colors here now you can see that it's starting to look a lot nicer but it's still really transparent so i'm going to add in some borders here by giving it some border colors i'm going to do the same thing and i'm going to copy and paste that in so like that and it's actually just the same css colors it's just that it has different intensities so i'm gonna save that and i'm gonna reload this here you can see that nothing happens we don't see our borders and that's because the border right now it has a width of zero pixels and so we're gonna have to come here and give a border width of one pixel and maybe now we'll see our border so that looks a lot nicer and that's just a really simple and basic demonstration on what you can do with chart.js after you're done with this i would encourage you to go to chartjs.org and here you can see the full documentation of what you can do with chart.js and of course don't forget that you have the react version that you can use for react and then here we can look at all of the different chart types that i've shown you so we have line charts we have bar charts which which is what i just showed you we have radar charts we have donut charts and pie charts and we have polar charts you have all sorts of charts so if you happen to stumble upon any of these charts that you don't really understand and you want me to make a video on that you can leave that in the comments and i'll do my best to help you solve your problem so that's it for this video hope you enjoy

Channel: Logicism

Views: 1,699

Keywords: React, ReactJS, ChartJS, Bar Charts, Web Development

Id: 0KlwBn8JO5I

Length: 8min 21sec (501 seconds)

Published: Wed Aug 11 2021