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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div id="output"></div>
CSS
body {font-family: Verdana;}
.node {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
JavaScript
$(function () {
var derivers = $.pivotUtilities.derivers;
var renderers = $.extend($.pivotUtilities.renderers,
$.pivotUtilities.d3_renderers, this.ex);
$("#output").pivotUI(
[{
"bloc": "1B",
"section": "AESAP",
"date": "2018-05-02",
"inscrits": "2",
"rdv": "",
"Ann\u00e9e": "117"
}, {
"bloc": "1B",
"section": "AESAP",
"date": "2018-05-01",
"inscrits": "2",
"rdv": "",
"Ann\u00e9e": "117"
}, {
"bloc": "1B",
"section": "AESAP",
"date": "2018-05-01",
"inscrits": "2",
"rdv": "",
"Ann\u00e9e": "118"
}, {
"bloc": "1B",
"section": "AESFF",
"date": "2018-05-01",
"inscrits": "3",
"rdv": "",
"Ann\u00e9e": "118"
}, {
"bloc": "1B",
"section": "AESFR",
"date": "2018-05-01",
"inscrits": "1",
"rdv": "",
"Ann\u00e9e": "118"
}, {
"bloc": "1B",
"section": "AESFR",
"date": "2018-05-01",
"inscrits": "5",
"rdv": "",
"Ann\u00e9e": "117"
}, {
"bloc": "1B",
"section": "AESLG",
"date": "2018-05-01",
"inscrits": "7",
"rdv": "",
"Ann\u00e9e": "118"
}, {
"bloc": "1B",
"section": "AESMA",
"date": "2018-05-01",
"inscrits": "5",
"rdv": "",
"Ann\u00e9e": "118"
}, {
"bloc": "1B",
"section": "AESSE",
"date": "2018-05-01",
"inscrits": "7",
"rdv": "",
"Ann\u00e9e": "118"
}, {
"bloc": "1B",
"section": "PRESC",
"date":...