How to Recalculate Percentages if a Slice is Hidden in Pie Chart in Chart js

in this video we're going to focus on how we can create these nice percentages and recalculate them as you can see the moment we remove certain values here until we have only one value we should show 100 and of course if we start selecting again we will be adding more and more values and the percentages we calculate back into its original state so let's start to explore how we can do this with chart js in this video we're going to answer one of the viewers question which is how to recalculate percentages if a slice is hidden in the pie chart in charges we're going to use here the charges plug-in labels for that so this question came from one of my other videos about how to add percentages and values in the data labels in pie chart and if you scroll down here you can see here the question came from muhammad cavari so a special thank you to muhammad for asking the question and this is what muhammad asked thanks for the for your video i got a question about adding percentages after hiding one slice i mean if i click on a legend it hides the slice from the pie chart but it doesn't or does not add its percentages to the other slice on the pie chart and i wonder if this is possible all right so let's start to explore how we can do this so the first thing what we're going to do here is going to get our default code to get our default code make sure you go to charges3.com getting started we have default code you might notice this here for some reason my google chrome gives this error but anyway we're going to copy this chunk of code here and once we copy that we go to paste it in here once i did that what i will do is i'll just cut out this section of the title and put it in there all right so then save that refresh there you are so now we have our nice bar chart here of course we want a pie chart so let's convert this immediately into a pie chart so i save this and of course remove the scales because the pie chart doesn't have any skills save that refresh there we are all right so a pie chart is slightly too big so let's reduce the size to 500 pixels here save that refresh there you are that is a bit better so now let's start to use the specific plug-in or the specific labels plug-in to put in the percentages in here and the reason i use this plug-in because this plug-in is quite easy for any percentage it's quite powerful but we will do a lot of customization on it so it doesn't matter really however i do recommend you to check out this plugin because this plugin is extremely powerful for a pie chart anyway we're going to go to this specific link here github and you see here david david or david violante has created this plugin or specifically let me explain a bit more he forked it from a other developer here and forking means getting the code from that and then continue on with the development and the reason why is this one here is the old version only supports until charges too and then david eventually created a upgraded version sporting charcus 3. so that's why i'm going to grab this here so to get the link here just go here you'll see this and you will see here is initials dv that's very important because that means that's the latest version that you have so what i'm going to do is i'm going to just copy that put it in here and i'm going to copy the script tag here and just cut out this and put it in here make sure the plugin should be loaded after the charger as library this is very important so we're going to save this now once we save that refresh it takes some time to load and then you can see already instantly it shows percentages so in our case we don't need these percentages because look what happened if i do this it doesn't recalculate accordingly because if you would remove everything except one it should be basically 100 which is not the case so let's start and work on that so what we're going to do here is first of all we go in the options we're going to grab the plugin functionality so we're going to say your plugins and in the plugins i'm going to say here labels and labels is a object or namespace object that is created because of the specific plugin that we have loaded now so this is available here now so what we're going to do here is the following i'm going to say here render and with render we can basically put in percentages values and functions in our case we need functions because we will have to do a few items in here so let me first work on that and we're going to say account text the new context let me do this so we have here a callback and if i would say you just return here we could return anything we want in this case we could say percentages but what i will do with you for now i'll just say here only the context console.log context when i save this and i refresh open developer tab you will see we get a lot of objects here it's being loaded wide because of all the animation and all the differences here it loads but also once you hover over it it will trigger something so if you hover on this specific blue one you should grab here the values am i correct but well it looks true in all of them so then in this case doesn't matter but you can see here let's say tuesday would be probably the blue one has a value of 12 you can see here the percentage is already pre-calculated so that's very nice however the percentages calculate based on every item here and we don't want this because we have an issue here so what i want to do now first is how can we grab all these values get the sum of it but also make sure that if we have an item hidden how do we calculate that so what i'm going to do here is i'm going to make very simple a function trigger so this is necessary because we cannot get out of this specific area or here we cannot get out of that and what i mean by that i need to get the data here and i need to find a way to check if something is being visible yes or no and for that i cannot be within this specific functionality here or in this objects here because they don't give me the access to that so what i'm going to do here is i'm going to create a function or basically i'll just say here this will be a new function let's say here this function will be show show data sound like that that's all right and then what i want to do here is before we even do something we just say here show data functionality and this show data functionality for now basically does nothing yet but eventually we will be grabbing that so what we're going to do is the following we're going to say here in the show data all right and i guess here the show data we have to use here this that that will be probably the best and then do console.log so i'm going to show you now it should be triggered here so if i say here that return what i'm going to return is now i'll just say yes save that put your semicolon semicolon just to be neat refresh you can see here if i move over it says yes and it shows yes so this means if i remove this here we have communication from a function outside with the labels object inside all right so this is very very important once we have this connection here or communication we can now start to do here something because as i indicated i need to grab these data here which you can do in here but what i also need to do is to check if they're visible yes or no for that i need to be outside and this is the reason why so what i'm going to do here is the following i'm going to say here my chart dot and what i'm going to do is basically i want to go to my chart and then here well in this case i can just get immediately items so i say get data visibility and here what i want to do is here because this will say check if a data is visible yes or no and then we're going to say here let's say zero zero would indicate here this item remember this is not related to data set because all of these are data sets here and with a pie chart they have a different structure so if you're very familiar with data structures i have another videos about that explains that data structures data structures for pie chart and donor chart which different compared to the others because they have no access so what we're going to do now here is basically grab the specific item here let's say this one and if i save this now refresh oh i need to of course do a console.log what i'm going to do here is i will just say return this or do a console.log from now here just to make sure that we have any kind of visual what's going on there save that we maintain this here still because it should still trigger the function because if i hide this this function here below is not being triggered anywhere so we need to have at least this function active with or without console doesn't matter so you can see here it says true all right so what i'm going to do here and the return maybe if i just grab this it will eventually just show yeah i think well not maybe i'm 100 certain of that this should show that there you are so this is number if i'm not mistaken number zero so that would mean if i say the red one there you are it converts to false true false true false but here this stays all same because we didn't adjust any of these so now we have basically the what i would say the way to check if something is active or not and because of that we can now recalculate this we just grab these data here with the if statement we loop it through and then we say if data index zero is active or not or true or false depending on this so what i'm going to do here is the following let's say here a for loop first and what i want to do here before i even do the for loop i'm going to say here let and this i will call here the total sum the total sum would be eventually the total amount by default this here should be 69 that's the default value of them all together so what i want to do here is the following you say here four and then we say the following we say here let i equal zero or what we could do this is apparently more better because it will avoid excess code in the loop we just say here we already put that in here or we define the iron here we just say i semicolon the reason why we're doing this is more better because then you don't have to loop it seven times this entire multiple characters we just only have to loop a single character all right so what we're going to do now is we say here i then we want to keep on looping this as long as that we want to check here is this is our indicator here so what i'm going to say here is as long as my chart does config dot data if you're wondering how i'm getting there you have here my chart config data and from data we go here to data sets and this data set is data set zero so index zero and here data so we have here the data already dot data sets zero then we have here dot data and then what i want to grab here is the dot length so we look at true as long as the length is this and this length here is seven so we keep on looking through it until it is equal to seven or if if it's larger if at least or if the i would be smaller than this so that's very important all right so now what we're going to do here is of course semicolon i plus plus that we're done here so what i want to do now here is this feasibility will be added with the total sum so what i'm going to say here and if state and this if statement will say this if here we say i because we want to look through all these values if i would be equal to uh oh hold on what am i doing here is the if statement so if i is equals trick to true in that case i want to say total sum this will be then a plus equal to whatever the value would be in our data so i'm going to copy this about this let me say here i once we have this then we're done here with the if statement and there we are all right so once we have this here what i want to do here for now it's just to say your console log let's say total sum so or i can even do a return here as well you can just save that refresh all right uh let's just remove this one then we have the return already that's correct you can see here we get this all right so if i then click on this there was thursday and thursday was number nine if i was taking c as you can see you can see here the numbers is are changing so from there on or from that point on we can start to calculate the percentages so we have this here and we have now this communication intact for my column and then here's a semicolon i'm doing this it's not necessary in javascript although i do like to use this because i noticed that in php you need to do this if not you get a breaking uh or the code gives an error and i noticed that if i stop doing it in javascript i will i'm applying that habit also on php so i i just do it everywhere just to make sure that i'm consistent with my coding so what i want to do here is the following i need to return here what i need to return well basically first of all we have to show data this this is basically the total sum value so that's the communication that we have so if i show this now here seven columns save that refresh all right you can see it takes some time and the reason why it's taking some time here and you might notice it as well because we use here the unpackaged or unpacked uh javascript file so what happens it needs to unpack it first is because basically zip filed or something like that or g shift and then it just takes more time anyway doesn't matter so much you can see here we get this value but if i remove this as you can see all the values are now starting to match nicely beautiful so now we have this 30 and here as well 30 all right that's fine that's not incorrect because this is the total sum right now so we grab the total sum or at least we have the total sum if i have now the context here let's go back here to the context i'm going to remove this save that refresh you can see here we get the numbers and what we want to get this you're not the percentage but we want the absolute value which is number 12. so number 12 divided by the item here will give us a percentage value so what i'm going to do here is basically let's say your constant percentage and this percentage will be basically context dot value here dot value and then we say here divides by this beautiful functionality here and then we can say here probably if we get percentage we need to do probably multiply 100 and if we do this we're going to grab this here if i save this later we need to maybe uh fix the amount of decimals there you are but we get these numbers now if i'm going to remove this you can see here it starts to look better you're going to move more move more you can see it gradually it increases until we should have 100 on the single item there you are so now this works beautiful so all what i want to do here is the following dot and then we say here to fix one and i will just say here for concatenation plus concatenate a string a string value with the percentage symbol if i save this now refresh you can see here now there we are so now we grab all these percentages we grab everything here there it shows nicely all right and that's basically back here how to do it so if you enjoyed this video and maybe you want to learn even more about this specific plugin i highly recommend to check out the charges labels plugin i have an entire series here covering a lot of functionalities because it's a quite powerful one especially if you're planning to use pi and donut chart so i highly recommend it for that one as well to watch

Channel: Excellence in Excel

Views: 42

Keywords: how to recalculate percentage if a slice is hidden in pie chart in chart js, chartjs-plugin-labels, chartjs-plugin-labels in chart js, chartjs-plugin-labels by davide violante, chartjs, chart.js, chart js, chart js tutorial, chartjs 3, chart js 3, chart.js 3, chartjs 3.6.2, chart js 3.6.2, chart.js 3.6.2

Id: vlbIyalyPLk

Length: 17min 33sec (1053 seconds)

Published: Thu Dec 16 2021