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:

  <!-- 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">
   <div id = "testA"></div>  <!-- container for Pivot -->

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:

    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.
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.