Getting Started

Subtotal.js

Subtotal.js is a JavaScript plugin for PivotTable.js. It renders rows and columns of a pivot table with subtotals and lets the user expand or collapse rows and columns.

Subtotal.js is available under an MIT license from NPM and Bower under the name subtotal. On packagist.org, it is nagarajanchinnasamy/subtotal.

Where can I see the demo?

You can see the live demo at examples page.

How do I load the code?

Subtotal.js implements the Universal Module Definition (UMD) pattern and so should be compatible with most approaches to script loading and dependency management: direct script loading with RequireJS, Browserify etc. For these options, you can grab it from NPM with npm install subtotal or via Bower with bower install subtotal.

If you are loading the scripts directly (as in the examples), you need to:

1. load the dependencies:
   1. jQuery in all cases
   2. jQueryUI for the interactive pivotUI() function (see below)
   3. D3.js, C3.js and/or Google Charts if you use charting plugins
2. load the PivotTable.js files:
   1. pivot.min.js
3. load the Subtotal.js files:
   1. subtotal.min.js

Here is the source code of an exmaple

How do I use the code?

You can use Subtotal.js with either pivot() or pivotUI() method of PivotTable.js.

To use pivot() method

1. Set the value of dataClass parameter to $.pivotUtilities.SubtotalPivotData
2. Set the value of renderer parameter to $.pivotUtilities.subtotal_renderers[<*rendererName*>]
3. Optionally, set rendererOptions

$(function(){
    $.getJSON("mps.json", function(mps) {
        $("#output").pivot(mps, {
            dataClass: $.pivotUtilities.SubtotalPivotData,
            rows: ["Gender", "Province"],
            cols: ["Party", "Age"],
            renderer: $.pivotUtilities.subtotal_renderers["Table With Subtotal"],
            rendererOptions: {
                arrowExpanded: "[+]",
                arrowCollapsed: "[-]",
                rowSubtotalDisplay: {
                    collapseAt: 0
                },
                colSubtotalDisplay: {
                    collapseAt: 0
                }
            }
        });
    });
});

To use pivotUI() method

1. Set the value of dataClass parameter to $.pivotUtilities.SubtotalPivotData
2. Set the value of renderers parameter to $.pivotUtilities.subtotal_renderers
3. Set the value of rendererName parameter to one of the subtotal renderers name
4. Optionally, set rendererOptions

$(function(){
    $.getJSON("mps.json", function(mps) {
        $("#output").pivotUI(mps, {
            dataClass: $.pivotUtilities.SubtotalPivotData,
            rows: ["Gender", "Province"],
            cols: ["Party", "Age"],
            renderers: $.pivotUtilities.subtotal_renderers,
            rendererName: "Table With Subtotal",
            rendererOptions: {
                arrowExpanded: "[+]",
                arrowCollapsed: "[-]",
                rowSubtotalDisplay: {
                    collapseAt: 0
                },
                colSubtotalDisplay: {
                    collapseAt: 0
                }
            }
        });
    });
});