Angular & Chart.js

hey guys this is Sebastian again from coding the smart Wacom and today I will talk about angular and chart dot Jaso chapter xxx is JavaScript library which can be used in JavaScript based web applications to in to include charting actually this library makes it very easy to include charts in your application those charts responsive are easy to configure and can be used very easily and today we are going to talk about how to combine chart ajs with your angular application how to use that charting framework in your single page web application and there is another great library which is called ng - - charts and with set library you are getting a bunch of angular directives which makes it even more easier to integrate chart dot Reyes charts in your angular application and that is what we're going to discover today so I will be building some practical examples from scratch and show you how to combine angular and chart Jaya's so stay tuned and let's get started so the first step is of course setting up a new angular project and the easiest way to do so is of course using the angular command-line interface once you have installed angular CLI M you will have a way bookmark which is called entry and this command can be used together with the option you to initiate a new project so Angie new then followed by the name of the project let's say the name should be ng chart and then I'm using the - - routing option here - auto include a basic router setup in our application okay hitting return is now downloading the default angular project into a newly created folder which is named ng chart you can see it here and then after having downloaded the default project template it starts you can see it here it starts installing and downloading all the dependencies which are needed by the angular framework and this is being installed by using the node package manager and this just takes a minute or two to complete so let's wait for for this process to complete okay so here we are the installation process has been completed successfully now we can change into that new folder and just check out if everything is working as expected and starting up the development web server which although is done by using the ng command and this time I'm using the option serve and I'm using the parameter - o to open it up in browser automatically so you can see it's starting to build process so it's bundling our application into modules and once this build process is completed the web server is starting up on pod 4200 and you can see it's opening up the application in the browser automatically and here you can see as s as a default output of the angular application without having made any adaption of so far so just to prove that everything is working and from this point on now we can move forward and install some first dependencies do you get the charting installed so as already mentioned we will be using a JavaScript library which is called charge a s to get charting in our angular and you can visit the project's website at chart J s dot org and here you can find an overview of what chart Diaz is you can find samples and get an overview of chart types which are part of that library and to integrate it in our angular application furthermore we will need a dependency which is called nd2 - charts and installing that dependency in our project gives us angular directives for using charges which makes it even more easier to integrate it in our in our components okay to get both installed and switching back to the command line I'm stopping the development web server here for a moment and then the first thing I need to install buyer and p.m. so it's npm install is charged on j s so you can see it here it's downloading charted on today s as a dependency which means it's adding that dependency into the package dot JSON file which is Weibull inside our angular project and then downloading and installing charges into the node underscore modules folder which is also a waiver within our project folder and the second thing i need to install of course this is an NG - - cards and this is done in in the same way so it's adding that dependency into the package.json file installing it into node underscore modules and they always making it Weibull in our project so let's wait for it to complete okay here we are installation has been completed and now we are ready to move on but actually before turning on to the source code we need to install one further dependency because we will be using some of the bootstraps frameworks CSS classes to make our application nice-looking and this is done by including bootstrap of course and bootstrap can be installed by using the NPM install command once again here in the project folder and then the package name is just bootstrap here so I'm hitting return and making sure that this first dependency is although added and installed into the project ok now that all the dependencies are installed we can open up the code editor which is Visual Studio code in my case but of course you can use any other code editor of your jaw's so here is the project and the first thing now we need to do is to include the chart daughter ji survival by using a script Ted and the script tag is placed inside of index dot HTML right here in the body section so let me add it here so if script as RC circuits a Weibull in note underscore modules charter RJ chart dr. J as slash s RC / chart dot J s okay so the next thing which needs to be done here is to include at the bootstrap dot CSS file and that is being done a Stiles dot CSS so we use the ad import statement here and then it's a bootstrap slash guest / CSS slash bootstrap dot min dot CSS okay so now charges and bootstrap dot CSS is included and now we can move on and make sure that we are including the charts module from the NG tube - charts library and that is being done right here in our angular application in our main application module which is a Weibull in app dot module dot TS so first of all I need to add the following import statement here we need to import charts module which is containing over year on directives we would like to use later on from the ng - - charts library like so and to make it Weibull we need to edit here to the array which is assigned to use imports property in the following way so it's charts module okay like so so this will give us later on the possibility to make use of the charts of the NG tube - charts directives to include charts in our HTML output okay because we will be implementing different charts I'd like to include a basic navigation turn next so that each of those charts is displayed on a separate tab and the user can then click on tabs to navigate between the charts and therefore I'm starting in app dot component of HTML you can see the default content here so we have the ruta outlet element which is needed because we will be using a router configuration here in our application and as that is a placeholder for the component which is linked to a certain route this is a placeholder where the content of that component will be inserted so we will leave that element here but get rid of the code above and then I will start over again I will use bootstrap CSS crossers to to implement the navigation structure which should be displayed as tabs and I'm starting with a div element and on assigning the bootstrap class container first and let me place this router outlet element in a separate Divya within that container like so and then we will need an unordered list element so a ul element which gets assigned the class nev and nev - tabs like so and within that UL element we can place our list items so Li and each of those list items needs to have a class of nav - item and within that list element I am using anchor element so a was - link class assigned to point to a certain route and to do so let's first use this link to point to our bar chart component and I will use the router link attribute here to point to around we need to configure later on and that it bar - chart okay so straightforward and now we need some more list item elements here so in total we need four menu items here and the second item now is used to navigate to use a donut chart example and the link here is do not - chart like so then we will be implementing a radar chart and finally we will have a pie chart with the corresponding route okay like so okay so let's restart the development web server once again from inside of Visual Studio code I've opened up the integrated terminal which can be done here in the View menu with the Seattle terminal and let me start the server once again so entry surf and then the option o to open up automatically and this is starting again and the bundling and build process and once it is completed we will see the final result in the browser which is and popping up so let's a wait phone process to complete okay here we are and you can see and that's exactly what I would like to have uh navigate the navigation structure as displayed as elements and this will later on when we have completed the router configuration this was a point us to the components which are outputting the corresponding charts okay so let's first implement the bar chart example and to do so we will add another component to our application and I will open up a second instance here of my integrated terminal with the plus sign here and to create another component in my angular application I can use the angular command line once again so Z command here is ng then g4 generate and then C for component and then followed by the name of the component I would like to create and in my case I'm using my - bar - chart so there should be the name of the component and hitting return is adding in total four new files to the project here you can say four new files and the app dot module dot T as file is updated as well so first of all we can look take a look inside of here you can see my bar chart component is avaible and imported and added to Z declarations array here and the four new files which have been added can be found here in SRC app and then there is a new folder available which has the name of my new component so my desh Pardesh chart and here you can find the files including the our typescript file and the HTML file which will now be used to implement our first example okay so let's start with the implementation here in my - bar - chart component HTML and I'm getting rid of the default code here and instead I'm starting out with a different element and another div element here inside of the top div element and I'm assigning a style here just an inline style which is setting the display CSS property to the value block to display it in a block layout and then we have a canvas element here canvas and now I'm using the base chart directive which is one of the directives from the ng - there's a chart library and was that directive I can now turn the canvas here to a chart and then I'm binding properties here to class members I will be implemented in the next step so first of all we need to supply the chart was data and that is being done by using the datasets property and I'm binding it to a class property which is named at bar chart data so like so next we have labels for the chart and the labels are supplied by a member which is called bar chart labels okay next options and the options property is bound to bar chart objects then we have legend for for another chart and the content which is displayed imagined is a Weibull and bar chart legend like so and finally the chart type and the chart type will be available in bar chart type ok so here we are and you can see of course all of those class properties bar chart data bar chart labels and so on are not existing yet so the next task is to head over to the typescript file and complete the implementation here ok so let's start here to bring in the properties I do need first of all we have the bar chart options property which is an object containing again two properties the first one is scalar show vertical lines which I would like to set to false and responsive what I would like to be true so that our chart is displayed in a responsive way ok so next is the bar chart labels property which I need to define and to initiate with the corresponding values and I'm assigning an array here an array of strings so the following labels should be displayed so let's continue this serious until or let's say 2012 okay so these are my string labels and then we have chart type which is set to use a spring bar by using bar here I'm specifying that I would like to display that chart here as a bar chart then I would like to use bar chart legend which is set to true so that we are will be seeing a legend underneath the chart and then most important of course we have public bar chart data which is an array of two serious so let's bring in brackets first and then we have curly braces for the first data series this is an object here containing the data property which is again an array and let's fill it with just a few sample data so let's use those values here and then we will give it a label here so this is my first serious and I will call it serious eh okay so let's bring in the second serious again if the data property here which is an array of values so let's use 2848 14 1986 27 and finally 19 and the label here is of course Sirius B okay okay so let me switch here to you the first instance of my integrator terminal you can see the development web server is still running it's a same compart successfully so everything seems to be okay so I can check it here again and now we can just check that the browser again so as you can see here nothing is happening the bar chart is not appearing here and the reason is quite clear because the the router has not been configured to display anything here for the bar chart route so this is now the next step we need to complete so that we can actually see a result here and to do so because I have been initiating my angular application with the - - routing option by default around any module has been added which is a way will here in app - routing dot module dot TS and here you can see that's the place where I can start to bring in my configuration which is needed and what I need to do here is to at the route configuration object here to the routes array and each configuration is just an object consisting of at least two properties so we have a pass here which is bar chart and this has been connected to a component and in my case that's a bar my bar chart component and you can see the import statement is that it automatically here and then we can add another route here that's a default route so I'm setting past property here to Asterix Asterix and connecting that default route to you again my bar chart component okay okay so now with those changes in place I can go back to you the browser and what you can see here is the chart so this is what we have specified a bar chart consisting of two data series series a and cos B and this is the way it is displayed here so you can see it here it's a Weibull when I click on path chart if I click on donut chart rather chart again the bar chart is displayed the course then the default route is activated but in the next steps we will add further components and further routing configuration so that the different types of charts are being displayed okay so next and let's create the other components we do need and I'm using the NGT C command here once again and I'm generating three more components as the first one is my - donut - chart okay and then we have a certain component which is called my dish Radha - shot okay and finally I do need the last component here my - pi - chart okay and then let me quickly update the routing configuration in app - routing dot module and I can just copy that first configuration object here insert it three more times changing the pass here - donut - chart Radha - chart and finally pie - chart and then of course I need to connect the to the corresponding components I have just created so that is my donut chart component then we have my Radha chart component and finally my pie chart component like so and you can see it here as I go along here with my conspiration the corresponding import statements are added automatically by visual studio code okay so let's check the result in the browser now you can see my router setup is working but of course the donut chart the rabbit chart and the pie chart is not implemented yet and this is what we are going to do now okay so let's do the donut shop next and it's done in a similar way so first of all I'm opening up the HTML file which has been created here and I'm inserting and there's a div element here attaching the inline styling again and saying this player said to block and here was invective element I'm using a canvas once again assigning the base chart directive and then binding binding the following properties here data is bound to though not chart data property then we have labels which is bound to donut chart labels and the chart type which is a Weibull in donut chart type okay like so let's complete that typescript file here we need the following properties of course donut chart labels again an array of strings so we have the sales for quarter one we have sales for quarter two sales of q3 and sales q4 so for labels then let's say we need data and the data needs to be assigned to donut chart data again as an array so let's use just some sample values here like so and finally there is the donut chart type which needs to be set to you the string donut to make sure that the chart is displayed as a donut chart okay so let's say fit let's go back to the browser here and I'm clicking on donut chart and you can see now it's displaying my data yes donut chart okay so let's first a complete our application now we have the donut chart implemented let's continue with the radar chart again the HTML file so now it's always the same approach so I have prepared as a code here so let's quickly insert here the canvas element was based chart and now we have the properties data sets labels and chart type and the corresponding type Script code which needs to be in asserted here in my - Rajesh chart component of TS is just following so that we need to make sure that Radha chart labels is in place we have Verado chart data property here and the Radha chart type is set to rather and as you can see it here the Radha chart data property again contains two data series so two objects here with property data and labels as seen with our bar chart let's say fit opening up the browser once again clicking on our chart is not yet working let's see we need to save the HTML as well ok and here you can see that our result ok and finally let's add the implementation for my pie chart component again the code is or a prepared so that I can in copy and past that code here so that's the HTML code and then the corresponding type script code goes into the TS file so this time we have again three class members here pie chart labels pie chart data and pie chart type which is set to pi so let's save it and taking a final look in the browser so now we have all four shot examples implemented in working now I can click on bar chart donut chart or on our chart and pie chart and the output from our corresponding components is being displayed here in the browser so this was Sebastian from coding the smart way calm thanks very much for watching I hope you enjoyed my video and if you do so please don't forget to subscribe to my youtube channel and also please don't forget to visit my website at coding the smart way calm and I hope very much to see you in one of my next videos so until then bye and stay tuned you

Channel: CodingTheSmartWay.com

Views: 73,455

Keywords: Angular, Angular 6, Angular 7, Chart.js, Angular and Chart.js, Learn Chart.js, Chart.js Tutorial, ng2-charts, Angular Charts, Angular Charting, Angular Bar Chart, Angular Doughnut Chart, Angular Line Chart, Angular Radar Chart, Angular Pie Chart, Web Development, Responsive Charts

Id: 1iW0KnEk6UM

Length: 36min 20sec (2180 seconds)

Published: Thu Oct 11 2018