Pivot supports both inline and external (including server-side) data in any of the Supported Data Types: XML, JSON, JsArray and CSV.
Inline Data (JSON)
var pivot_dataset = [
{"name": "China", "year": 2005, "form": "Republic", "gdp": 181.357, "oil": 1.545 },
{"name": "China", "year": 2006, "form": "Republic", "gdp": 212.507, "oil": 1.732 },
//...
]
To load inline data during initialization of a component, make use of data property:
webix.ui({
view: "pivot",
id: "pivot",
data: pivot_dataset
});
To load inline data after the component initialization, for instance, on some event, use the parse function:
$$("pivot").parse(pivot_dataset);
Related sample: Loading from Inline Data Source
Either you get data from an external file or by a server side script, you should use the following pattern.
If you load data during the component initialization, specify the path to this file/script as the value of url
{
view: "pivot",
url: "../load.php" // or "../data.json"
}
If you load data after the component has been initialized (e.g. on some event), use the load function:
$$("pivot").load("../load.php");
//or
$$("pivot").load("../data.json");
In essence, Pivot complies to standard Webix Data Loading rules.
Related sample: Loading from URL
You can export the result to PDF, Excel, CSV and PNG formats by using the related methods - toPNG, toExcel, toCSV and toPDF:
webix.toPDF($$("myPivot"));
webix.toExcel($$("myPivot"));
webix.toPNG($$("myPivot"));
webix.toCSV($$("myPivot"));
In addition to standard export options, the Pivot API allows customizing the output data and render separate columns for data on different hierarchy levels, thus rendering data in a table:
webix.toExcel($$("myPivot"),{
flatTree:{
id:"value",
columns:[
{ header:"Form" },
{ header:"Country" },
]
}
});
The flatTree property object includes the following options:
Related sample: Export Data from Pivot
It is possible to configure Pivot Table in such a way that its data are processed by a custom server-side script. In this case Pivot loads data that were grouped on the server and provides the ability to customize Pivot configuration.
To define such a processing, you need to enable the externalProcessing property in the Pivot configuration.
webix.ui({
view: "pivot",
externalProcessing: true,
...
});
The loaded data source should be a JSON that contains the following properties:
There are some rules for the Pivot columns headers:
Here is an example of a data source for a Pivot with select filter for the "continent" field:
{
"fields" : ["balance", "continent", "form", ...],
"options" : {
"continent" : [ "Africa", "Asia", ... ]
},
"structure": {
"filters" : [{ name: "continent", type: "multicombo"}],
"rows" : ["year"],
"columns" : ["continent"],
"values" : [{ "name":"oil", "operation":["min","sum"]}]
},
"data" : {
"columns" : [
{
"id" : "column0",
"template" : "{common.treetable()} #column0#",
"header" : {}
},
{
"id" : "column1",
"header" : [
{ "name" : "Africa", "colspan": 2},
{ "operation": "min", "name": "oil"}
]
},
...
],
"data": [
{
"column0": "2014",
"column1" : 0.778,
...
},
...
]
}
}
Back to top