Back to homepage

reportcomplete

reportcomplete:String

This event is triggered when the data from the report and localization file were loaded successfully and the grid was rendered.

It indicates that the work with the pivot table can be started. For instance, the pivot table is ready to receive API calls.

Example

webdatarocks.on('reportcomplete', function() {
  alert('Report has been completed!');
});

Try it in the CodePen demo.

See also

• update
• reportchange

reportchange:String

This event is triggered when a report is changed in the component whether by a user or by code. Use it for tracking any changes in a report object.

Example

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

Try it in the CodePen demo.

See also

• update
• reportcomplete

getOptions():Options Object

This API call returns Options Object defined in the pivot table component.

Example

Hide the Field List button from the grid:

var options = webdatarocks.getOptions();
options.configuratorButton = false;
webdatarocks.setOptions(options);
webdatarocks.refresh();

Try it on CodePen.

See also

• Options Object
• setOptions

A slice object 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.

Slice properties

Name	Type	Description
columns	Array of Hierarchy Objects	optional Specifies the hierarchies to be selected to the columns of the slice.
drills	Drills Object	optional Stores all drill-down configurations of the multi-level hierarchies.
expands	Expands Object	optional Stores the information about the hierarchies which should be expanded on the grid.
measures	Array of Measure Objects	Specifies the measures to be selected to the slice.
reportFilters	Array of Hierarchy Objects	optional Specifies the report filters to be selected to the slice. Report filters are applied to the whole report.
rows	Array of Hierarchy Objects	optional Specifies the hierarchies to be selected to the rows of the slice.
sorting	Sorting Object	optional Describes how the values for the specific hierarchies in the rows and/or columns are sorted on the grid.

Slice subobjects:

• Hierarchy Object
• Drills Object
• Expands Object
• Measure Object
• Sorting Object

Hierarchy Object

Each field of your data is represented by a hierarchy in a pivot table. Multiple fields can be combined into a single hierarchy. It is described by the following properties:

Name	Type	Description
uniqueName	String	An identifier of the hierarchy.
caption	String	optional A caption of the hierarchy.
filter	Object	optionalContains the following details about filtering that should be applied to the hierarchy members:
members	Array of strings	An array of hierarchy members to be shown on the grid if filtering by members is applied.
negation	Boolean	optional Specifies whether to display all items defined in members (false) or to display all items except the ones defined in members(true). Default value: false.
measure	String	optional Available only for the hierarchy members in the rows and columns. Used for Top X filtering. Specifies a measure on which filtering is based.
quantity	Number	optional Available only for the hierarchy members in the rows and columns. Used for Top X filtering. Sets the number of elements for the Top X ("type": "top") or Bottom X ("type": "bottom") filter. Default value: 10.
type	String	optional Available only for the hierarchy members in the rows and columns. Sets a type of filtering. Possible values are "none" (no filtering is applied to the hierarchy), "members" (filtering by members is applied), "top" (the Top X filter is applied), "bottom" (the Bottom X filter is applied).
sort	String	optional Sets a type of sorting for the hierarchy members. Possible values: "asc", "desc" and "unsorted". Default value: "unsorted".

Drills Object

This object stores all drill-down configurations of the multi-level hierarchies. It has the following properties:

Name	Type	Description
drillAll	Boolean	optional Defines whether all levels of all hierarchies are drilled down (true) or drilled up (false) on the grid. Default value: false.
columns	Array of objects	optional Stores all the columns which should be drilled down on the grid.
rows	Array of objects	optional Stores all the rows which should be drilled down on the grid.

An example of a drills object:

drills: {
  drillAll: false,
  rows: [
    {
      tuple: [
        "Business Type.Warehouse"
      ]
    }
  ]
}

The result of this code: the member "Warehouse" of the "Business Type" hierarchy from rows is drilled down on the grid. See the full code in the CodePen demo.

To drill down all the hierarchies, set a "drillAll" property to true.

