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

Related sample:  Loading from Inline Data Source

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
Back to top
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.