CODEWITHSUNDEEP
javascriptchart.js
user794846
user794846

Reputation: 1931

How to group smaller Pie Chart slices together to Improve Readability in chartjs

I would like to group data that is under a certain threshold of say 10% percent into a single slice called others. How would i go about this in Chartjs?

Note there only the first dataset is show in the snippet (ADVERTS_PUBLISHED) but the chart can be updated with any of them in the actual page.

var ctx = document.getElementById('myChart').getContext('2d');

var labels = ["Caterer", "INDEED", "Sarova Website", "Send to Friend", "alexandre-creed.com", "amdas.co.uk", "catabaseuk.co.uk", "cerecruit.co.uk", "el8recruitment.com", "equinoxresourcing.co.uk", "gatewayjobs.co.uk", "hotelstaffpec.co.uk", "jwrecruitment.co.uk", "marshallhr.co.uk", "marshallhr.com (Sarova)", "momentumrecruitment.com", "peoplebank.com", "ph-recruitment.co.uk", "platinum-hospitality.co.uk", "q", "talenthive.co.uk", "towngate-personnel.co.uk"];

var dataSet = {
  "ADVERTS_PUBLISHED": ["102", "130", "153", "2", "2", "2", "2", "4", "2", "5", "2", "4", "3", "8", "4", "4", "4", "1", "3", "4", "1", "2"],
  "VIEWS": ["1642", "10566", "45269", "7", "4", "1", "11", "9", "11", "12", "5", "0", "14", "6", "3", "13", "19", "2", "8", "3", "2", "2"],
  "CLICKS": ["1992", "3628", "4458", "4", "2", "2", "7", "3", "11", "5", "6", "9", "10", "15", "10", "4", "34", "10", "10", "3", "0", "8"],
  "SUBMITTED": ["1101", "877", "1290", "2", "3", "2", "10", "14", "11", "5", "5", "7", "6", "14", "8", "6", "17", "7", "9", "4", "1", "6"],
  "PENDING": ["115", "26", "93", "0", "1", "0", "7", "3", "6", "2", "0", "0", "4", "8", "0", "3", "0", "0", "1", "0", "1", "0"],
  "FILTERED": ["546", "493", "764", "1", "2", "2", "9", "12", "10", "5", "4", "5", "5", "12", "2", "3", "4", "6", "4", "0", "1", "5"],
  "SHORTLISTED": ["37", "23", "32", "1", "0", "0", "0", "1", "0", "2", "0", "1", "0", "5", "0", "0", "0", "0", "2", "0", "0", "1"],
  "REGRETTED": ["103", "28", "52", "0", "1", "0", "1", "6", "5", "3", "0", "2", "1", "1", "0", "0", "1", "3", "1", "0", "0", "2"],
  "INTERVIEWED": ["62", "45", "88", "0", "0", "0", "1", "2", "2", "2", "0", "3", "0", "3", "0", "2", "0", "4", "0", "0", "0", "1"],
  "OFFERED": ["4", "10", "20", "0", "0", "0", "0", "0", "0", "0", "0", "3", "0", "2", "0", "0", "0", "0", "0", "0", "0", "0"],
  "OFFERED_AND_DECLINED": ["0", "0", "5", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"],
  "REGRETTED_AND_COMM": ["587", "334", "533", "0", "0", "2", "1", "1", "2", "1", "0", "1", "2", "4", "0", "1", "0", "0", "0", "2", "0", "0"],
  "ACTUAL_HIRED": ["4", "2", "8", "0", "0", "0", "0", "0", "0", "0", "0", "2", "0", "1", "0", "0", "0", "0", "0", "0", "0", "0"]
};

var colors = [];
labels.forEach((element) => {
  var hex_color = getRandomColorHex();
  colors.push(hex_color);
});

function getRandomColorHex() {
  var hex = "0123456789ABCDEF",
    color = "#";
  for (var i = 1; i <= 6; i++) {
    color += hex[Math.floor(Math.random() * 16)];
  }
  return color;
}



myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: labels,
    datasets: [{

      data: dataSet.ADVERTS_PUBLISHED,
      backgroundColor: colors,
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: true,

    hover: {
      onHover: function(e, el) {
        $("#myChart").css("cursor", e[0] ? "pointer" : "default");
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          autoSkip: true
        }
      }]
    },
    title: {
      display: true,
      text: 'Adverts Published'
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <canvas class="chart__graph" id="myChart"></canvas>
</div>

Upvotes: 2

Views: 1841

Answers (1)

uminder
uminder

Reputation: 26150

The following code computes the array named slices, that holds objects with properties label and value for all pie slices to be included in the chart. All values below 1 percent are summed and hold by the object labeled "Others".

This code used convenient methods of Array such as reduce(), map(), find(), concat() and push().

const values = dataSet.ADVERTS_PUBLISHED.map(v => Number(v));
const valueSum = values.reduce((a, b) => a + b, 0);
const thresholdPercent = 1;
const slices = values.map((v, i) => ({ label: labels[i], value: v }))
  .reduce((accumulator, currObj) => {
    const percent = 100 * currObj.value / valueSum;
    if (percent < thresholdPercent) {
      const others = accumulator.find(o => o.label == 'Others');
      if (!others) {
        return accumulator.concat({ label: 'Others', value: currObj.value });
      }
      others.value += currObj.value;
    } else {
      accumulator.push(currObj);
    }
    return accumulator;
  }, []);

From the slices array, I extract arrays of labels and values and assign them to data.labels and data.datasets[0].data of the chart configuration as follows:

data: {
  labels: slices.map(o => o.label),
  datasets: [{
    data: slices.map(o => o.value),

Please have a look at your amended code below:

var labels = ["Caterer", "INDEED", "Sarova Website", "Send to Friend", "alexandre-creed.com", "amdas.co.uk", "catabaseuk.co.uk", "cerecruit.co.uk", "el8recruitment.com", "equinoxresourcing.co.uk", "gatewayjobs.co.uk", "hotelstaffpec.co.uk", "jwrecruitment.co.uk", "marshallhr.co.uk", "marshallhr.com (Sarova)", "momentumrecruitment.com", "peoplebank.com", "ph-recruitment.co.uk", "platinum-hospitality.co.uk", "q", "talenthive.co.uk", "towngate-personnel.co.uk"];

var dataSet = {
  "ADVERTS_PUBLISHED": ["102", "130", "153", "2", "2", "2", "2", "4", "2", "5", "2", "4", "3", "8", "4", "4", "4", "1", "3", "4", "1", "2"],
  "VIEWS": ["1642", "10566", "45269", "7", "4", "1", "11", "9", "11", "12", "5", "0", "14", "6", "3", "13", "19", "2", "8", "3", "2", "2"],
  "CLICKS": ["1992", "3628", "4458", "4", "2", "2", "7", "3", "11", "5", "6", "9", "10", "15", "10", "4", "34", "10", "10", "3", "0", "8"],
  "SUBMITTED": ["1101", "877", "1290", "2", "3", "2", "10", "14", "11", "5", "5", "7", "6", "14", "8", "6", "17", "7", "9", "4", "1", "6"],
  "PENDING": ["115", "26", "93", "0", "1", "0", "7", "3", "6", "2", "0", "0", "4", "8", "0", "3", "0", "0", "1", "0", "1", "0"],
  "FILTERED": ["546", "493", "764", "1", "2", "2", "9", "12", "10", "5", "4", "5", "5", "12", "2", "3", "4", "6", "4", "0", "1", "5"],
  "SHORTLISTED": ["37", "23", "32", "1", "0", "0", "0", "1", "0", "2", "0", "1", "0", "5", "0", "0", "0", "0", "2", "0", "0", "1"],
  "REGRETTED": ["103", "28", "52", "0", "1", "0", "1", "6", "5", "3", "0", "2", "1", "1", "0", "0", "1", "3", "1", "0", "0", "2"],
  "INTERVIEWED": ["62", "45", "88", "0", "0", "0", "1", "2", "2", "2", "0", "3", "0", "3", "0", "2", "0", "4", "0", "0", "0", "1"],
  "OFFERED": ["4", "10", "20", "0", "0", "0", "0", "0", "0", "0", "0", "3", "0", "2", "0", "0", "0", "0", "0", "0", "0", "0"],
  "OFFERED_AND_DECLINED": ["0", "0", "5", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"],
  "REGRETTED_AND_COMM": ["587", "334", "533", "0", "0", "2", "1", "1", "2", "1", "0", "1", "2", "4", "0", "1", "0", "0", "0", "2", "0", "0"],
  "ACTUAL_HIRED": ["4", "2", "8", "0", "0", "0", "0", "0", "0", "0", "0", "2", "0", "1", "0", "0", "0", "0", "0", "0", "0", "0"]
};

var colors = [];
labels.forEach((element) => {
  var hex_color = getRandomColorHex();
  colors.push(hex_color);
});

function getRandomColorHex() {
  var hex = "0123456789ABCDEF",
    color = "#";
  for (var i = 1; i <= 6; i++) {
    color += hex[Math.floor(Math.random() * 16)];
  }
  return color;
}

const values = dataSet.ADVERTS_PUBLISHED.map(v => Number(v));
const valueSum = values.reduce((a, b) => a + b, 0);
const thresholdPercent = 1;
const slices = values.map((v, i) => ({ label: labels[i], value: v }))
  .reduce((accumulator, currObj) => {
    const percent = 100 * currObj.value / valueSum;
    if (percent < thresholdPercent) {
      const others = accumulator.find(o => o.label == 'Others');
      if (!others) {
        return accumulator.concat({ label: 'Others', value: currObj.value });
      }
      others.value += currObj.value;
    } else {
      accumulator.push(currObj);
    }
    return accumulator;
  }, []);

myChart = new Chart(document.getElementById('myChart'), {
  type: 'pie',
  data: {
    labels: slices.map(o => o.label),
    datasets: [{
      data: slices.map(o => o.value),
      backgroundColor: colors,
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: true,
    hover: {
      onHover: function(e, el) {
        $("#myChart").css("cursor", e[0] ? "pointer" : "default");
      }
    },
    title: {
      display: true,
      text: 'Adverts Published'
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div>
  <canvas class="chart__graph" id="myChart"></canvas>
</div>

Upvotes: 1

Related Questions