When a user drills up & down the hierarchies on the grid, the changes are saved within a report and can be restored later.

Expands Object

This object stores the information about the hierarchies that should be expanded on the grid. It has the following properties:

Name	Type	Description
expandAll	Boolean	optional Specifies whether all the hierarchies which are defined in the current slice should be expanded (true) or collapsed (false) on the grid. Default value: false.
columns	Array of objects	optional Stores all the columns which should be expanded on the grid.
rows	Array of objects	optional Stores all the rows which should be expanded on the grid.

An example of the expands object:

expands: {
  expandAll: false,
  rows: [
    {
      tuple: [
        "Country.Australia"
      ]
    },
    {
      tuple: [
        "Country.Canada"
      ]
    }
  ]
}

The result of this code: only "Australia" and "Canada" members of the Country hierarchy from rows are expanded on the grid. See the full code in the CodePen demo.

To expand all the hierarchies, set a "expandAll" to true.

When a user expands the hierarchies on the grid, the changes are saved within a report and can be restored later.

Measure Object

This object describes the fields selected to the measures. It has the following properties:

Name	Type	Description
uniqueName	String	An identifier of the measure.
active	Boolean	optional Specifies whether this particular measure should be selected to the report (true) or not (false).
aggregation	String	optionalAn identifier of an aggregation that should be applied to this measure. Possible values: "sum", "count", "distinctcount", "average", "product", "min", "max", "percent", "percentofcolumn", "percentofrow", "index", "difference", "%difference". If the measure is calculated and defined by "formula", this property is set to "none". Default value: "sum".
availableAggregations	Array of strings	optional Stores strings of the aggregation functions. Specify here the functions that can be applied to the current measure. If the measure is calculated, this property is set to [].
caption	String	optional A caption of the measure.
formula	String	optional Defines a formula for the calculated measure. The following arithmetic, assignment, relational, logical operators and a conditional statement can be used in the formula: +, -, *, /, ^, =, <, >, <=, >=, ==, !=, or, and, if. The functions that can be applied to the measure: abs, max, min. Other measures can be addressed by using their uniqueName and aggregation properties. Examples of such addressing: sum("Price") or max("Order").
individual	Boolean	optional Specifies a type of the values which are used to calculate the formula: raw (true) or aggregated (false) ones. Default value: false. See the demo to understand the difference.
format	String	optional A name of the number format object applied to the measure.
grandTotalCaption	String	optional A caption of a grand total for this measure.

You can define a slice with measures only:

{
  dataSource: {
    data: jsonData
  },
  slice: {
    measures: [
      {
        uniqueName: "Price",
        aggregation: "sum",
        active: true
      }
    ]
  }
}

Specify where the measures should be displayed by adding "uniqueName": "Measures" to rows or columns. Measures are put to columns by default.

An example of a slice inside of the report object:

