Beautiful Charts with JavaScript - Chart.JS Tutorial

hey Fox on the Internet today's video is about charts charts charts and I'm not talking about the music videos I'm talking about shot there is a JavaScript library a very powerful library to easily create different kind of charts so today we will create four of them one donut chart like here one bar chart like this one a radar chart here and last but not least a pie chart so we'll cover those four chart types in today's video and basically let's directly jump in and start so let's start with an index.html file here and spin up a basic HTML construct here so let me make this a little bit bigger HTML so let's quickly give it a title charts charts charts let's create a header again charts charts charts and let's have a quick look in our browser and settle down the preconditions we have so let's go to Chrome or my PC here it is Google Chrome and here's all files been up and we have our headline charts charts charts now coming to our preconditions we have two so one is let's use bootstrap for styling reasons very powerful UI framework just type in bootstrap CDN get started and copy the CSS link here to your HTML file like this and second precondition like mentioned we need to use charge a as of course so let's go to charges here's a getting started section which specifies to two steps one including a canvas with an ID of your chart and second one a link to the library itself so here to charge a s 2.80 so let's first of all includes the script in our HTML file like this and then secondly let's copy the canvas to our body so basically within the canvas our chart or our child is getting created with this ID my chart so we are interlinking the HTML with the JavaScript charges stuff over the scanners here and let's have a closer look at this now so now let's come to the JavaScript stuff the fun part so let's create a new file or interlink it first here script source equals to script J yes come on script is script and please note the ID my chart here keep this in mind before we now jump into our script Reyes which we create now your file script J yes basically let me a little bit alright welcome to the JavaScript part here so first of all let's create a new variable let my child one and query our my chart 1 ID so document to get element by ID like this and let's query the my chart ID on the canvas element from our HTML so when we go back here my chart this ID here we are getting this and we have to set context here so get context to do 2d or because we are creating two dimensional charts here next a new variable let's add one which actually creates or renders chart so for this we can use a comment new chart and we have to give our variable here where the my chart ID is queried so my child 1 comma break it and basically this is being used to to render the chart now and basically first of all for all charts it's the same when we use a chart JJ s we have to specify a type and we want to start with a donut chart here so let's give it a type of donut and then already we can specify data and it's really nice because it's all following a JSON structure here which makes it very easy to navigate through and define the the necessary steps and variables so coming to our data we can define labels and we will come to this in a minute first of all let me just call it labels one here next we can define the data sets because potentially we could have several sets on a chart but let's start with one so data equals data one and background color equals colors one so we will come to this labels one data one colors one in just a minute just ignore it for now so after we are finished with the data sets we can close the data tag here so we're closing this data stuff here and then we move on with the comma and we can specify certain options so in the options we can define stuff like for example a title and for the title we have again two options in this case let me Indian this a little bit in this case the question we want to answer without on our chart so in this case do as we are using a donut chart why not asking the question do you like doughnuts and we can set the display of the title to true alright I think that's it all ready for the donut chart so basically we need to specify the type a title so basically the question we want to answer with this chart and then now let now we have to come back to our labels data in colors so basically for the labels I just give it or specified it as labels one basically let's just create a variable labeled one here on the top which we can just or which we will hand in the values here yes so do you like donuts yes or yes green and you will see what's behind us in a minute and then we can specify the new variable data one where we can just specify the values of our answers to the question so do you like donuts yes yes but in green and 69% said yes and 31% said yes but in green and then we can specify our colors let colors 1 equals 2 and now let's for both answers give a certain color for the first one let's give 49 a 9 yay and for the second one let's hand over 30 36 CA B all right basically we created just we could have put those stuff directly in here so we could have put the labels directly here the data directly here and the background colors right here in the in the specification of the chart but I like to separate it because I think it's more easy to change afterwards let's have a look and at our index.html file here we are let's refresh it and you can see nothing because we got a syntax error in line 19 let's have a look line 19 displayed true I I forgot a comma here my bad let's save it again go back refresh it and here you can see our chart so do you like donuts yes yes but in green and that's it isn't it easy right all right so our next child will be a bar chart and we want to answer the question which airline carries how many passengers so let's Google a little bit passengers by airline and let's check out wikipedia here world's largest airlines why passengers carry it and let's have a look at 2017 and display what we see here so those values in a bar chart so let's get back to Adam that is where we stopped let's move to our index file and create a new canvas for on your chart and let me just call it or give it the ID my chart to let's move back to the JavaScript part basically we can copy everything over here so let me just come on everything what we did each and every single line what's wrong with my PC like this alright and let's copy it over here now let's change the variables to labels to data to colors to my chart to query the ID my chart to here so we give it the ID my chart to also changed here change it here to chart to change the label to label through the data to data too and the colors to colors too now let's work on the labels first of all so let's go back to Wikipedia and let's pick some of them let's not take all values so let's start with American Airlines group so American Airlines guru second let's pick one from Europe let's pick a Ryanair from Ireland like this short let's pick a Chinese one here China saucin saucin Airlines and last but not least let's pick Lufthansa Group let's take over the value so American Airlines carried one 99.6 million passengers in 2017 so one 99.6 orion air carried 113 million passengers 133 China sauce and Airlines carried 126 36.3 last but not least Lufthansa carried 130 exactly 130 like this this is our data for the colors let's take over the two colors we had and then donut charts and let's create two more let's pick three four four nine five let's pick 370z F like this and now let's come to the charts and the chart settings so in our first child we used to donut charts and actually it's very flexible so let's just change it to bar because we're using a bar chart here and let's check out our index.html let's refresh it and you see we have a second chart over here um basically we forgot about labels and also we we have a legend here which we need to remove but as you can see already it's a really nice bar chart here so we we get our values here for American Airlines group for Ryan air for China's also Airlines and full of tons up in different colors ER and that's actually already a nice bar chart but let's remove this legend and let's change the question here so basically do you like donuts is not correct anymore number of passengers carried in 2017 in millions and basically to get rid of this stuff here as is actually a legend we can remove it it's also part of the options so we have the title options here next let's put a comma here and let's define the settings of the legends option here which is display equals false let's refresh it and you see the legend is gone and our our title here is now correct as you can see we have two charts now on one page we want to create two more but we want to put them next to each other and here comes the bootstrap into the game so let's quickly refactor our index.html just a little bit so basically let's create a new div class container here and below on this div let's create a new one with div class equals row and below the row let's create one more div column six chart and let's close our suite if if if and if let me correct the indent here so like this and basically a Clouser role places everything within one horizontal role and within the class column we can define how much space in the vertical level we we give it and here with column six a maximum is 12 we specified that this div gets exactly half of the space so let's create another one which also gets half of the space and let's put our two charts in here so this is not a related to charge J as at all it's a bootstrap stuff for you are basically styling our page I don't want to focus in to too much detail here because it should be more or less about charges but let's have a quick look let's refresh it and you see um both of the charts are placed next to each other in one row and automatically they are gotten a little bit smaller so um yeah nice actually actually before we move to our radar chart I forgot about one thing so basically this width and height definition in CSS doesn't work so well so let's cut it here and let's put it into the canvas definition but a little bit differently so we can specify with here equals 500 delete the pixels and come on height equals 400 like this and let's copy it over to this second chart also and this will look a little bit nicer in the end all right now let's move on to our chart number three and four and start with a radar chart for this basically we will copy the whole role with its content here in our in XHTML file and let's keep it like this for a moment and change the ID here to my chart three and my chart for and let's move on with my chart three first of all so let's move to the JavaScript file again and again let's copy over all this stuff here and change the labels first of all so what what do we want to do and then in the radar chart basically we want to compare two soccer players Messi and Ronaldo and we want to compare them in certain skill areas so let's put those here in the label so we want to compare them in the area attack and the area defense in the area passing skills and the area of tackles and last but not least speed so those are the labels and as we using a radar chart it the setup is a little bit differently so we don't need data to and colors here so we only need labels but of course we need my chart three and we need to query the my chart three ID and let's also put in a different name youlet chart three chart three change the labels here to three and first of all change the type to radar now the data will look a little bit different years on this case first of all we in the labels we only keep the labels three here too to label a tech defence passing tackle and speed and in the data sets we will set up set it up a little bit differently so let's have a closer look to this and basically we will this time have two different data sets one for the player messi and another one for the player or Nidal so basically let's set it up like this come on so let's start with the data set for Messi so let's give it a label Messi and then let's specify certain options in the chart so we want to fill fill it we want to give it a background color and let's specify this in a minute we want to give it a border color again specified in it in a minute we want to specify the point border color when we point or hover over it at the point back ground color like this and last but not least the data itself so basically let's start with it was the data so we we know can specify data for tech defence passing technical speed and that start was was attack let's give him 50 here for defense let's give him a 12 for passing he's very good and passing that's give him a 55 but he's not so well and tackled let's give him a 7 and in speed he's also not the fastest but quite accurate let's give him a 29 now let's specify the background color this time differently not with hex values but with RGB values so 179 181 198 and transparency of 0.24 is the border let's hand in the same values but make it more solid let's give it a 1 here and the point or the color let's give it an FFF here and the point background-color let's give it the same here alright so this is the setup for our player messi now we need to do the same again for the second player Ronaldo let's put a comma here in between let's move to the second player on Idol and again also let's give him certain data so for attack he's a little bit better than Messi let's put in 51 defense he's a little weaker that's given a 10 also I'm passing he's much weaker sure d2 but therefore he's much better in tackled 20 and much faster 44 let's also change the colors here let's give it 255 99 132 let's copy it over here and here and last but not least we have to change options I think we don't need a legend this time but the title should be different let's just give it a title of skills and now let's have a look and as you can see we have a search art here with a title skills and we have two different so we have here the red one so hana little who is better than the grey one Messi in speed but Messi is much better in passing and so on so you can easily compare and see it here in the charts which which I like very much so this is a radar chart and then let's move on to our fourth chart our last one for today the pie chart alright and our last chart for today we want to visualize the population of the European Union so let's have a closer look at this population of let's go to Wikipedia and we see the population by country here so let's pick the top top five so to say let's move let's pick the top five and then one well you fold the others so let's pick Germany France UK Italy Spain and then sum up the rest alright let's move to our index.html are we already named my chart for let's copy and not charge free because the radar chart is quite set up a little bit differently let's copy chart one to the bottom of the code let's define labels for data for colors for chart for my chart for chart for my chart for labels for data for colors for now let's specify the labels and as mentioned let's put in Germany France UK Italy in Spain and Spain and that's called the others and the others are actually 1 14 15 16 17 18 19 20 21 23 of them now let's have a look at the data and let's round it so let's say for Germany 3 for France let's say 67 for UK 66 for Italy 61 for Spain it is 47 then and for the rest I calculated it up front it's 187 all right let's give colors and basically we already had some colors here and it's again copied them over here we are and we need two more let's use AC 5 3 5 3 and C F D 48 so 6 colors for 6 labels here we need to change the type to PI we hand over the labels here we hand over the data here and we hand over the colors here now we need to change the titles of for violation of in millions and I think that's it alrighty let's have a look let's refresh and voila here you see our pie chart here the population of the European Union with the different countries and the leftovers here and that's it very nice so I really like the chart.js right library I think I will do more with it in the next video I will try to do live chats for charts which which are actually regularly updating automatically so be curious about my next video and I hope to see you soon bye bye

Channel: Code & Dogs

Views: 27,761

Keywords: chartjs, chart js, chart, charts, js, javascript, beautiful charts, dynamic charts, pie chart, radar chart, doughnut chart, bar chart, webdev, visualization

Id: f-7uQXGur2o

Length: 28min 1sec (1681 seconds)

Published: Sun Nov 24 2019