Working with Server

Loading Data

Pivot widget expects a backend server to fetch data. You can provide a link to it by the url setting:

    view: "pivot",
    url:"http://localhost:3200/" });

Pivot will load and save data using the specified URL.

Sample backend for Pivot is available for downloading.

If you do not have a backend server, you can customize the methods of the Backend service and provide client-side data as a promise.

Server-side Calculations

You can configure Pivot to do all calculations on the server side. To do this, set externalProcessing property to true.

Locally, Pivot uses a built-in math engine to do all the calculations and produce a result. The result is used to build a table according to a predefined algorithm. For external processing, the expectation is that the result from the server will be in the same format because the calculation algorithm is the same.

In samples from the Pivot package, the server uses the same math engine as Pivot, and therefore the response has the same format (headers for the columns and result for the data distribution).

When changes are made, Pivot sends a request to url/data with the following parameters: {structure, mode, table(?)} ,and waits for the server to load the new aggregate data.

If a user opens a filter, he gets field values from url/fields/id.

As we mentioned before, a sample server is available for download to license owners as a zip file via the client area. You can also use your own server.

If you want to get the config from the server, you can call webix.ajax before view initialization:

webix.ajax(url + "config").then(res => {
                view: "pivot",

In case you are using your own server, change the parameters of the AJAX request to the path to your config.

Backend Service

Backend service is a server-side model that contains methods for sending requests.

Check out the full list of methods below.

How to customize backend model

To change data requests, get and process the responses you can:

  • create your own backend service by extending the default one
  • define and override the needed methods
  • use custom backend service instead of the default one by including it into the override map.
class MyBackend extends {
    // define and override methods here
    view: "pivot",
    override: new Map([[, MyBackend]]),

Changing calls to server

You can send AJAX requests to your server by using the needed URLs, e.g.:

Adding an event

class MyBackend extends {
  data() {
    return webix.ajax.get("//localhost:3200/")
      .then(res => res.json());

Parsing client-side data

If you need to fill Pivot with client-side data, you can return it as a promise inside the following methods:

Client-side data

class MyBackend extends {
  data() {
    return webix.promise.resolve(pivotData);

Related sample:  Pivot: Local Data

Backend Service Methods

Below you can find descriptions of the following methods:


Is called upon widget initialization and configuration changes to load data into Pivot.

In case "externalProcessing:false":

Returns: a promise that resolves with an array of data objects.


GET http://localhost:3000/


The server returns an array of data objects.

        "name": "Argentina",
        "year": 2005,
        "continent": "South America",
        "form": "Republic",
        "gdp": 181.357,
        "oil": 1.545,
        "balance": 4.699
  // other objects

In case "externalProcessing:true":


  • structure (object) - object with the current data structure.
  • mode (string) - current display mode. The possible values are "tree", "table" or "chart".
  • table (object), optional - settings for the grid in the "Table" and "Tree" modes.

Returns: a promise that resolves with the data object.


GET http://localhost:3000/data?structure=%7B%22rows%22%3A%5B%22


The server returns aggregated data.

    "result": {
        "tree": [{ // data structure for Tree mode
            "id": 0, // branch/item id (root branch == 0)
            // data item with values assigned to columns 
            //(key == column, index == column ID)
            "values": {
            "data": [{ // nested data
                "id": 1,
                "data": null, // no nested data in this item
                "values": {}, 
        "data": [...], // aggregated data (items without branches/structure)
        "rowData": [...], // results for totalColumn
        "columnData": [...], // results for footer totals
        "marks": [...] // css marks for highlighting min/max values in columns
    "header": { // source of Pivot columns; here header has 2 rows (data.length) 
                //and there are 6 columns
        "data": [...],// system property: native math engine can eliminate 
                      //empty columns (according to the returned data)
        "nonEmpty": [0, 1, 2, 3, 4, 5], // all returned columns have some data, so
                                        //nonEmpty contains indices/IDs of all columns
        "meta": [...] // common meta for all modes, contains additional info: 
                      //operation displayed for each column header, chart colors, etc.

Related sample:  Pivot: External Processing with Local Data


This method collects field values. Works only with externalProcessing: true.

Returns: a promise that resolves with an array of data objects.


GET http://localhost:3000/fields/id


The server returns an array of field value objects:

    {"value":"South America","id":"South America","label":"South America"},
    // other fields if any  
Back to top