Since Pivot tool comes as an add-on to Webix library, you need to include both Webix and Pivot scripts and CSS files on your page to make everything work. Make sure you specify relative paths to these files:
<html>
<head>
<!-- js files -->
<script src="codebase/webix.js" type="text/javascript"></script>
<script src="codebase/pivot.js" type="text/javascript"></script>
<!-- css files -->
<link rel="stylesheet" href="codebase/webix.css"
type="text/css" charset="utf-8">
<link rel="stylesheet" href="codebase/pivot.css"
type="text/css" charset="utf-8">
</head>
<body>
<div id = "testA"></div> <!-- container for Pivot -->
</body>
</html>
The initialization of Pivot doesn't differ from that of other Webix components and is done with webix.ui() constructor function, where you enumerate all the necessary properties:
webix.ui({
view: "pivot",
container: "testA",
id: "pivot",
max: true,
structure: {
rows: ["form", "name"],
columns: ["year"],
values: [
{ name: "gdp", operation: "sum"},
{ name: "oil", operation: "sum"}
],
filters: []
}
});
Related sample: Loading from Inline Data Source
Main Properties
After downloading Pivot there are 3 ways to run package samples locally. The simplest one is to navigate to the root directory and open the samples folder. Find the desired file and open it with a double-click. The sample will be opened in a new browser tab.
Running samples on a local server
You can run package samples on a local server (e.g Apache). Set the Pivot folder as the root directory of the local server and launch the server. In general a local server runs at localhost.
Running samples on a development server
To be able to modify samples and see the corresponding changes you should run them on a development server. Go to the Pivot root directory, install the necessary dependencies and start the server as:
// navigate to the root directory
cd pivot
// install dependencies
yarn install //or npm install
// start dev server
yarn server //or npm run server
Back to top