{
  dataSource: {
    dataSourceType: "csv",
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  slice: {
    rows: [
      {
        uniqueName: "Measures"
      },
      {
        uniqueName: "Category",
        filter: {
          members: [
            "Category.Accessories"
          ],
          negation: true
        }
      }
    ],
    columns: [
      {
        uniqueName: "Destination"
      }
    ],
    measures: [
      {
        uniqueName: "Price",
        aggregation: "sum"
      },
      {
        uniqueName: "Quantity",
        aggregation: "sum"
      }
    ],
    sorting: {
      row: {
        type: "desc",
        tuple: [],
        measure: "Price"
      }
    }
  }
}

See the full code in the CodePen example.

Sorting Object

The Sorting Object is described by the following properties:

Name	Type	Description
column	Object	optional Defines sorting for the specified column. It has the following properties:
tuple	Array of strings	Identifies the column members to which sorting should be applied.
measure	String	Specifies a measure on which sorting is based.
type	String	A type of sorting for the column. Possible values: "asc" and "desc".
row	Object	optional Defines sorting for the specified row. It has the following properties:
tuple	Array of strings	Identifies the row members to which sorting should be applied.
measure	String	Specifies a measure on which sorting is based.
type	String	A type of sorting for the row. Possible values: "asc" and "desc".

Define the sorting object within a report:

sorting: {
  column: {
    type: "desc",
    tuple: [],
    measure: "Price"
  }
}

Likewise, you can define sorting for the members of the columns and the rows. An example of sorting for the members of the "Category" hierarchy in rows:

rows: [
  {
    uniqueName: "Category",
    filter: {
      members: [
        "Category.Accessories"
      ],
      negation: true
    },
    sort: "desc"
  }
]

Default slice

If the slice is not defined, WebDataRocks specifies a default slice for your report. It has the following structure: the first hierarchy from the data is put into rows, the first measure – into columns. To disable the default slice, set a showDefaultSlice property in the Options Object to false.

Example: Suppose you have the following JSON data definition:

const jsonData = [
  {
    "Category": "Accessories",
    "Size": "262 oz",
    "Color": "red",
    "Destination": "Australia",
    "Business Type": "Specialty Bike Shop",
    "Country": "Australia",
    "Price": 174,
    "Quantity": 225,
    "Discount": 23
  },
  {
    "Category": "Accessories",
    "Size": "214 oz",
    "Color": "yellow",
    "Destination": "Canada",
    "Business Type": "Specialty Bike Shop",
    "Country": "Canada",
    "Price": 502,
    "Quantity": 90,
    "Discount": 17
  }
]

In this case, "Category" is the first hierarchy and "Price" is the first measure. Consequently, these hierarchies go to rows and columns correspondingly. For this particular dataset, the default slice looks the following way:

{
  dataSource: {
    data: jsonData
  },
  slice: {
    rows: [
      {
        uniqueName: "Category"
      }
    ],
    columns: [
      {
        uniqueName: "Measures"
      }
    ],
    measures: [
      {
        uniqueName: "Price"
      }
    ]
  }
}

To see how the default slice is set in the report, check out the CodePen demo.

Report filters

To concentrate on the particular subsets of data, use the report filters – they are applied to the whole report. Define a reportFilters property in the slice as follows:

{
  dataSource: {
    dataSourceType: "csv",
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  slice: {
    reportFilters: [
      {
        uniqueName: "Country"
      },
      {
        uniqueName: "Business Type",
        filter: {
          members: [
            "Business Type.Warehouse"
          ]
        }
      }
    ],
    rows: [
      {
        uniqueName: "Measures"
      },
      {
        uniqueName: "Category",
        filter: {
          members: [
            "Category.Accessories"
          ],
          negation: true
        }
      }
    ],
    columns: [
      {
        uniqueName: "Destination"
      }
    ],
    measures: [
      {
        uniqueName: "Price",
        aggregation: "sum"
      },
      {
        uniqueName: "Quantity",
        aggregation: "sum"
      }
    ]
  }
}

See how to set report filters in the CodePen example.

Calculated values

To create a custom calculated value for the report, define a formula for the measure. After creation, all the calculated values are stored within a report.

Example: Suppose you want to calculate the total revenue of sales. Here is how the calculated value may look like in this case:

measures: [
  {
    uniqueName: "Revenue",
    formula: "sum('Price') * sum('Quantity')",
    caption: "Revenue",
    active: true
  }
]

Create as many calculated values as you need. There is no limit on their number.

Set a slice using API

You can change the slice by using setReport() API call. To get the slice as a part of the report use getReport() API call.

See also

• Field List

refresh()

This API call redraws the component.

Use it when you need to apply results of the following API calls:

• setOptions()

Example

Hide subtotals from the grid by setting a showTotals option to false and redraw the pivot table using refresh():

webdatarocks.setOptions({
  grid: {
    showTotals: false
  }
});

webdatarocks.refresh();

See the CodePen example with refresh().

See also

• Options Object
• getOptions
• setOptions

setOptions(options: Options Object)

This method is used for setting the options object in the report.

To redraw the component and see the applied changes, use a refresh() API call.

Parameters

Name	Type	Description
options	Object	This object defines the view and functionality available for users. Address the following article to learn how to define it: Options Object.

Examples

1) Change the form of the pivot table to a classic one:

webdatarocks.setOptions({
  grid: {
    type: "classic"
  }
});
webdatarocks.refresh();

The CodePen example with setOptions().

2) Disable filtering:

