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.
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 => {
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 is a server-side model that contains methods for sending requests.
Check out the full list of methods below.
To change data requests, get and process the responses you can:
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]]),
});
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());
}
}
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
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.
Request:
GET http://localhost:3000/
Response:
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":
Parameters:
Returns: a promise that resolves with the data object.
Request:
GET http://localhost:3000/data?structure=%7B%22rows%22%3A%5B%22
form%22%2C%22name%22%5D%2C%22columns%22%3A%5B%22year%22%5D%2C%22
values%22%3A%5B%7B%22name%22%3A%22oil%22%2C%22operation%22%3A%22
sum%22%2C%22color%22%3A%22%23e33fc7%22%7D%5D%2C%22filters%22%
3A%5B%5D%2C%22groupBy%22%3A%22year%22%7D&mode=tree&table=%7B%7D
Response:
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.
Request:
GET http://localhost:3000/fields/id
Response:
The server returns an array of field value objects:
[
{"value":"South America","id":"South America","label":"South America"},
// other fields if any
]