Cell Data Object

A cellData object contains all the information about the cell.

Properties

Name	Type	Description
columnIndex	Number	An index of the cell’s column.
columns	Array of Hierarchy Objects	Contains the hierarchies from the column associated with the cell.
height	Number	Defines a height of the cell.
hierarchy	Object	Defines a hierarchy associated with the cell.
isClassicTotalRow	Boolean	Specifies whether the cell contains a subtotal value and is formatted according to the classic form.
isDrillThrough	Boolean	Specifies whether the cell belongs to the drill-through view (`true`) or the grid (`false`).
isGrandTotal	Boolean	Specifies whether the cell contains a grand total value.
isGrandTotalColumn	Boolean	Specifies whether the cell contains a grand total value of the column.
isGrandTotalRow	Boolean	Specifies whether the cell contains a grand total value of the row.
isTotal	Boolean	Specifies whether the cell contains a total value.
isTotalColumn	Boolean	Specifies whether the cell contains a total value of the column.
isTotalRow	Boolean	Specifies whether the cell contains a total value of the row.
label	String	Contains a label of the cell.
level	Number	Defines a level of the hierarchy.
measure	Object	Defines a measure associated with the cell.
member	Object	Defines a member associated with the cell.
rowIndex	Number	An index of the cell’s row.
rows	Array of Hierarchy Objects	Contains the hierarchies from the row associated with the cell.
type	String	Defines a type of the cell. Possible values: `"header"` and `"value"`.
value	Number	Contains a value of the cell.
width	Number	Defines the width of the cell.
x	Number	Defines an absolute X-positioning of the cell on the page
y	Number	Defines an absolute Y-positioning of the cell on the page

on(eventName:String, function:Function|String)

Attaches a JavaScript event handler to the specified event. Follow the link to see a full list of events.

Parameters

Name	Type	Description
eventName	String	Specifies a name of the component’s event.
function	Function\|String	Specifies a name of a JavaScript function or a function itself that should be an event handler for the specified event.

Example

Add an event handler to the reportchange event:

webdatarocks.on('reportchange', 'onReportChange');

function onReportChange(result) {
  alert('The report has been changed!');
}

See the CodePen demo.

Parameters

Name	Type	Description
eventName	String	optional The name of the event handler to be removed. If it is not specified, all the event handlers are removed for this event.
functionName	String	optional The name of the event handler to be removed. If it is not specified, all the event handlers are removed for this event.

Examples

1) Remove all the handlers for the reportchange event:

webdatarocks.off('reportchange');

2) Remove the specified handler for the reportchange event:

webdatarocks.off('reportchange', 'onReportChanged');

Note that if you add the event listener the following way:

webdatarocks.on('reportchange', function () {
  alert('The report has been changed!');
});

Then it is not possible to remove such a handler by its name. All that is feasible is to remove all the handlers from an event:

webdatarocks.off('reportchange');

See the CodePen demo.

Properties

Report object has the following properties:

Name	Type	Description
dataSource	Data Source Object	Сontains the information about the data source of the report.
slice	Slice Object	optional Defines which fields should be placed into the rows, columns, and measures. Besides, it contains information about the filtering, sorting, expands, drills and report filtering features.
options	Options Object	optional Defines the view and functionality available for users.
conditions	Array of Conditional Format Objects	optional Used for defining conditional formatting rules.
formats	Array of Format Objects	optional Used for defining number formatting in the component.
localization	String\|Object	optional Sets a localization. For more details, refer to language localization tutorial.
tableSizes	Table Sizes Object	optional Stores size settings for columns and rows.

Example of a report

{
  dataSource: {
    dataSourceType: "csv",
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  slice: {
    rows: [
      {
        uniqueName: "Country"
      }
    ],
    columns: [
      {
        uniqueName: "Color"
      },
      {
        uniqueName: "Measures"
      }
    ],
    measures: [
      {
        uniqueName: "Price",
        aggregation: "sum",
        format: "currency"
      },
      {
        uniqueName: "Discount",
        aggregation: "sum",
        format: "currency"
      }
    ]
  },
  options: {
    grid: {
      showGrandTotals: "off"
      }
  },
  conditions: [
    {
      formula: "#value > 350000",
      format: {
        backgroundColor: "#0598df",
        color: "#FFFFFF"
      }
    },
    {
      formula: "AND(#value > 1000, #value < 3000)",
      format: {
        backgroundColor: "#f45328",
        color: "#FFFFFF"
      }
    }
  ],
  formats: [
    {
      name: "currency",
      thousandsSeparator: ",",
      decimalPlaces: 2,
      currencySymbol: "$",
      currencySymbolAlign: "left"
    }
  ],
  tableSizes: {
    columns: [
      {
        tuple: [
          "Color.blue"
        ],
        measure: "Price",
        width: 200
      }
    ],
    rows: [
      {
        idx: 4,
        height: 80
      }
    ],
  },
  localization: "https://cdn.webdatarocks.com/loc/es.json"
}

Properties

Name	Type	Description
filename	String	optional The URL to JSON or CSV file. Also can be the URL to the server-side script generating the data.
fieldSeparator	String	optional Specific field delimiter for CSV data. By default, WebDataRocks can parse comma-separated values or semicolon-separated values. For all other cases, `fieldSeparator` should be specified.
data	String	optional Property to specify inline JSON data. See an example. Read more about supported JSON formats.

Example

Connect to a CSV file in WebDataRocks reporting tool:

var pivot = new WebDataRocks({
  container: "#wdr-component",
  toolbar: true,
  height: 395,
  report: {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv"
    }
  }
});

Try it out on CodePen.

runQuery(query:Query Object)

