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 datasource

Main Properties

  • id - string, number - 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 - ID of an HTML container Pivot will be put to (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 dataset (see the details in the Loading Data article);
  • structure - object - defines initial display and analysis pattern;

Structure Object

  • rows - array of fields that will be used as pivot's rows and displayed in the treetable on the left;
  • columns - array of fields that will be used as pivot's columns and will be displayed above the datatable area;
  • values - array of fields that will be used as pivot's data (will be displayed in datatable cells);
  • filters - 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.
Back to top