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.