Created all of this and we also added the functionality to display these results over here now the last thing we need to do is add this chart over here so here we can see we have this chart.
Which displays the total interest and the principal loan amount so this is what we're gonna add in this video let's get started .
All right here's the source code of our loan calculator now for the chart we're going to be using a library called chart.js so you can just go to this website.
Called charges.org and just click on get started and here we can see a guide of how to add the chart to our website so the first thing we need to do is add the cdn so let's click on this link to get.
The cdn i'll just open this in a new tab and here you can see the cdn link so let's click on this button and click on copy html.
And then the next thing we need to do is copy this line of code to add the canvas so let's copy this and let's go back to our html and other spaces over here in place of this.
Chart so i'll just delete this and paste it over here all right now to add the chart we have to add this code over here so let's copy all of this from here.
And we need to make some changes in this code but first of all we'll just copy this so let's copy this from here and let's go to our javascript file and here i'll.
Just create a function so i'll just name it display chart so i'll just type const display chart and i'll just create this function over.
Here and i'll just paste the code over here right now let's go ahead and make some changes over here so the first thing we need to do is change the type of the.
Chart to a pie chart Wesdigital
So i'll just delete bar from here and i'll just have pi and the next thing we need to do is we need to just have two values over here so if you go back to.Our original design here we can see we have the total interest payable and also the principal amount so let's go back and i'll just change these values over here.
So here i'll just type total interest and here i'll just type principal loan amount and let's delete all the rest of these values.
And the next thing we will do is we'll just remove this line of code for the labels and here for the data we need to have just two values so i'll just delete all.
Of this and we don't know the value that we're going to get in this data as of now now the value is going to change depending on the input field values so for that.
I'll just pass some variable over here inside this display chart function and we'll use that over here so here i'll just pass a variable called total interest payable value.
And we'll also pass one more variable called total amount value now we're going to use these variables over here inside the data so here i'll just type total interest payable value.
And we'll also type total amount value right now let's set the background colors so i'll just delete all of this and we need to have two values over here so i'll just create the first color.
I'll just type hash and the first color we're going to have is e63946 and the next color we're going to have is one four two one three d.
And we don't want to have any border so
I'll just delete all of this and i'll just set the border width to zero and we also don't need to have any of these options so i'll just delete all of.This all right that's it with our display chart function now the next thing we need to do is call this function display chart so let's.
Scroll down and we'll call this function over here inside the update data function so here i'll just type display chart.
And we need to pass two variables over here we need to pass the total interest payable and also the total amount so let's scroll down and here we can see we have the total interest payable so i'll.
Just pass it over here i'll stop total interest payable and we also need to pass the total amount so this type total amount all right now let's save this and.
Let's go back to our browser let's go to the website now here we can see that the chart is displayed over here now we need to reduce the width of this chart so let's go back to our code and let's go.
To the css and in our html we can see that we have created this division with the class of write so we will add some styles to the right here let's type loan calculator.
Right and i'll set the width to 50 and now let's go back and now we can see we have the correct width for the chart now let's go ahead and change this value.
And let's see whether the chart updates so let's change this to 7.5 and let's click on calculate and we can see that the values have changed but the chart has not updated so.
Let's right click over here and go to inspect and let's go to the console and here we can see we have an error canvas is already in use and here we can.
See it says that the chart with this id must be destroyed before the canvas can be reused so let's go back to our javascript and here we can see we are creating this.
Constant called my chart and we are assigning this new chart to this my chart constant so what i will do is i'll just remove this const from here and i'll just create a variable over.
Here for the my chart so i'll just tabulate my chart now we're going to assign this new chart to this my chart variable now let's create a function to update the chart so.
Here i'll just type const update chart and here i'll just create this function over here and here also we will pass these two variables so i'll just copy.
These and i just paste it over here and to update the chart you have to just type the chart name so just type my chart and then you have to type data dot.
Data sets 0 and then here you type data 0 for the first data so the first data is the total interest payable so i'll just.
Type equals total interest payable value and then we need to type my chart dot data dot data sets 0 and we'll type data and for the second value we'll just type one over here.
Because it starts from zero and here let's tab total amount value and then you have to call a function on my chart called update now this update is a function that comes.
By default with the chart.js library now the next thing we will do is let's scroll down and here in the update data function we will call the display chart function at the beginning and then we.
Need to call the update chart function so here let's type if and here let's type my chart so this will check whether the my chart variable is available.
So if we have a chart already assigned to this my chart variable then we will call the update chart function so i'll just type update chart and if the my chart variable is null.
Then it means that the function is running for the first time so we will call this function called display chart and here we'll just type else and we also need to pass these variables.
Over here inside this update chart function so i'll just type total interest payable and total amount right now let's save this and let's go.
Back to our browser and let's change some value over here and let's see whether the chart is updated so let's change this to 7.5 and let's click on calculate.
And we can see that the chart has updated now let's see whether the chart is being displayed correctly so let's go back to our original design and here we can see we have 20 0 7.5 and.
240 and we should have the same chart displayed so we need to type these values twenty thousand seven point five and two forty so let's add that over here.
Twenty thousand seven point five and two forty let's click on calculate and we can see we have a different chart but uh the values over here are correct.
So i think we have some problems in the chart we are not giving the correct values so let's go back to our javascript code and here we have a mistake we don't need to have this total.
Amount value we need to have the loan amount so we can just delete this from here and here i'll just type loan amount.