Skip to content

Input Formats

Nicolas Kruchten edited this page Dec 19, 2016 · 11 revisions

The input data is a set of records with attributes rather than rows with columns, as the pivot table output has rows and columns and having separate nomenclature keeps things from getting confusing.

###CSV Files

PivotTable.js can consume the output of jquery-csv or PapaParse

<script>
    var input = $.csv.toArrays(csvString);
</script>

<script>
    Papa.parse("file.csv", { 
        download: true, 
        complete: function(parsed){ $("#output").pivotUI(parsed.data) } 
    });
</script>

Two demos of this can be found here: loading a CSV file from a server and loading a CSV file from your local machine without uploading to a server

###Arrays of objects

One object per record, the object's keys are the attribute names. See example.

Note: missing attributes or attributes with a value of null are treated as if the value was the string "null".

<script>
    var input = [
        {
            "attr1": "value1_attr1",
            "attr2": "value1_attr2",
            //...
        },
        {
            "attr1": "value2_attr1",
            "attr2": "value2_attr2",
            //...
        },
        //...
    ];
</script>

###Arrays of arrays

One sub-array per record, the first sub-array contains the attribute names. If subsequent sub-arrays are shorter than the first one, the trailing values are treated as if they contained the string value "null". If subsequent sub-arrays are longer than the first one, excess values are ignored.

<script>
    var input = [
        ["attr1", "attr2"],
        ["value1_attr1", "value1_attr2"],
        ["value2_attr1", "value2_attr2"],
        //...
    ];
</script>

###Functions that call back

The function will be called with a callback that takes an object as a parameter. See example.

Note: missing attributes or attributes with a value of null are treated as if the value was the string "null".

<script>
    var input = function(callback) {
        callback({
            "attr1": "value1_attr1",
            "attr2": "value1_attr2",
            //...
        });
        callback({
            "attr1": "value2_attr1",
            "attr2": "value2_attr2",
            //...
        };
        //...
    };
</script>

###jQuery References to Simple Tables

If there exists in the DOM a table with a thead and tbody then a jQuery reference to that table will be accepted as input. Attribute names are assumed to be in th elements in thead and values are assumed to be in td elements in tbody. See example.

<script>
    var input = $("#input");
</script>

<table id="input">
    <thead>
        <tr>
            <th>attr1</th>
            <th>attr2</th>
            <!-- etc... -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>value1_attr1</td>
            <td>value1_attr2</td>
        </tr>
        <tr>
            <td>value2_attr1</td>
            <td>value2_attr2</td>
        </tr>
            <!-- etc... -->
    </tbody>
</table>