Calculating Bar Chart Percentage

by

👍:0

So here is my solution. I’m new to javascript so I’m not sure if this is the most efficient solution. I calculated the percentage outside of drawing my chart/canvas and then I called the array value to be used in the options section to display in the multiTooltipTemplate. Since the multiTooltipTemplate display varies depending on where the user hovers over the graph, I added several if statements to display the appropriate percentage. 

var invAvailData = [500000, 300000]; //sample data
var availPercent = [];
   for (var i=0; i < invAvailData.length; i++) {
       availPercent[i] = Math.round(invAvailData[i]/invDailiesData[i] * 100);
   }

... Previous chart/canvas code from above question goes here. Then the following goes in the options section.

multiTooltipTemplate: function(label) {
            console.log('label: ',label);
            if (label.datasetLabel === "Goal" || label.datasetLabel === "Actual"){
              if (label.value < 1000000) {
                return label.datasetLabel + ': $' + (Math.abs(parseInt(label.value))/1.0e+3).toFixed(3).toLocaleString().replace(',', '.') + ' K'
              }
              if (label.value >= 1000000) {
                return label.datasetLabel + ': $' + (Math.abs(parseInt(label.value))/1.0e+6).toFixed(3).toLocaleString().replace(',', '.') + ' M'
              }
            } 
            if (label.datasetLabel === "Available"){
              if (label.label === "Q1") {
                return label.datasetLabel + ': ' + availPercent[0] + '%'
              }
              if (label.label === "Q2") {
                return label.datasetLabel + ': ' + availPercent[1] + '%'
              }
              if (label.label === "Q3") {
                return label.datasetLabel + ': ' + availPercent[2] + '%'
              } 
              if (label.label === "Q4") {
                return label.datasetLabel + ': ' + availPercent[3] + '%'
              }       
            }  
          },

Leave a comment