Beautiful Chart Animation with Chart Js Tutorial

my gorgeous friends on the internet how you guys doing today in this episode we are going to be creating charts from actually one chart but you can make all kinds after we make this one it's going to be a perfect introduction if you've never done a data visual visualization before this is going to be the perfect intro we're going to be using charges which is a javascript library and yeah here take a look this is what we're going to be building wow look at that ours is fancy so that's really cool okay so let's get started that's the end of the introduction let's get going this one is going to be quite a quick one it's not as difficult as you might imagine so we have an index html here with just a link style sheet a linked scriptdomain.js which is empty and this is empty as well all right and then we just need a cdn so we need to go to cdn and get the charge.js library now again you can just go to safari quickly and just search up cdn and then do charge.js so go in the first one which is going to be blue here is that the one yeah and just copy this over and paste it in your script tag i believe i got it from cdngs here this is the one i used so the first one here all right so copy that paste it and we good to go okay so we got that out of the way all right so what we need is actually not too much in the html we just need a diff in here now let me name it the same way because i have the finished one here so uh how do i open it up there we go so we just need a div here i'm gonna name it chart and then it's gonna be a canvas all right so it's actually gonna be drawn in 2d here with an id so i'm going to do this and add an id to it and just call it my chart all right and that's it so that's all the html for styling we'll just position it in the middle so we're gonna do body display flex all right and then do align item center and justify content center and add a height of 100 vh again this just takes the chart and puts it in the middle of the screen that's all it does uh and now to actually make it work i let's leave it like this because i want to show you something else actually so let's just leave it like this and close it up okay and now we just go to main.js and we can get going so the first thing we need to do is select the canvas so we can do const and call the ctx alright and say document.queryselector selector skeleton and we're gonna grab my chart actually get element button we need the id here i mean we can do this query selector where's the hash where's the hashtag i lost that no here it is alt no okay so we're gonna do get element by id this macintosh is just too complicated for me my chart okay and then here at the end we do get context and we say 2d all right we can use 3d as well if we're doing 3d stuff like 3js but in this case 2d all right so just do that perfect so that's one thing that we need to do now the second one is gonna be uh we need data right what are we gonna visually represent on the screen so for that i just used don't judge me i use minecraft my girlfriend loves minecraft so we just got the sales of minecraft throughout the years so i believe i searched sales of minecraft like that and we just pulled out this information all right so the total sales and the uh the year so that's what we're gonna use you can use anything you want but that's what we're gonna use okay let me minimize that and get back to it okay cool so the way this works is we create a a const and call it labels all right so this is going to be the years so it's going to be an array here and we're just going to do 2020 2012 uh 2013 2014 2015. so i just pulled again all of those years in here 2016 all the way up to date there we go how have you been are you doing good see see hug your mom there we go that's random why did i say that okay to 2020. don't hug your uncle though um so we have the labels and now we can create another cons called data like that and this takes quite a few things one of them is going to be labels all right so we're passing this in here labels and then we're actually going to need the data sets so data sets uh like that and this is going to be an array here an array and then with objects so an array of objects here so in here we're going to have another data i know they should name that some they should have made it a bit different it's data data data it is what it is so here so labels it's clear okay it's the years that go in uh in the data sets here this data uh are the actual points on the graph so let me just pull that up really quickly for demonstration purposes where is it here it is all right uh macintosh go out the full screen there we go so again uh this is the labels here 2012 2013 2014 and this is the data and the data sets uh which are the points perfect so let me minimize that cool uh so here we're just gonna pass the sales so 221 million um 326 million let me see 165 350 420 again you can pass anything random or just copy other stuff off the internet i'm not forcing you to do minecraft stuff here my girlfriend might but i'm not so there we go that's it so that's our data in there now another thing is there's a label in here as well i'm gonna call it minecraft sales minecrafty minecrafty sales and save so what that is is again i'm going to show you the finished product here is this here up here minecraft so that's the label so you can click you can toggle it super cool okay now let's also open up live server here so i'm going to say open with live server nothing's going to happen yet so we still have a blank page okay i'm going to hide it and now what we need to do is just go all the way down here and create a const config file set this equal to it's going to be an object there we go and hide this come on hide there we go we need to define what kind of graph we want we can make a donut we can make a circle we can make lines this one's going to be a line but all of them have the same structure to it so it's not really you learn one and you can do the other ones now data here it takes the data um we're just going to pass down this data all right so we're passing down the info everything that we made up here we're just basically passing it into this object and we can also have an options in here and for now we're just gonna say we're just gonna make it responsive so that's gonna say responsive true and that's all we're going to do okay and that's it so basically when we're using chart jes we create a my card my chart i'm going to name it my chart and set this equal to a new chart and here like that oh you little my chart so how am i supposed to beat that it takes in two parameters one is going to be the element so the actual canvas ctx and the other one would be an object where you pass in the data and everything but we added everything in this config so we can just say config here and we're done with it all right so that's kind of the nice thing uh by doing it that's not working right now because i am i messed up something so up here where it says data sets make sure it's all lowercase and then it should work so there we go we have our graph it doesn't look good but it works look at that we have the numbers here the sales numbers the years and then we can hover over it then we get nice animations going and yeah super cool it looks quite small so we can go to style.css and just make it a bit bigger here um so we can the way you can so it doesn't work okay it just doesn't freaking work that's why we need to add this uh diff so so whenever you create these damn charts you need to surround it with the div and then on that div you need to add a position relative and that way it's gonna work so to make it sized properly make sure you have responsive true here and the options and then in style.css get the div so you can do chart i'm smashing my hand because i'm mad uh do a position relative there we go and the width is going to be i'm going to make it 50 vw and the height is 50 vh all right so kind of half half the size there we go so that's it everything works nicely and when we rescale it it's going to keep it nice and responsive okay cool all right so we got that out of the way now let's style it up and make it look cool and then add a little animation and then we are done so one issue currently that we have is that this doesn't show like the dollar sign and the millions so this would represent 150 million 200 billion 300 billion blah blah blah all right so that's an issue now you might be going like oh well i'll just go here and add the strings and say dollar sign 200 wrong it doesn't work it don't work you think this library is simple it is not it is simple but they do make it a bit complicated uh for no apparent reason so to make that work we're actually gonna need to make a function uh and the way we can do that is i don't know i forgot give me a second okay it's been a long day where is it where's the damn function so hello you can come in she's trying to be quiet it's so funny because i'm searching for a function and it's been like totally quiet and then you're creeping in okay so anyway moving on from that little bit we're gonna look for oh yeah adding the the millions and the bajillions so for that what we need to do is in the options we need to go back in the options that that wasn't the fart in case that came true uh we're gonna do scales here so scales and then this is gonna be an object so we're going to target the y which is again the vertical one the millions bajillions so y and then it's just curly brackets after curly brackets and then we're going to get ticks here and in here we can run a callback i know this is a bit scary just copy paste it okay that's that's what the docs say so here you can do a function my girlfriend is having a lovely time with me filming here so this one takes just the value so we need the value and then we can attach a string on either side of it okay all right glad you trust me so let's go back make another curly bracket two here there we go and in here we're just returning so the whole purpose of this is to return the value but adding the plus here adding the plus here of a dollar sign there we go and then oh the plus goes after there we go okay so we have the dollar sign there and then we add the m here and hit save all right so again copy paste this if it looks weird it looks weird for me as well it's just the way it is okay and that should be it so if we check now look at that we have 500 million 400 million etc etc perfect um okay so that's done and now what we can do is just tile this up a little bit because it doesn't look that nice so what we can do first of all is let's change up some colors in here so the way you can do that is again kind of in this data sets here right you can add a bunch of stuff so something like fill if i add true to this look at that it's filled up now i can also modify the background if i want to so i can do let's do background color okay like that and i can do black for example so let me see if i can figure this hashtag out there we go so zero zero zero that's black and that's what we got there now we can also add a gradient to it which is what we're gonna do uh that's a bit you know it looks uh it takes a bit of code but not too bad so i'm just going to add a comment here and see let's do it on the top here let's go up here and say gradient fill there we go and here i'm just going to do a let gradient and set this equal to we're going to get ctx all right so the canvas and on this we can add a method called create linear gradient go figure and this one takes four properties um so the starting position and the ending position so the x1 and x1 and y1 would be the starting position so horizontally and vertically and the other two would be well yeah the end of it so we'll just do 0 0 0 and 400 here which means it's going to go from the bottom to the top and that's it and then we just need to add the colors to it so the way you can do that is say gradient dot add color stop like that and now the starting position is going to be zero to one right so if you want to have four colors you can do zero point two see wait i don't know the math of that let's do five colors zero point two zero point four zero point six zero point eight and one so this one starts from zero and then we add the color here and strings so rgb a and then i'll do this i found this and it's quite nice so just copy paste this over like that okay cool and then we're gonna grab it again and add the color stop we're gonna say 1 here and we're going to do rgba this one's going to be 0 210 255 and i'm going to add 0.3 here so the last one here is so rgba red green blue and the last one is alpha which uh controls the opacity of it so from one which is full on opacity to 0.3 ghost type okay so we're gonna keep that there and then what we do is since we have this we just paste it in here for the color for the background color so let's go here and just see gradient and this should do it hit save and look at that how pretty does that look super cool we can also control the the stroke of this if we want to so for that we can do another gradient i did here but we're gonna keep this short uh you can just kind of copy paste it if you want to add a gradient on that as well i'm gonna keep it simple and just say border color i believe that one was the one let's just try it let's do zero zero zero not pound zero zero let's do hashtag zero zero zero okay so border color is gonna add it like that cool ah cool but we'll we'll do white so let's do white maybe a grayish would also look pretty cool there we go all right you cannot see it but it is what it is uh and what we can also do is the dot here right the little dots we can make them a different color as well if we want to so the way you can do that is do point background color like that so let's do fff on this one as well so i'm gonna say fff hit save and now it's white it's hard to see so let's make them a bit bigger and you can do that here in the config section so a bit of jumping around hips and hoops but not too bad so here in the options let's do it above the responsive the way we can change it is say radius and i'm going to say comma there we go so now they're quite big okay there we go and yeah maybe a different color would be nice here but i'll do i'll do black now okay which is zero zero zero all right there we go oh that looks horrendous i'll keep it white where is that i need like i need that gray i'm not satisfied with this uh let's see i believe this is the one so i'll just copy over an rgba here and you can paste it as well so copy color here we're gonna change it to to this paste okay let's just do rgb like that and hit save okay so 189 195 199 there we go a grayish color cool okay so that's how we got the point this is how we increase the size of it um what we can also do is increase the hit radius of it so we don't need to actually go on the dot for it to trigger for this label to pop up for us so the way we can do that is just go in here and say hit radius and say something like 30. all right so now when i get close to it it triggers it already so that's quite nice makes it a bit more accessible okay another thing we can do is say hover radius there's just tons of properties in here i'm gonna do 12 on this one this just basically increases the size of the bubble and we like bigger bubbles don't we so yeah that looks cool okay uh that's kind of the main thing that you need to be honest and even on refresh you have a nice updating graph here that kind of animates but what we wanted to is update the whole shebang so all the points to be updated one by one so the way we can do that is i'm i'm gonna copy over from the docs because it's it just works and it's simple i'm gonna add smoothness to it you can go to here to data sets and it was called tension all right so you can add a tension and this value goes from zero to one one is full on basically curve let me show you if we add one here it looks like it looks like that not too nice so something a bit like 0.2 0.1 is gonna make it look quite nice so there we go it adds a bit of smoothness to it but nothing too crazy maybe even more 0.4 let's see save look at that okay so you can do that with the tension i'm gonna leave it without it because why not okay uh where where is that damn code um right here below the responsive we're gonna add this animation here so it's going to be an animation property that's going to have an oncomplete on it and we're going to switch delay through here now we don't have a delayed one a delayed variable so let's make it up here just declaring it let delayed like that without any value to it and here we switch it to true and then it also has a delay method on here and this is again this is a different one so delayed is just a boolean this one is a number here and then it does some some some checking here upside no idea what this means but it does a delay okay and then it works that's how i'm gonna explain it that we're gonna keep it simple it's from the docs it works look at that ain't that wonderful that's perfect that's all we need all right that's gonna be it i guess let's i i do want to show you where it is but they make it so why why why are you you think it's it would be under animations right but you're wrong it's not animation so we're here i don't see it you don't see it none of us see it draw draw drop okay what if we google the code i'll paste this maybe it's going to pop up nothing pops up okay so i was looking for the code for the animation and i cannot find it so we learn new information it's called delay so let's look for a delay that search up delay oh there it is so yeah here we go so this is all the code that you need to delay a graph and as you can see it works with all of them so yeah that's it thank you hope you had a fun time i sure did this was so fun to build um yeah until next time have a wonderful day check out the courses below and oh dare i say there's a new one coming up that's not related to design but more javascripty stuff and animations i'm not gonna spoil too much yet but it's coming very very soon so until next time bye

Channel: Dev Ed

Views: 35,089

Keywords: chart js, javascript charts, charts tutorial, javascript charts tutorial, javascript chart animation, javascript animation tutorial, dev ed, developedbyed

Id: fqARSwfsV9w

Length: 23min 8sec (1388 seconds)

Published: Fri Oct 15 2021