Formatting jqplot Pie Chart to drop trailing zeros from percentage labels.

It also shows how to make legend text correspond to the swatch color (the square in front of the series' text).

by Boro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pieRenderer.min.js"></script>
<div id="chart">

</div>

CSS

#chart {
  width: 400px;
  height: 400px;
}

//jquery.jqplot.css

/*rules for the plot target div.  These will be cascaded down to all plot elements according to css rules*/

.jqplot-target {
  position: relative;
  color: #666666;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 1em;
  /*    height: 300px;
    width: 400px;*/
}


/*rules applied to all axes*/

.jqplot-axis {
  font-size: 0.75em;
}

.jqplot-xaxis {
  margin-top: 10px;
}

.jqplot-x2axis {
  margin-bottom: 10px;
}

.jqplot-yaxis {
  margin-right: 10px;
}

.jqplot-y2axis,
.jqplot-y3axis,
.jqplot-y4axis,
.jqplot-y5axis,
.jqplot-y6axis,
.jqplot-y7axis,
.jqplot-y8axis,
.jqplot-y9axis,
.jqplot-yMidAxis {
  margin-left: 10px;
  margin-right: 10px;
}


/*rules applied to all axis tick divs*/

.jqplot-axis-tick,
.jqplot-xaxis-tick,
.jqplot-yaxis-tick,
.jqplot-x2axis-tick,
.jqplot-y2axis-tick,
.jqplot-y3axis-tick,
.jqplot-y4axis-tick,
.jqplot-y5axis-tick,
.jqplot-y6axis-tick,
.jqplot-y7axis-tick,
.jqplot-y8axis-tick,
.jqplot-y9axis-tick,
.jqplot-yMidAxis-tick {
  position: absolute;
  white-space: pre;
}

.jqplot-xaxis-tick {
  top: 0px;
  /* initial position untill tick is drawn in proper place */
  left: 15px;
  /*    padding-top: 10px;*/
  vertical-align: top;
}

.jqplot-x2axis-tick {
  bottom: 0px;
  /* initial position untill tick is drawn in proper place */
  left: 15px;
  /*    padding-bottom: 10px;*/
  vertical-align: bottom;
}

.jqplot-yaxis-tick {
  right: 0px;
  /* initial position untill tick is drawn in proper place */
  top: 15px;
  /*    padding-right: 10px;*/
  text-align: right;
}

.jqplot-yaxis-tick.jqplot-breakTick {
  right: -20px;
  margin-right: 0px;
  padding: 1px 5px 1px 5px;
  /*    background-color: white;*/
  z-index: 2;
  font-size: 1.5em;
}

.jqplot-y2axis-tick,
.jqplot-y3axis-tick,
.jqplot-y4axis-tick,
.jqplot-y5axis-tick,
.jqplot-y6axis-tick,
.jqplot-y7axis-tick,
.jqplot-y8axis-tick,
.jqplot-y9axis-tick {
  left: 0px;
  /* initial position untill tick...

JavaScript

$(document).ready(function() {
  $.jqplot.postDrawHooks.push(function() {
    var swatches = $('table.jqplot-table-legend tr td.jqplot-table-legend-swatch');
    var labels = $('table.jqplot-table-legend tr td.jqplot-table-legend-label');
    labels.each(function(index) {
      //turn the label's text color to the swatch's color
      var color = $(swatches[index]).find("div div").css('background-color');
      $(this).css('color', color);
      //set type name as the label's text
      $(this).css('white-space', 'nowrap'); //otherwise Heavy Industry M12 will be in 3 lines
      $(this).html(types[index]);
    });
  });
  var types = ['Heavy Industry M12', 'Retailor', 'Bullseye']; //, "OI"];
  var counts = [19, 11, 17]; //, 20];
  var total = 0;
  for (var i = 0; i < counts.length; i++) {
    total += counts[i];
  }
  var data = [];
  var precision = 2;
  var percentageSoFar = 0;
  for (var i = 0; i < counts.length; i++) {
    var count = counts[i];
    var percentage = parseFloat((count / total * 100).toFixed(precision));
    if (i == counts.length - 1) {
      /* 
       * if we would use just '100 - percentageSoFar' instead 
       * in case we add 20 as the 4th value to counts array 
       * we will get 29.849999999999994
       */
      percentage = parseFloat((100 - percentageSoFar).toFixed(precision));
      console.log("last count is = " + count + "; percentage is = " + percentage);
    }
    percentageSoFar += percentage;
    var row = [percentage, count];
    data.push(row);
  }
  var plot = jQuery.jqplot('chart', [data], {
    seriesDefaults: {
      renderer: jQuery.jqplot.PieRenderer,
      rendererOptions: {
        // Turn off filling of slices.
        fill: false,
        showDataLabels: true,
        // Add a margin to seperate the slices.
        sliceMargin: 4,
        // stroke the slices with a little thicker line.
        lineWidth: 5,
        dataLabelPositionFactor: 0.75,
        dataLabels: 'label',
        dataLabelFormatString:...