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.