FastPivot and ChartJS

Example of using FastPivot with tabular JSON data.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>
<p>
Made with <a href="https://github.com/techslides/FastPivot">FastPivot</a> and <a href="http://www.chartjs.org/docs/#doughnut-pie-chart-example-usage">ChartJS</a
</p>

JavaScript

//https://raw.githubusercontent.com/techslides/FastPivot/master/fastpivot.min.js
function fastpivot(a){"use strict";var t={};if("string"!=typeof a&&a.length>0){var l=Object.keys(a[0]),n={};l.forEach(function(a){n[a]={},n[a]._labels=[],n[a]._labelsdata=[],n[a]._data={}}),a.forEach(function(a,t){l.forEach(function(t){var l=a[t];n[t]._data[l]=(n[t]._data[l]||0)+1,n[t]._labels[l]=null})}),l.forEach(function(a){for(var t in n[a]._data)n[a]._labelsdata.push(n[a]._data[t]);n[a]._labels=Object.keys(n[a]._labels)}),t=n}return t}

var mydata='[{"id":"1","make":"Audi","color":"","age":2015},{"id":"2","make":"Toyota","color":"green","age":2010},{"id":"3","make":"Honda","color":null,"age":2013},{"id":"4","make":"Audi","color":"red","age":2011},{"id":"5","make":"BMW","color":"blue","age":2012},{"id":"6","make":"Audi","color":"red","age":2012},{"id":"7","make":"Honda","color":null,"age":2013},{"id":"8","make":"BMW","color":"blue","age":2011},{"id":"9","make":"Audi","color":"red","age":2010},{"id":"10","make":"Toyota","color":"red","age":2012}]';

var ctx = document.getElementById("c").getContext("2d");

var json = JSON.parse(mydata);
var data = fastpivot(json);

var pieData = {
    labels: data["make"]._labels,
    datasets: [
        {
            data: data["make"]._labelsdata,
            backgroundColor: ["#FF6384","#36A2EB","#FFCE56","#000"]
        }]
};

var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: pieData
});