Getting started with Chart js | Chart.JS Course

in this video we'll start to explore chart KS and all the options but you can do with charges this is more introduction we're just going to explore most of the items we're going to a bar chart however the goal is basically if you understand some of these dynamics you probably will understand quickly near others as well and charges is truly fun because it's one of the best libraries to create charts with it is very fast fast to work with and it's straightforward and that's really nice because once you start to understand it it can be really really fun so you can see here's some of these options but you can make all fancy stuff however let's start and work with a basic bar chart first thing what we need is we need an HTML document you can see here and we have your nothing fancy and what we will do is first insert the bootstrap start a template so what I will ask you to do first is to go to bootstrap go to a documentation and search here for the starter template just click here copy there you are once you did that I'll just paste you underneath alright we've got that and then what I will do is I'll just copy this text here let's copy this and remove the remaining text ball all right once you did that I'll just paste it in here and I'll paste this in here alright you've got that now what I want you to do is the following is we're going to go in charge is and we need to go to that documentation in their documentation this is the latest documentation we're going to focus on the getting started section and in here we just get the multiple lines of code that we need so we just copy the canvas just paste that in there next we will have this one and you'll see here why is this two point four point zero if if you are probably up to date work base right now it is two point seven point two and maybe in the future will be different one you can adjust those numbers so just copy all of this and we will paste is underneath the canvas that's very important or this canvas must be before or any of these JavaScript loading yes and in here we'll just adjust it to the most updated version there you are and finally we won't get this piece of code here this is a standard code of a line chart and going to adjust it later on to a bar chart so we'll say your script and between here we'll paste the code that we have alright so now we've got this let's save this and before I adjust anything else I want to remove this color here because it's a pinkish color by default I will make it now a bit bit blue teal color so let's refresh you can see here that starts to look alright we're very close to completion there's still a few things I want to do I want to make the chart a bit smaller because right now you can see it's huge we don't need that big chart and it's easier to spot as well so what I will do is I'll put it in a cart I really love the cart design in bootstrap so we're going to use that but if you don't want that you can skip this part basically however it's straightforward process we'll say your call and the six and then we say here a offset of MD three so we have basically we'll push to the center and then we can do here as well is a margin Yankee that's like Yankee basically top and bottom but we want to focus on with a high margin so once we did that we have to put of course here the same story we have a closing div so now it's a very smaller however we're going to add up another div and we say class and this class is eight card yes and within this card will say div class Oh sake card body just to focus only on the body there you are then because this is the first of the body and then we have this second class body and where we put in the canvas card body all right so we've got this to make it really fancy I'll just put in here a H our horizontal line and we'll move this instead of an h1 I will make this a paragraph because it's a quite long text and so let's save this now refresh alright so it starts to look far more nice so this is beautiful only thing I will do it now is the background color and then we're done here and then we start working on put a background color I'll just give it a class and then I'll say here BG and that you can do anything you want and I'll do here I'll say success so the reason why I'm doing this is I'm using a lot of color coding and if you've seen my udemy course you will probably understand that this indicates a certain level of advancement and you can see that green means the easiest level so that's it alright so we've got this now we're starting here now we have our nice chart let's convert this first to a bar chart let's look here at our code here so we have all of this code you can see here CTX which is the value or the variable and basically this variable stands for I'd go in a document get the element with the ID name of my chart which is also our canvas ID so the canvas idea is being pinpointed or targeted and then it says start to draw something and what it's going to draw is of course this part here all the information below here first in your drawers is a line chart well we don't want the line chart we want a bar chart so we're going to type in your bar all right and then once we have the bar chart it will start to look at the following values so what it needs more well it will search or in the bar chart we have the data and we have these labels here with the Refresh as you can see now we have all these labels with all the month so that's the labels here and then you have here the label so the label and the label sorry differently from each other and because this values we use quite commonly we can also change this for example two countries or whatever you want you can play around with all of this this here is what we call the legend value here above so basically this is the one here up now you can also background colors you can see now the background color is the bluish design but maybe you say well this is all fancy I would like to have a different color well no problem what we can do is because the background color is an array value so let's go back to our documentation and explore a bit more on chart for the bar yeah so you can see your chart bar you can see here this is nice rainbow design you want to get the rainbow design no problem as well because you can see your background color is the color value but it's an array indicating here yes so what does this mean well if it's an array we can pinpoint it every single bar has a different color so let's try that and I will just give January a value as well from 15 let's go back here refresh and now we have all of these so let's change these colors to some random different colors nope let's remove that one and the first one we will do is here because you have to obviously have the border color and the background color so let's try green here first so you see the difference here so if you do that you will probably not see much however if you look on our fancy tooltip you can see the tooltip if you look at the square box I'm not able to hover over it if you see the square box it's slightly green but maybe you don't see it if I change it to pink you probably will see it more clearly refresh so you can see the border is already given and you can see here as well there's a pink border however the border is not being indicated here because the bar chart doesn't has a border so we can do here first is to say border width and we say here let's say five pixels all right come on save this refresh now you can see we see a nice border and now it becomes pink all right that's basically what you can do with it let's comment this out we don't want this for now all what we want here basically is to give the value an array so we're going to put this in these brackets and then we say here let's give it some color green and then we have the orange poly and then we have yellow we will have red and then we have purple all right so very important because I'm almost skipping those make sure you put it in the quotations because this is still considered as a text type although it's a color but the text all right so how many values we have we have in total seven values here how many colors we have one two three four five six all right one more um indigo let's see if that one works all right refresh and there you are so now we have a nice rainbow look-alike car and this is basically how you can play around with it it's really fascinating to change this of course you see this will not reflect here on the legend itself it will consider this as well so let's undo this yes we just put it back to the normal color because we don't want the array here but maybe you say well this is all nice however I would like to have two type of bars besides his other that is possible as well imagine you have the sales and and expenses so I will say here not my first would you say yeah this is the sales all right so then we can do is we can just copy the data set basically you're doing now is we just add up another data set if you really look carefully here the data set is considered an array as well this is fascinating because with that you can pinpoint specific items we're going to update and everything so if you want to know more about that check out the other video I have regarding to this but I'll just copy this nail first and let's make these sales we make these expenses alright and we will give this a fancy red 200 so we make this zero zero and our expenses are of course lower so they make this two to two you will see now what will happen basically is that our chart will have now an additional bar chart besides the sales chart so you see two charts beside each other and then they're separated so let's refresh you understand it so now you can see every category has two besides other so this is very fancy and very nice for comparison imagine you want to compare the productivity of multiple agents or you can see that the sales and expenses so you can calculate the differences regarding to this this is very fascinating and of course if you want to give this again colors or rainbow color or everything you will have to work here with of these individually but this is really one of the fancy parts you can do with a chart and you can go even deeper with let's check more here for some options so you can see here you have some other options here border skipped background color border width you can see here all of this you can play around with this as well Hoover background color and this is also very nice for maybe you want to change that as well so for example the Hoover background color the fill color of the bars when Hoover all right so if we hover over our chart here you can see it gets slightly dark but maybe you want to highlight it in a fairly different way so there's a default method but also you maybe want to move in a very solid way making this let's say ya solid green or right red let's say we have two red is a nice color that's a bit stronger color compared to what we have probably so refresh and then if you move over it you can see now it highlights to a stronger red and that's basically what you're doing here and this is really nice and you can do this as well for for our other one we can make it green ourselves and expenses and then if you already can change now it covers it's time to change however you notice that if we hover over one segment here basically both of them are being highlighted but the tooltip doesn't highlight so maybe say well this is really weird because I would like to see the tooltip as well at the same time especially if you had you highlight them both that's possible as well with charges so let's go back here to our documentation and let's check out some of our tooltips here so we're going to use some of these basic tooltip functions and if you look here very carefully you read you the tooltip configurations is inserted in the options to tips yes so two tips and then from there on you have all these options here and probably what we want to have is the mode so I will show you exactly I'm talking about so we go to options to tips all right options and let me say here two tips okay with s yes and I in the two tips again a curly braces and within here we can select some options as well so let's look here we have here disabled he probably set which elements appears in the tooltip all right yes this is nearest what does nearest mean that's right now what we have here that we if you hover over the nearest value will be displayed but of course we don't want that we want to have all both values being displayed so how do you do that let's go back you click on more you get some more information as interactive modes point near us and what we need is this one it says labels deprecated but index is not so index basically shows the value of everyone within that segment right now what you have here what we see here we see in these two this work belong in the same segment and they highlighted both no doesn't make any sense why they're not being shown as well so we want to do that now so we said yeah mode and then we say index and to be sure let's see I think this is a string value as you can see here but if you go back to the tooltip you read here what you need you see mode that's name then the type is a string meaning we need to put in quotation marks alright so we put in here some quotations let's save this as well once you save this refresh now your to tip you as you can see now our tooltip shows both values at all this is exactly what you want and this is beautiful because now it makes far more sense in showing her tooltip here next what we can do is also very fancy is a nice stacked version of this so maybe as you can see your sales and expenses maybe you want them stacked on each other so how can we do this well no problem it is a very straightforward process because the chart Kay has have a really wonderful documentation compared to before charges to two point seven or whatever it is going to be in the future at least the second version of charges is really wonderful compared to the first and what they said as well of the first one and the second one are not backward competitive compatible main reason is they redid almost everything of charges and because of that it is really powerful compared to before it's really fascinating so let's look at let's scroll down here we are now here on chart in the bar and we're going to focus now on what we call the stacked bar so the stacked bar chart is exactly the same only thing is that we are going to stack it and you can see here what you have to do so to do this we need to work again with our options here you can see your skills access and then on the x-axis and the y-axis need to be stacked stacked that's true so basically we come back here you go back here to our things alright so we've got these two tips here yes so we put in a comma and underneath here we're going to work now with the next part and that is so we go in options we already know options down now we have two only at the skills x-axis stacked two and then exactly the same for the y-axis yes pay attention here you have here the braces so else is this an array value value so what we're going to do is we just type in your skills and then here x-axis yes and then in here bracket curly braces and then we say stacked true so this is a boolean meaning no need for quotations marks because like true or false yes so we've got this now exactly the same we're going to do is for the y axis and the y axis will have the same method as well so before we do the the curly brackets we need to braces this alright then here same story stacked column true so by default this is set on false so once you did this let's go back to our chart here and refresh and now you can see it's being stacked beautifully and of course maybe you say well I don't like the red one up because expenses should be down sales or profit should be up yes we can do that as well that's moving around our items here so if you just move this around a bit we can play and do exactly what you want so let's save this now and a refresh and there you are so this is basically how you can do a lot of these functions here and maybe say well this is nice but I needed horizontally or I need because right now it's vertical maybe you don't want it for Tuco you want a horizontal there are so many horizontal meaning like the horizon of the Sun so left to right how to do that as well well in the chart yes documentation you can find a lot of information going through this as well you can see your horizontal bar chart same methodology the only thing now is you change the type here basically you gotta have a stacked version yes so just copy this with a horizontal bar instead of bar we just make this horizontal bar Save I want you to save this even refresh and now it's horizontal stacked if you don't want it stacked no problem so just you can cover them out or just set this on false you said this on false you can refresh and now it's just knitting besides each other beautifully and this is really a lot of things you can do with it it's the world you can explore yes of course there's there's a lot more most important thing you basically is that you already have the most essential items because other things here is we're going to bar tecna's the percentage all these kind of standard things you can even change what we called how the child is being is displaying the legend titles all these options are possible however the key what you already figured out is in here so if you like all of this kind of information and you'd like to learn more about charges because judges it's really phenomenal and probably most people who want to learn about charges they probably want to learn how you can connect it to your MySQL database how you can make the chart dynamic based on the information there and how you can insert data that instantly reflect on your item as well all this kind of information is available on my chart KS course we go deeper we go to my SQL connection with the chart KS very fascinating so if you are interested in that check out my udemy course is the chart is master course

Channel: Excellence in Excel

Views: 13,690

Keywords: ChartJS, Chart JS, Basic

Id: B5rCrmXK5Y0

Length: 20min 44sec (1244 seconds)

Published: Wed Oct 10 2018