Grouping the datapoints based on user input in pie chart - CanvasJS JavaScript Charts

Grouping the datapoints based on user input in pie chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
Y Value:
    <input id="yValue" type="number" step="any" placeholder="Enter Y-Value" value=10>
    <button id="updateButton">update</button>

JavaScript

var dps = [{y: 11 },{y: 12 },{y: 13 },{y: 14 },{y: 20 },{y: 6 },{y: 7 },{y: 8 },{y: 9 }];
var chart = new CanvasJS.Chart("chartContainer", {
	title: {
  		text: "Grouping The DataPoints"
  },
  data: [{
      type: "pie",
      indexLabel: "{y}%",
      indexLabelPlacement:"inside",
      dataPoints: dps
    }]
});

chart.render();

function updatePie() {
  var updatedDatapoints = [];
  var combinedYValue = 0;
	var yVal = Number(document.getElementById("yValue").value);
  for(var i=0;i<dps.length;i++){
    if(dps[i].y < yVal){
      combinedYValue = combinedYValue + dps[i].y;
    }
    else{
      updatedDatapoints.push({y:dps[i].y});
    }
  } 
  
  if(combinedYValue !== null)
  		updatedDatapoints.push({y:combinedYValue, color: 'grey'});
  chart.options.data[0].dataPoints = updatedDatapoints;
  chart.render();
}

document.getElementById("updateButton").addEventListener("click", updatePie);