let options = webdatarocks.getOptions();
options.grid.showFilter = false;
webdatarocks.setOptions(options);
webdatarocks.refresh();

See also

• Options Object
• getOptions
• refresh

An options object defines the view and functionality available for users. Popular use cases:

• Enable/disable filtering and sorting
• Show/hide subtotals and grand totals
• Define the formatting pattern for date and time

The options object consists of grid options and general options. You can find more details in the following sections:

1. List of options that define the grid view and functionality
2. List of options that apply to the entire component
3. How to set options for a specific report
4. How to set options for all reports
5. Example

Grid Options

Name	Type	Description
grid.type	String	Selects the grid form. Supported types are: "compact", "flat" and "classic". Default value: "compact".
grid.title	String	Specifies the grid title. Default value: "".
grid.showFilter	Boolean	Indicates whether the filtering feature is enabled (true) or not (false). Default value: true.
grid.showHeaders	Boolean	Indicates whether the spreadsheet headers with column and row numbers are visible (true) or not (false). Default value: true.
grid.showTotals	String	Specifies how the subtotals are shown: either only for the columns ("columns"), only for the rows ("rows") or for the columns and rows ("on"). To hide the subtotals completely, set this property to "off". Default value: "on".
grid.showGrandTotals	String	Specifies how the grand totals are shown: either only for columns ("columns"), only for the rows ("rows") or for the rows and columns ("on"). To hide grand totals completely, set this property to "off". Default value: "on".
grid.showHierarchies	Boolean	Specifies how multi-level hierarchies are shown on the grid: either with the icon on the left (false) or with the link on the right (true). Default value: true.
grid.showHierarchyCaptions	Boolean	Specifies whether the hierarchy captions are visible on the grid (true) or not (false). Default value: true.
grid.showReportFiltersArea	Boolean	Indicates whether the report filtering area is visible on the grid (true) or not (false). Default value: true.

General Options

Name	Type	Description
configuratorActive	Boolean	Indicates whether the Field List is closed (false) or opened (true) after the WebDataRocks initialization. Default value: false.
configuratorButton	Boolean	Indicates whether the Field List button is visible (true) or not (false). Demo. Default value: true.
showAggregations	Boolean	Indicates if the aggregation selection control for measures is visible in the Field List (true) or not (false). Default value: true.
showCalculatedValuesButton	Boolean	Specifies whether the “Add calculated value” button is visible in the Field List (true) or not (false). Default value: true.
drillThrough	Boolean	Specifies whether the drill-through feature is enabled (true) or not (false). The cell can be drilled through by double-clicking the cell. Default value: true.
showDrillThroughConfigurator	Boolean	Specifies whether the Field List button is visible (true) in the drill-through pop-up window or not (false). Default value: true.
sorting	String	Specifies whether the sorting controls are visible in the columns ("columns"), rows ("rows") or in the columns and rows at the same time ("on"). The controls can be hidden by setting this parameter to "off". Default value: "on".
datePattern	String	This property is used for formatting of “date string” date fields ("type":"date string" in the JSON data source, the "ds+"prefix in CSV). Default pattern string: "dd/MM/yyyy".
dateTimePattern	String	This property is used for formatting “datetime” date fields ("type":"datetime" in the JSON data source, the "dt+" prefix in CSV). Default pattern string: "dd/MM/yyyy HH:mm:ss".
saveAllFormats	Boolean	If there are more than 5 formats defined in the report, only the formats for currently displayed measures are saved in the report. Set the saveAllFormats property to true to save all the formats defined in the report. Default value: false.
showDefaultSlice	Boolean	Specifies whether the default slice can be selected automatically (for cases when the slice is not set in the report). If showDefaultSlice is true, the first hierarchy from the data source is put into the rows and the first measure is put into columns. If showDefaultSlice is false, the grid remains empty. Default value: true.
defaultHierarchySortName	String	Specifies a type of sorting for the hierarchy members. Possible values are "desc" (descending), "asc" (ascending) or "unsorted". Default value: "asc".
showAggregationLabels	Boolean	Specifies whether the aggregation labels like "Sum of", "Total Sum of", etc. are displayed in the row and column titles. Aggregation labels can be changed in a JSON localization file. Default value: true.

