Update dynamic chart js | Chart.js Course

in this video we'll start to explore how you can use dynamic charges so charges has a lot of options and one of them is creating your chart dynamically so what does that mean so if you have a dynamic chart basically we're going to focus here on the charge as documentation you see is here updating charts function so this is a function where you can control and update the chart when you have new data and this can you unclick unload on anything what you want so what we're going to do is basically use the unclick function and make our chart dynamic so to do that we have to work with a plain HTML document and what we're going to do now is for example we're going to add up all of these things first things what we need is what we call a starter template I will use bootstrap as the starter template if I scroll down here you'll see here the starter template I'll just copy this and as I copy this I'll just paste it in here alright so we have 1 and then we just change here with a dynamic charts chess Savior up in the title so once we did that you can see here if you reload now it starts to work that's nice next part is this part here where we're going to work with the charge is getting started part what we need is the canvas ID we'll just put this somewhere between then what we need is the charges library and we are going to adjust these 22.7 the most updated currently so we can say here we have to put this somewhere down space it in here and now we say two point seven point two alright and finally we're going to add up this part here which is the charge areas information so we'll add this up in here and we type in your script now we have a closing script tag and between here we just paste all the information here we have the lines alright so for me I would just adjust this because it's a pinkish color I like the blue color more so let's save that go back in here refresh now we have a nice blue line chart alright so what I'll do now is just to make this more easier to all just confine it in a smaller location and give it some quick design so the first thing so the first thing what we're going to do is we're just going to add up a div here between so what I like here is I will just use a color here over say a class and then I'll make this one BG warning so it has a nice yellow orange background then what you do here is I'll make a div class like om b6 and I'm going to make a offset so you put it in the center so basically like a card so offset 3 all right then here we have a closing 1 and then between here we will start to put in another tip with the card so class card and what we'll do here as well underneath here you say div class listen card body now once we did that closing tag here and we can just copy this as well and we just put it in here and let's close that all right indentation here and probably we need this one as well so let's see we're just still missing one day final dip here so we have this day of closing this closes the card and then between here we have everything nice refresh this works very well so let's do only one more item here we'll just move in we can do it in here or we do it copy in the now we will say margin no padding you can make padding top or padding why five so it's on the top and bottom will be five refresh there all right so now we have that the design is fine let's start and work on updating chart so once one update the chart what we need to do is the following we need to create a button yes will either add up a button here and this button will have what we call unclick functions so if we go back to our chart as documentation we're going here to the updating chart you can find some of the information here this is probably the most essential part you need to know and of course you give the function a name so let's do that now so we say here a button then we say class BT and BT and success are so every success button closing tag for success button and then here will say update as we can do here we say on click to activate the JavaScript and let me say update chart so that's our function this function of course has not been named yet so it's still unknown but if we will check here we have now at least something here and if you open up a Developer tab you can see it does read something but of course it gives an error main reason for this is because we didn't define it let's define that one now so what we want to do is we want to basically we have these values so here these values here of the data in the chart you want to update them yes so dating basically means replace the values here so let's try that and do the following we're going to give this a function so what is a function a function was named update chart tell him here we can put it everything what we want so now the question what do we want to do well we want to have we need this at least and then after we need to update the values as well so what we'll say here is the following so what do we want to update if you look here we all want to update in our chart it's located in the data you can locate it in the data sets and they said data sets is like an array so it's the first data set and in the first data set we want to focus on data so this is very important so we say here chart dot data dot data sets and then remember this is the first data set in the array so we say is 0 dot and then we can say data let me say equals anyone do equal and then we could put in here basically all the values you want so I'll show you this one first you can see here and then let's make this 10 I'll make this 20 30 I'll just make this 450 60 and 70 all right so once we did that let's save now we can remove this space between here let's save this go back to our chart here refresh so nothing happens until we click here and now as we click you can see it's added changes so this works beautifully of course we're not done yet because you can do far more with this so maybe you say well this is static data so what if we have variables yes so let's add up a variable here so we say here for example variable and then we say the variable will be named old data equals this so you just put this in here then of course we can remove this and we say here old data so let's save this and if you refresh now you'll see it works perfectly and if we update it also works as well accordingly because that it reads the data of our variable here it with this variable and this variable basically is the array of the values so what happened now if we say variable and let's add a new data equals the one we have here so we cut that out we paste it in here semi column at the very end and then in here we need to give the name but we have here the variable new data put a new data here save this refresh let's update again and beautiful so this works now and this of course is only for data set number one yes it's the array is counting by zero so what if we have another data set so let's add up a new data set we just copy all of this information here from the curly brackets yes then in here we just paste this and we have now our second data set here and our second data set will have a new color let's make this pure green so we make this 200 so it will be a strong green color all right and then here we have now not old data let's give this old data one and what we will do here is exactly the same since basically you're working with the same math method methodology is here's valley array focusing on the number one yes so we have your old data one this should be new data one all right of course if we do this we need to copy all of this let's put this in here old data one new data one and let's change some of these numbers so you can see some differences so it's 80 this is 70 this is 60 50 40 and 30 and this one here well let's change it as well we say five we say ten let's make this fifty five and then we go down again here to 15 then we have 20 and let's make this again fifty five and then we have 25 so to make sure that we don't conflict each other because you can see later on that we have two because of the background color it will block each other yes I will well we can save this but we will also remove the background color of it so I'll just comment this out so it will give a transparent grayish background let's save that refresh as you can see now we have this nice chart with two lines and let's update them and as we update you can see it's the second line is working in this mountainous structure while the other one is a very linear structure and of course it's exactly what it should be because that's what we had here is 5555 all right so now you have this and now you have understand how to do some of these dynamic options with your chart because this part is very essential if you want to continue using some data of my MySQL or my sequel so next what we can do is we can play around with some of the new items for let's instead of replacing our data maybe you want to add up a new data here at yet yes or maybe you want to change the labels here we can change those labels as well how to do that well if you look at it we have here the labels as these labels are down here this is the label of the line of related to the legend so what we can do now is the following instead of any new chart data what we want to do is now we want to pinpoint the chart and data labels so that we're going to pinpoint labels and there's only one labels here so it's so we can focus on that that labels and maybe we want to say instead of January we want to count only the remaining one so we say August so we have to do here make an array and in the array calm us and a quotation between there so we say here a comma all right okay August what we have here we have what is a September comma October comma November comma these Sandler so once we did that semi column at the very very important here because you can see here we only have five values in the label so the labels only have five values compared to here here we have seven so what does this mean if we do this by only having five values or vibe five labels it means that the values of new data will be chopped off after the fifth the sixth and seventh value will not be shown so that's very important because charge is the line chart is work based on this so it will consider basically this as the priority of how many data points it expects if you have seven of these you expect seven data points but we were only a 5 so let me let me show you that so let's save this so you will just see it refresh everything works fine here but then if you click update what happen is it chops off to data's data points now you can see here it will just cut it off and that's basically it and but if you look it down we have our labels working nicely and now we have August till December imagine you want to add up a new value at the very end how can we do this well let me show you as well another option here this is what we call the push so basically we're pushing a value at the end of the array so it will add up a new value so what we can do here for example we want to we have this update and to make it more easier and more clear we're going to create just a new function and this function we will name push all right well yes add value all right so we just say add value basically what we do is we wanna add just a 1 value at the end so what we do here is we just say the value chart data and then we can do it with labels equals because this is a static data right now I'm doing that's what we're so because it's static sorry like before we do that that's the chart data labels dot push all right and then in here in the push we have to put in the value or whatever you wanna add up so in this case we want to end up January alright so what happened is that gonna take you an update chart it will add to December and then we can add this function here to push January remember because we're working here now with a static value that means that you will consistently add the same value over and over let me show you that before we do that we just need to put in a new button and in this button it's almost similar to what we have yes I'll just copy that one and let's put it here between it's almost similar but except here now it will be add value and add value will say just plus one simple then we say here this will be in form so it will be a teal color refresh or so now I can see here we update this and once we update it will go to December and then we say push Oh as you can see pushing on working and let me double check here what's going on it pushes but it does not update yet so let's go back here and the reason why it doesn't update of course makes sense we didn't use the update value here so we have to put this update value here so my column here that saved that one more time refresh update a chart yes an immediate plus one and then again plus one as you can see here as you plus it consistently general will be added and you will see now these data's are being shown here but after that there's no more values so - no more values it doesn't show anything more because we have no data value as well here we can do of course is add up them as well so let's add up that one as well and now I will say here labels that instead of labels we can say here are data sets remember this is the array so we say the first one of the data set array then we have dot theta dot push and what do we want to push well that's what we wanna push a value so let's make a crazy value of 999 alright so we wanna push the number 999 all right refresh now let's update and now let's push and then you can see now something happens but remember what happened exactly 7 click here we'll see if we keep on pushing because we had these numbers here so it will push a value at the end of the array so that's the number 8 value is becoming shown so that's why if you see here if you do this only it won't work yes this is the next number in line however if we do update we have 2 items in our array that's not being shown but if so it will not be shown until the audit or at least if we click on this it doesn't show our 999 value because the other two are in line first to be displayed I hope you understand this you know basically that's the push structure so you push it when you push at the end of the array meaning it will add up how many values are in line and then at the very last it will add up the number all right so now you have a little bit more information about this why not play around with recall shift so maybe you've seen as well that if you click on one then ideally at the very end this will disappear well we can do that as well because maybe this doesn't look nice because let's be honest we have too many lines you and will consistently increase so what we can do is add value or based what I call rotating the value yes I wanna do it now is we'll say we copy almost everything of this yes we remove this and say shift so what is shift shift but taken it removes the first value of the array yes so what happened now let's refresh and then as we click your update and then pay attention to this number hunt with you and a 99 on the second and this is number 0 up if you click on that it starts to probably change yes you can see your 99 still but this is number 10 now instead of 0 so let's do again plus and of course so I realize that this one is not being shown or this one will be impacted but the first line will be so you can see here if you keep on clicking it will remove consistently that value that's basically what is happening so you can see here it keeps on removing the value and until the very end so this is basically how shift works so you remove the value at the very beginning so we wrote start to rotate especially this one here these two are rotating while the other one probably has no impact panel alright so this is really a lot of we going to update and you can even do maybe if you undo it unsafe it's to to basically undo the first value or you will unhide the profile or your other value at the beginning so basically you're adding a value at the beginning instead of removing shift is removing the value at the very beginning so let's try that one let's save this refresh again and then let's click here and then what happened you can see instantly jumps up to 999 so we add the value at the beginning so this fit shift you can remove the value at us yeah we shift you remove the value at the beginning with Sun shift you add value at the beginning please push you add value at the end of the array and there's also pop so what does pop the top remove the value at the end so let's refresh and now just pay attention so we have the blue line is the first one in the the first data set so 45 will be removed and we'll jump back here to 30 so let's do that as you can see here the moment I click 30 is the last in line and if you do that again consistent you can see we remove the entire chart itself or the line or from the child and that's really how you can use dynamic options discharge is and you can see here there's so there are a lot of options here however if you know a lot about JavaScript arrays or do some research we're going to JavaScript erase you can really play around with that because there are so many functions in there and this basically here is the data set up what is important if you tell me or if you would ask me it is pop for remove last value you have ship equals remove first value but do we have more we have shift not shirt it doesn't make any sense shift of on shift equals add at the value at the very beginning at the very beginning all right all right and finally you have push equals at the value at the very end of the array so that's basically it so if you want to replace the values of course just rename basically the data set or data set equals the values we have which are displayed in the beginning of the video and already some other options yes you can do for example reverse this is something additional let's let's other let's hide this one we don't need that comment that on our Weaver so basically what what happened is we reverse the values of our data so if you do here you see will change suddenly all right as you can see now if this is 45 and if I'm correct this should be 45 yes this is zero and 45 and if you click on that you reverse the value and of course you can do a lot of nice things with it but the four that I displayed here up are essential and of course the one where you say the data set data equal so basically this equals whatever value here and then here variable you should enter unit variable and that's it so if you like this you like all the information you'll be getting charged a let's check out my chart KS course on udemy in there we have a lot of topics we go fairly deep in every aspect of child care as creating all different type of charts creating different coloring these designs creating great gradual gradual design of colors my my secret connections and of course the Ajax connection where you can combine it all together with this

Channel: Excellence in Excel

Views: 96,236

Keywords: Chart.JS, Chart JS, Dynamic, chart.js tutorial, chart js tutorial, using chart.js, chart.js 2.0 tutorial, chart.js 2.0, js chart library, chart.js 2.9, dynamic chart, dynamic charts, chart js tutorial for beginners, dynamic chart js, chart js tutorial youtube, chartjs

Id: 4jfcxxTT8H0

Length: 25min 19sec (1519 seconds)

Published: Wed Oct 10 2018