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. It’s possible to 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.