Add filters to your chart using chart.js

how we can add a filter to this type of chart and to any any type of chart and we can get the data for our analysis like this we will see that but after they into happy one this is so breath and you are watching from the realistic so on this channel you will get to know about the programming languages the framework and all about the algorithm so please consider subscribing if you haven't yet so on today's video we'll see how I can apply filter on this type of charts and all so what the charts here is this is it data of two students this is a dummy data and the admission per month I know admission happens only once in a year for understanding it will be good so suppose we want to see in which month the admission of the student is less than 200 okay so you can see in Feb and April for school 1 and in July for both the school ok so we want that less than will do that less than then will see 200 and then applied you can see the data exchanged with all the animation and all and if you don't know how to create a chart or how to give this type of animation using charges I have a video I will link it here you can go there and watch so I will change that again so I'm greater than 0 so all data will come so this video is asked by a viewer so I thought if it's you yeah and this is a very good scenario that everybody will add some filter to their charts so I thought to make every on dit how there are create a bar chart and how to use that in your application I already have a video I will link it there you can watch that one so here just as I will just explain a little bit so I have a in the HTML I have a canvas here which which has a ID of bar okay and this is for the drop-down and the button is a normal angular stuff so here what I am doing is on change of the model I am setting less than or greater than on in the input I am taking the value of the the amount like hundred two hundred three hundred or any user input and the button I am clicking apply filter so it's good now I guess that was very small so as you can see here I just explained this is the one and here if you go to the so here what I am doing is I created it chart data so this line of code is used for to create a array of random integer and the length of the rh8 yeah okay so here and in the chart I am in Sun setting a chart or JS i imported here that you already know from the previous videos so this is that this is the ID of ID which are given here and and as you can see responsive true display true what is a text you are seeing it here Jim student animation data and school one school is two is the our data set so that like how like I just instance a data here the data set one which is coming from here data or suit one data set to this is the background color and fill falls and all that you know this is to remove data the update charge is the older methods and didn't used it here now we came to the point so when a user click on apply filter like here so we'll go for data less then suppose 300 so when you apply this effect all these things happening inside the apply filter method okay so for a short note I selected the less than or greater than so that I can compare then I give the limits as hold limit for the data to be filtered and and on this apply we are doing the operation here on call on starting of that method I am instantiating these values as the previous value I will say the region Y well if you have multiple data sets you can run in a loop and can instance a those things so in a forest loop omit rating through the data and they're doing the operation so here I am checking if this is greater than get it then means this one like if you see greater than so if it is greater than then in that I'm running the map operation and I'm returning if that value is greater than equal to value this does greater than I consider either getter than equal to I am taking the evening this is greater than value I am returning the value as I am returning zero I will let you know why I'm returning zero so you you may ask why I am using map not filter but if you apply filter to the data what it will do it will reduce the length of your dataset array so like here if you have dataset array of length 8 and each index it's mapped with the index of the level so if you apply filter and that filter like I applied here less than hundred a have only April and May month of a single school then this array become of length 2 then all the data will be available in the Jan and Feb month if I go and just change and so it to you so suppose we'll go for greater than 350 okay so I'll go for that because I add the condition change the condition greater than so if I go for this one as you see all the data came back to the Jan Feb and March and April as well because the problem that I already explained now you have to add filter you reducing the length of the data set like the data and that index is mapped with your levels so that's the reason I use map here if the value is they are returning the value else I'm making the value at zero so that it will be go down to zero so that we can only see the data which is matches the filter condition and after the filtration and all I am just updating the chart here so that the chart will be get updated and you can see the animation and all I forgot to mention oh how why I did this one I guess this is self explanatory because on every filter we are filtering with the data we have from the beginning okay so now I am just on every filter I am assigning a data here and on that whole data we are running the filter so that's it for today guys today we saw how you can apply a filter to a bar chart you can use the same principle in the line chart donor chart bubble chart combination of bar and line chart and the pie chart all so just happened the basic concept here is you just need to update the data set like the data set this data of a data set of any type of chart if the bubble you need to consider in it to change the X in XY coordinate and the width of the in the weight of the bubble and just run the update method here so that you can get the filter done okay so please like the video if you liked it and please subscribe to the channel if you haven't yet and please share the video my girfriend please give some valuable commits in the comment section below we are going to meet in the next video till that stay happy bye-bye [Music]

Channel: Fun Of Heuristic

Views: 20,069

Keywords: chart, chart.js, chart.js in angular, filter in chart.js, chart.js filter, chart filter, angular charts, angular charts.js, angular chart.js tutorial, Angular, Angular 7, filter, filter in angular, filter chart, chart.js tutorial, js chart library, how to add filter in chart, how to add filters in chart.js, char.js filter, add filter to chart.js, add filter to graph, angular graph, angular graph filter, html5 chart, chart.js 2.0, chart.js 2.0 tutorial

Id: luriv1qW6b8

Length: 8min 46sec (526 seconds)

Published: Wed Mar 06 2019