How to set options for a specific report

Initially, all the options in a report are set to their default values. Setting options that differ from the defaults can be done in three ways:

1) Presetting options in the report. Here is an example of setting a grid type:

{
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  options: {
    grid: {
      type: "classic"
    }
  }
}

Try the CodePen example.

2) Using setOptions() and refresh() API calls.

Here is an example of setting a grid title:

webdatarocks.setOptions({
  grid: {
    title: "A New Title"
  }
});
webdatarocks.refresh(); 

Try the CodePen example.

An example of disabling sorting:

webdatarocks.setOptions({
  sorting: "off"
});
webdatarocks.refresh();

Try the CodePen example.

3) Via the Toolbar. Click the Options tab to change the form of the pivot table or the look of grand totals and subtotals:

How to set options for all reports

To set options for all reports, specify them in the Global Object:

const pivot = new WebDataRocks({
  container: "#wdr-component",
  // Other parameters
  global: {
    options: {
      grid: {
        showFilter: false,
        showReportFiltersArea: false,
      },
      configuratorButton: false,
      drillThrough: false,
      sorting: "off", 
    },
  },
  report: {
    // Your report
  }
});

See an example on CodePen.

Learn more about setting configurations for all reports: Global Object.

Example

A live demo with setting grid options:

See also

• getOptions
• setOptions
• refresh

highcharts.getData(options:Object, callbackHandler:Function, updateHandler:Function)

This method is used for integration with Highcharts. It is responsible for requesting the data from the pivot table and pre-processing it to the appropriate format for the specified chart’s type. Before the start of integrating, include the webdatarocks.highcharts.js library in your web project. It serves as a connector between Pivot Table and Highcharts. Read more about integration with Highcharts in this tutorial.

Parameters

Name	Type	Description
options	Object	Describes options for data pre-processing. It has the following parameters:
type	String	optional Specifies the chart type to prepare the data for: "area", "areaspline", "bar", "column", "waterfall", "funnel", "pie", "arearange", "areasplinerange", "columnrange", "errorbar", "bubble", "scatter", "polygon", "spline". The default value is "line".
slice	Object	optionalDefines the slice of data for pre-processing for the specified chart. Otherwise, the API call will send the data displayed in the pivot table.
xAxisType	String	optionalSpecifies a type of data on the X-axis. If set to "datetime", a chart with dates on the X-axis is created. Default value: "".
valuesOnly	Boolean	optionalIf you need the axis to be based only on numerical values, set this property to true. Default value: false. It is possible to apply valuesOnly for the following chart types: "bubble", "line", "polygon" and "spline". Note that it is always true for "scatter" chart.
withDrilldown	Boolean	optional If the chart is supposed to have drilldowns, set it to true. The default value is false. It is available only for such chart types as "area", "areaspline", "bar", "column", "waterfall", "funnel", "pie", "pyramid", "polygon", "spline", "line".
prepareDataFunction	Function	optional An external function. Use it if webdatarocks.highcharts.js does not support the specified chart type or you need to pre-process the data in another way. This function takes raw (non-aggregated) data from the table as rawData parameter and an object with options defined in highcharts.getData() as options parameter. Read a more detailed getData() API call documentation to learn about rawData‘s structure.
callbackHandler	Function	This function specifies what happens after the data is ready. It has the following parameters: data and rawData (rawData is an optional argument, define it if you need to set a number formatting in the tooltip or on the axes, etc).
updateHandler	Function	optional This function is triggered when the data in the pivot table is updated, sorted or filtered. It has the following parameters: data and rawData.

