pivot() demo

https://github.com/nicolaskruchten/pivottable

by gibito

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 mps = [
          {country: "Italy", revenues: "100", costs: "-50", year: "2020"},
          {country: "Italy", revenues: "200", costs: "-100", year: "2021"},
          {country: "Italy", revenues: "200", costs: "-100", year: "2020"},
          {country: "Italy", revenues: "200", costs: "-100", year: "2021"},
          {country: "Italy", revenues: "200", costs: "-100", year: "2020"},
          {country: "Italy", revenues: "200", costs: "-100", year: "2021"},
          {country: "Italy", revenues: "200", costs: "-100", year: "2020"},
          {country: "Italy", revenues: "200", costs: "-100", year: "2021"},
          {country: "Germany", revenues: "200", costs: "-100", year: "2020"},
          {country: "Germany", revenues: "200", costs: "-100", year: "2020"},
          {country: "Germany", revenues: "200", costs: "-100", year: "2021"},
          {country: "Germany", revenues: "200", costs: "-100", year: "2020"},
          {country: "Germany", revenues: "200", costs: "-100", year: "2021"},
          {country: "Germany", revenues: "200", costs: "-100", year: "2020"},
          {country: "Germany", revenues: "200", costs: "-100", year: "2021"}
        ];


var utils = $.pivotUtilities;
var heatmap =  utils.renderers["Heatmap"];
var sumOverSum =  utils.aggregators["Sum over Sum"];

    // Setting the third parameter of pivotUI() to true causes an overwrite
    // of the existing configuration.
    // This enables the saving/reloading of configs stored under the pivotUIOptions
    // data element.
    // To see this in action:
    // 1. configure the pivot table however you like then hit 'save'
    // 2. reload the page then hit 'restore' to see your saved configuration

    $(function(){
        
            $("#output").pivotUI(mps);

            $("#save").on("click", function(){
                var config = $("#output").data("pivotUIOptions");
                var config_copy = JSON.parse(JSON.stringify(config));
                //delete some values which will...