« back to PivotTable.js examples


    // This example has all the renderers loaded,
    // and should work with touch devices.

    $(function(){
        var derivers = $.pivotUtilities.derivers;

        var renderers = $.extend(
            $.pivotUtilities.renderers,
            $.pivotUtilities.plotly_renderers,
            $.pivotUtilities.d3_renderers,
            $.pivotUtilities.export_renderers
            );

        $.getJSON("mps.json", function(mps) {
            $("#output").pivotUI(mps, {
                renderers: renderers,
                derivedAttributes: {
                    "Age Bin": derivers.bin("Age", 10),
                    "Gender Imbalance": function(mp) {
                        return mp["Gender"] == "Male" ? 1 : -1;
                    }
                },
                cols: ["Age Bin"], rows: ["Gender"],
                rendererName: "Table Barchart"
            });
        });
     });
  • Province ▾
  • Party ▾
  • Age ▾
  • Name ▾
  • Gender Imbalance ▾
    • ↕↔
  • Age Bin ▾
  • Gender ▾
    • Age Bin0203040506070Totals
    Gender
    Female
    2
    12
    8
    12
    24
    14
    3
    		75
    Male
    1
    4
    26
    68
    73
    55
    6
    		233
    Totals
    3
    16
    34
    80
    97
    69
    9
    		308