setReport

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.