Use the following functions from the Connector if you need to define a special number formatting for axes or tooltips in Highcharts. Pass a pivot table format object as an argument and each of them will return the formatting string in Highcharts format. These functions can be used in the body of callbackHandler and updateHandler functions.

Name	Return value	Description
getAxisFormat(format)	String	Use this function if you want to apply a formatting from the pivot table to the values on the axis. It gets the pivot table format object defined inside WebDataRocks and returns a Highcharts format string for value.
getPointXFormat(format)	Function	Use this function if you want to apply a formatting from the pivot table to point.x. It gets the pivot table format object defined inside WebDataRocks and returns a Highcharts format string for point.x.
getPointYFormat(format)	Function	Use this function if you want to apply a formatting from the pivot table to point.y. It gets the format object defined inside WebDataRocks and returns a Highcharts format string for point.y. Try the example on Codepen.
getPointZFormat(format)	Function	Use this function if you want to apply a formatting from the pivot table to point.z. It gets the pivot table format object defined inside WebDataRocks and returns a Highcharts format string for point.z.

To learn how to integrate WebDataRocks reporting tool with Highcharts, follow the link to the tutorial.

getData(options:Object, callbackHandler:Function, updateHandler:Function)

This method is for integration with third-party charting libraries. It is used for requesting the data from the pivot table, pre-processing it to the appropriate format for the required type of the chart in the charting library and passing the data to callbackHandler and updateHandler.

Check out our step-by-step tutorial to integrate with any charting library.

Parameters

Name	Type	Description
options	Object	Options for data pre-processing. This object has the following parameters:
slice	Object	optional Defines the slice of data for pre-processing. If the slice is not defined, the API call sends the data displayed in the pivot table.
callbackHandler	Function	Specifies what happens after the data is ready. It has one input parameter – rawData (non-aggregated data for sending to the chart).
updateHandler	Function	optional Triggered when the data in the pivot table is updated, sorted or filtered. It has one input parameter – rawData.

Response

rawData is an object returned by getData() API call and then asynchronously passed to callbackHandler and updateHandler. It consists of the following fields:

Name	Type	Description
data	Array	Array of objects describing the data from the dataset. Each object can have c0 - cN , r0 - rN and v0 - vN fields, where c0 - cN are for column members, r0 - rN are for row members and v0 - vN are for values. If a cell has no value, NaN is put the appropriate v0 - vN field.
meta	Object	Metadata for the data API call returns:
cAmount	Number	Columns’ quantity in the slice object.
c0Name	String	The title of the columns’ first field in the slice object. The quantity of c0Name, c1Name, c2Name, … , cnName is equal to cAmount of the meta object.
formats	Array	Array of format objects for measures in the slice object. The quantity of format objects is equal to vAmount.
rAmount	Number	The quantity of fields in rows in the slice object.
r0Name	String	The title of the rows’ first field in the slice object. The number of r0Name, r1Name, r2Name, … , rnName is equal to rAmount of the meta object.
vAmount	Number	The measures’ quantity in the slice object.
v0Name	String	The title of the first measure in the slice object. The number of v0Name, v1Name, v2Name, … , vnName is equal to vAmount of the meta object.

Example

Assume that you have the pivot table with the following content:

Then the output of the API call

webdatarocks.getData({}, function(data) {console.log(data)})

is the following one:

