Bar Chart Display label as percentage

Dashboard Designer SharePoint 2013/2016, Office 365 versions
1

I have a horizontal bar chart and I would like to see the display labels as percentage.

Here my chart

image
image1233×427 20.1 KB

chart_export Bar Chart percentage.txt (2.6 KB)

Thank you,

Martine

2

Dear @Martine,
We're not data analysts, so it took us awhile, and it might not be the best way, but it does work. We've used your configuration and calculated percentages in the Data Source > Advanced section with code:

var handlers = {};
handlers.init = function(data, logger) {
  data.items = [
    {value: 0, finger: 'Thumb', red: 0, green: 100},
    {value: 100, finger: 'Index', red: 160, green: 100},
    {value: 160, finger: 'Middle', red: 80, green: 100},
    {value: 100, finger: 'Ring', red: 60, green: 100},
    {value: 80, finger: 'Pinky', red: 40, green: 100}
  ];
  logger.debug('Data is initialized: ', data);
  return true;
}

handlers.requestInit = function(query, logger) {
  return true;
}

handlers.requestSuccess = function(data, logger) {
  return true;
}

handlers.requestError = function(error, logger) {
  return $.Deferred().reject(error);
}

handlers.aggregationSuccess = function(data, logger) {
  var genders = {}
  var categories = []
  for (var i = 0; i < data.items.length; i++) {
    genders[data.items[i]["Gender_x002d_Genre"]] = {}
    genders[data.items[i]["Gender_x002d_Genre"]]["Total"] = 0
  }
  for (var i = 0; i < data.items.length; i++) {
    genders[data.items[i]["Gender_x002d_Genre"]][data.items[i]["Performance_x0020_Rating"]] = 0
    if(categories.indexOf(data.items[i]["Performance_x0020_Rating"]) == -1){
      categories.push(data.items[i]["Performance_x0020_Rating"]);
    }    
  }
  for (var i = 0; i < data.items.length; i++) {
    genders[data.items[i]["Gender_x002d_Genre"]]["Total"] += 1
    genders[data.items[i]["Gender_x002d_Genre"]][data.items[i]["Performance_x0020_Rating"]] += 1
  }
  for (var gen in genders){
    for (var i = 0; i < categories.length; i++){
      genders[gen][categories[i]] = (genders[gen][categories[i]] / genders[gen]["Total"] * 100)
      if (genders[gen][categories[i]]){
				genders[gen][categories[i]] = Math.floor( genders[gen][categories[i]] ) + "%"
      }
      else{
				genders[gen][categories[i]] = "0%"
      }
    }
  }
  for (var i = 0; i < data.items.length; i++) {
    for (var j = 0; j < categories.length; j++){
      if(data.items[i]["Performance_x0020_Rating"] == categories[j]){
				data.items[i]["ID"] = genders[data.items[i]["Gender_x002d_Genre"]][categories[j]]
      }
    }
  }                                                          
  return true;
}


handlers.aggregationError = function(error, logger) {
  return $.Deferred().reject(error);
}

handlers.finish = function(data, logger) {
  logger.debug('Data is processed: ', data);
  return true;
}

We then use the following template in Dashboard > Style > Labels > Template:
#= value == 0 ? value : dataItem.ID #

Here's the result:

image
image926×286 4.32 KB

P.S. It does take quite a bit of time to investigate, we'll get to the other question soon!

3

Thank you for the coding. This is what I am looking for but I need the rating for all, not 100% for male and 100% for female. I tried to adjust but I doesn't work. Can you help me?

Thank you,

4

Dear @Martine,
Should be an easy fix, try this:

handlers.aggregationSuccess = function(data, logger) {
  var total = 0
  var genders = {}
  var categories = []
  for (var i = 0; i < data.items.length; i++) {
    genders[data.items[i]["Gender_x002d_Genre"]] = {}
  }
  for (var i = 0; i < data.items.length; i++) {
    genders[data.items[i]["Gender_x002d_Genre"]][data.items[i]["Performance_x0020_Rating"]] = 0
    if(categories.indexOf(data.items[i]["Performance_x0020_Rating"]) == -1){
      categories.push(data.items[i]["Performance_x0020_Rating"]);
    }    
  }
  for (var i = 0; i < data.items.length; i++) {
    total += 1
    genders[data.items[i]["Gender_x002d_Genre"]][data.items[i]["Performance_x0020_Rating"]] += 1
  }
  for (var gen in genders){
    for (var i = 0; i < categories.length; i++){
      genders[gen][categories[i]] = (genders[gen][categories[i]] / total * 100)
      if (genders[gen][categories[i]]){
				genders[gen][categories[i]] = Math.floor( genders[gen][categories[i]] ) + "%"
      }
      else{
				genders[gen][categories[i]] = "0%"
      }
    }
  }
  for (var i = 0; i < data.items.length; i++) {
    for (var j = 0; j < categories.length; j++){
      if(data.items[i]["Performance_x0020_Rating"] == categories[j]){
				data.items[i]["ID"] = genders[data.items[i]["Gender_x002d_Genre"]][categories[j]]
      }
    }
  }                                                          
  return true;
}