Initialization

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: []
    }
});

Main Properties

id - (string, number) the component ID, should be unique within a page. In Webix, any component is referred to by its ID, $$("id"), to perform various operations with it;
container - (string) the ID of an HTML container for Pivot (optional);
fieldMap - (object) can be used to define custom labels for fields (optional). The details are described in the Renaming fields section of Pivot configuration;
max - (boolean) enables or disables GREEN highlighting of a cell(s) with the biggest value in a row (optional);
min - (boolean) enables or disables RED highlighting of a cell(s) with the least value in a row (optional);
data or url - (string) defines the dataset (see the details in the Loading Data article);
structure - (object) defines the initial display and the analysis pattern;
separateLabel - (boolean) separates the label from the Pivot filter and removes limits on the label size, true by default.

Structure Object

rows - as array of fields that will be used as pivot rows and displayed in the treetable on the left;
columns - as array of fields that will be used as pivot columns and displayed above the datatable area;
values - as array of fields that will be used as pivot data (will be displayed in datatable cells);
filters - as array of fields that will be used as filters and will be displayed above the datatable columns. Read about work with filters in a separate article.

Running Package Samples Locally

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

If you have not checked yet, be sure to visit site of our main product Webix javascript ui library and page of javascript pivot grid product.