{
  data: [
    {
      v0: 131295
    },
    {
      r0: "France",
      v0: 76900
    },
    {
      r0: "Germany",
      v0: 54395
    },
    {
      c0: "Bikes",
      v0: 131295
    },
    {
      c0: "Bikes",
      r0: "France",
      v0: 76900
    },
    {
      c0: "Bikes",
      r0: "Germany",
      v0: 54395
    }
  ],
  meta: {
    cAmount: 1,
    c0Name: "Category",
    formats: [
      {
        currencySymbol: "$",
        currencySymbolAlign: "left",
        decimalPlaces: 2,
        decimalSeparator: ".",
        divideByZeroValue: "Infinity",
        infinityValue: "Infinity",
        isCount: false,
        isPercent: false,
        maxDecimalPlaces: -1,
        maxSymbols: 20,
        name: "currency",
        nullValue: "",
        textAlign: "right",
        thousandsSeparator: ","
      }
    ],
    r0Name: "Country",
    rAmount: 1,
    v0Name: "Sum of Price",
    vAmount: 1:
  }
}

This data array in rawData object contains all the data from the pivot table’s slice. It includes grand totals, totals, and subtotals as well.

Objects with grand totals contain only (v0 - vN) values. In our example you can see such an object with grand totals:

{
  v0: 131295
}

Similarly, objects with totals contain either values (v0 - vN) and columns (c0 - cN ) or values (v0 - vN) and rows ( r0 - rN). The following set of objects corresponds to the example described before:

{
  r0: "France",
  v0: 76900
}, 
{
  r0: "Germany",
  v0: 54395
},
{
  c0: "Bikes",
  v0: 131295
}

Various charting libraries may have different requirements for data pre-processing before sending it from the pivot table to the charts. The data can be with grand totals, totals and subtotals or without them.

googlecharts.getData(options:Object, callbackHandler:Function, updateHandler:Function)

This method is used for integration with Google Charts. It is responsible for requesting the data from the pivot table and pre-processing it to the appropriate format for the required type of the chart. To use this method it is necessary to include the webdatarocks.googlecharts.js library which serves as a connector between Pivot Table and Google Charts. More details can be found in the Integration with Google Charts tutorial.

Parameters

Name	Type	Description
options	Object	Options for data pre-processing. This object has the following parameters:
type	String	optional Specify the chart type to prepare the data for: "area", "bar", "column", "line", "pie" or "sankey". The default value is "sankey".
slice	Object	optional Define the slice of data for pre-processing for the specified chart. If it is not defined, the API call will send the data displayed in the pivot table.
prepareDataFunction	Function	optional An external function. Use it if webdatarocks.googlecharts.js does not support the necessary chart type or you need to pre-process the data differently. This function has the following parameters: rawData – raw (non-aggregated) data for sending to the chart; options – object with options defined in googlecharts.getData(). To learn more about the rawData object’s structure, turn to getData() API call documentation.
callbackHandler	Function	This function specifies what happens after the data is ready. It has the following parameters: data and rawData (rawData is an optional argument, define it in case of special necessity: for defining number formatting in the tooltip, etc).
updateHandler	Function	optional It is triggered when the data in the pivot table is updated, sorted or filtered. It has the following parameters: data and rawData.

For setting a special number formatting for Google Charts, we offer to use two functions from webdatarocks.googlecharts.js. These functions take a pivot table format object as an argument and return the formatting string in Google Charts format.

Name	Type	Description
getNumberFormat	Function	Takes the pivot table format object as an argument for format parameter and returns a format object for number formatting in Google Charts. Use this object for columns’ formatting in a DataTable, for example.
getNumberFormatPattern	Function	Takes the pivot table format object as an argument for format parameter and returns Google Charts format pattern. Use this pattern to control the formatting of label numbers on axes.

Example

The following sample shows how to integrate WebDataRocks Pivot Table with Google Charts and use googlecharts.getNumberFormat() method to change the number formatting in the chart:

Move up