setReport(report:Report Object | String)

This method sets a report in a pivot table component. Use it in a combination with a getReport() method or separately.

Parameters

Name Type Description
report Object | String Defines a report for a pivot table. You can set either a Report Object or a name of a variable that stores a report definition.

Examples

  1. Set a new report:

    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<button onclick="setReport()">Set report</button>
<div id="wdr-component">A pivot table will appear here</div>
<script>
var pivot = new WebDataRocks({
	container: "#wdr-component",
	height: 395,
	customizeCell: customizeCellFunction,
	report: "https://cdn.webdatarocks.com/reports/report.json"
});
</script>

<script>
function setReport() {
    var report = {
        dataSource: {
            filename: "https://cdn.webdatarocks.com/data/data.csv"
        },
        "slice": {
            "rows": [{
                    "uniqueName": "Category"
                },
                {
                    "uniqueName": "Color"
                }
            ],
            "columns": [{
                    "uniqueName": "Measures"
                },
                {
                    "uniqueName": "Country"
                }
            ],
            "measures": [{
                "uniqueName": "Price",
                "aggregation": "sum"
            }]
        }
    }
    pivot.setReport(report);
}
</script>

    See the CodePen demo.

  2. Swap two reports: 

    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
    <button onclick="javascript: swapReports()">Swap reports</button>
<div id="wdr-component1"></div>
<div id="wdr-component2"></div>
<script>
    var pivot1 = new WebDataRocks({
        container: "#wdr-component1",
        toolbar: true,
        height: 490,
        report: {
            "dataSource": {
                "dataSourceType": "csv",
                "filename": "https://cdn.webdatarocks.com/data/data.csv"
            },
            "slice": {
                "rows": [{
                    "uniqueName": "Category"
                }],
                "columns": [{
                        "uniqueName": "Measures"
                    },
                    {
                        "uniqueName": "Country"
                    }
                ],
                "measures": [{
                    "uniqueName": "Price",
                    "aggregation": "sum"
                }]
            }
        }
    });

    var pivot2 = new WebDataRocks({
        container: "#wdr-component2",
        toolbar: true,
        height: 390,
        report: "https://cdn.webdatarocks.com/reports/report.json"
    });


    function swapReports() {
        var report1 = pivot1.getReport();
        var report2 = pivot2.getReport();

        pivot1.setReport(report2);
        pivot2.setReport(report1);
    }
</script>

    See the CodePen demo.