pivot() demo

https://github.com/nicolaskruchten/pivottable

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.13.0/pivot.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.13.0/pivot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.6.0/tips_data.min.js"></script>
<div id="output"></div>

CSS

body {
  font-family: Verdana;
}

JavaScript

var sum = $.pivotUtilities.aggregatorTemplates.sum;
var average = $.pivotUtilities.aggregatorTemplates.average;
var numberFormat = $.pivotUtilities.numberFormat;
var intFormat = numberFormat({digitsAfterDecimal: 0});

$("#output").pivot(
  [
  
    {color: "blue", shape: "circle", value: 8},
    {color: "red", shape: "triangle", value: 2},
    {color: "blue", shape: "circle", value: 20},
    {color: "red", shape: "triangle", value: 4}
  ],
  {
    rows: ["color"],
    cols: ["shape"],
    aggregator: average(intFormat)(["value"])
  }
);