Invoke this method on a pivot table instance. It takes a Query Object as an argument and runs it. The Query Object contains a slice with rows, columns, measures, and reportFilters.

Use it if you need to:

reorganize the hierarchies on the grid.
compose a new report that is based on the current data.

Parameters

Name	Type	Description
query	Query Object	Contains `rows`, `columns`, `measures`, and `reportFilters` from a Slice Object.

Example

Suppose you have a pivot table with the following report:

var pivot = new WebDataRocks({
  container: "wdr-component",
  toolbar: true,
  report: {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv"
    },
    slice: {
      rows: [
        {
          uniqueName: "Category"
        }
      ],
      columns: [
        {
          uniqueName: "Measures"
        },
        {
          uniqueName: "Country"
        }
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum"
        }
      ]
    }
  }
});

If you want to rearrange the hierarchies in a slice dynamically with code, define the following slice and pass it as an argument to the runQuery() method:

var slice = {
  rows: [
    {
      uniqueName: "Country"
    }
  ],
  columns: [
    {
      uniqueName: "Category"
    }
  ],
  measures: [
    {
      uniqueName: "Price",
      aggregation: "sum"
    }
  ]
};

webdatarocks.runQuery(slice);

Check out more details in the CodePen demo.

Parameters

Name	Type	Description
`options`	Object	Contains the following properties:
`withDefaults`	Boolean	Specifies whether default values of an `options` object should be included in a report (`true`) of not (`false`). Default value: `false`.
`withGlobals`	Boolean	Specifies whether values of an `options` object defined in a global object should be included in a report (`true`) or not (`false`). Default value: `false`.

Examples

1) Get a report:

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

function getReport() {
  console.log(pivot.getReport());
}

See the CodePen demo.

2) Swap two reports:

<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.

3) Get report with defaults or globals:

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

function getReportGlobals() {
  console.log(pivot.getReport({
    withGlobals: true
  }));
}
  
function getReportDefaults() {
  console.log(pivot.getReport({
    withDefaults: true
  }));
}
  
function getReportGlobalsDefaults() {
  console.log(pivot.getReport({
    withGlobals: true, 
    withDefaults: true
  }));
}

See the CodePen demo.

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.

WebDataRocks provides users with an extensive JavaScript API for interaction with a pivot table component.

This API reference covers all the details about a component’s objects, methods and events.

Get started with Init API call to embed WebDataRocks into your project.

Objects

Cell Data Object	Contains the information about the cell.
Conditional Format Object	Defines the conditions for cell formatting.
Data Source Object	Contains the information about the data source.
Format Object	Defines a custom format for numeric cells.
Global Object	Contains configurations that will be applied to all reports.
Options Object	Defines the view and functionality of the pivot table.
Report Object	Contains all the configurations of the pivot table.
Slice Object	Contains the information about the hierarchies, filtering, sorting, expands, drills and report filtering.
Table Sizes Object	Stores size settings for columns and rows.

Methods

collapseAllData	Collapses all nodes and drills up all levels of all hierarchies.
customizeCell	Allows changing the content and style of separate cells.
expandAllData	Expands all nodes and drills down all levels of all hierarchies.
exportTo	Exports the content from the grid to a file of the chosen format.
getAllConditions	Returns a list of conditional formatting rules from the current report.
getAllHierarchies	Returns a list of available hierarchies from the current report.
getAllMeasures	Returns a list of available measures (both active and inactive) from the current report.
getOptions	Returns an Options Object from a pivot table.
getReport	Returns a Report Object from a pivot table.
getCell	Returns information about the cell by its row and column indices.
getSelectedCell	Returns information about the structure of the cell selected on the grid.
getData	Returns the data from a pivot table. Use it for integration with 3rd party charting libraries.
googlecharts.getData	Returns the data from a pivot table and pre-processes it to the appropriate format of a chart. Use this method for integration with Google Charts.
highcharts.getData	Returns the data from a pivot table and pre-processes it to the appropriate format of a chart. Use this method for integration with Highcharts.
load	Loads a report JSON file from the specified URL to a pivot table.
off	Removes event handlers from the events.
on	Attaches an event handler to the specified event.
refresh	Redraws a component. Use it to see the applied changes to a report.
removeSelection	Clears selection from the cells.
runQuery	Runs a query on a pivot table instance.
save	Saves all current report configurations to the specified destination.
setOptions	Sets an Options Object of a pivot table.
setReport	Sets a Report Object of a pivot table.
updateData	Connects to a new data source dynamically without changing report’s configurations.

Events

beforetoolbarcreated	Triggered before the Toolbar initialization. Use it to override the appearance and functionality of the Toolbar.
cellclick	Triggered once a user clicks the cell on the grid.
celldoubleclick	Triggered once a user double clicks the cell on the grid.
dataloaded	Triggered when the data is loaded into the pivot table.
reportchange	Triggered when a report is changed in a component.
reportcomplete	Triggered when a report and a localization file are successfully loaded into a pivot table.
update	Triggered when the changes are applied to a pivot table.

update:String

This event is triggered as soon as there were any changes in the component such as:

Loading the data from a report and rendering of the grid
Loading of the localization file
Updating the data slice
Filtering of the data.

Use it to retrieve the information about the data source structure.

However, if there is a need to track the changes in a report object, the best practice is to use the reportchange event.

Example

webdatarocks.on('update', function() {
  console.log('The component was updated!');
});

Try it in the CodePen demo.

Cell Data Object

Properties

Parameters

Example

See also

Parameters

Examples

See also

Properties

Example of a report

See also

Properties

Example

Parameters

Example

See also

Parameters

Examples

Parameters

Examples

Objects

Methods

Events

Example

See also