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:

webix.ui({
    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.

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.

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.

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

webix.ajax(url + "config").then(res => {
    webix.ui(
        webix.extend({
                view: "pivot",
                ...
            },
            res.json()
        )
    );
});

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 pivot.services.Backend {
    // define and override methods here
}
 
webix.ui({
    view: "pivot",
    url:"http://localhost:3200/",
    override: new Map([[pivot.services.Backend, 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 pivot.services.Backend {
  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 pivot.services.Backend {
  data() {
    return webix.promise.resolve(pivotData);
  }
}

Related sample: Pivot: Local Data

Backend Service Methods

Below you can find descriptions of the following methods:

data()
collectFieldValues()

data()

Is called upon widget initialization to load data into Pivot.

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

Request:

GET http://localhost:3000/

Response:

The server returns an array of data objects. If externalProcessing: true, returns aggregated data.

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

collectFieldValues()

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

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

Response:

The server returns an array of data objects: [ { id, value, label }, ... ].