Creating Pivot on a Page

In order to create dhtmlxPivot on a page, you should initialize it. There are several main steps you need to take:

Include the dhtmlxPivot source files on a page.
Create a container to place the Pivot into.
Initialize the Pivot using the object constructor.

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="../../codebase/pivot.js"></script>    
  <link rel="stylesheet" href="../../codebase/pivot.css">
</head>
 
<body>
    <div id="container"></div>
    <script>        var myPivot = new dhx.Pivot("container", {
            fields: {
                // initial pivot structure
            },
            fieldList: [        
                // the full list of fields
            ]
        });
    </script>
</body>
</html>

Related sample: Initialization

Including Required Code Files

You have to include 2 code files for using dhtmlxPivot:

pivot.js
pivot.css

Check that you set right relative paths to these files:

<script type="text/javascript" src="codebase/pivot.js"></script>    
<link rel="stylesheet" href="codebase/pivot.css">

Let's have a look at the structure of the dhtmlxPivot package to find out where to look for the files.

sources - the source code files of the library. The files are not minified and easy-to-read. The package is mostly intended to be used for component's debugging
samples - the code samples
docs - the full documentation of the component
codebase - the packed code files of the library. These files are much smaller and intended for use in production. In your apps you need to use files from this folder

Creating Container

Next you need to add an HTML container to put a future Pivot component into:

<div id="container"></div>

Initializing Pivot

To initialize dhtmlxPivot, you should use the dhx.Pivot constructor. The constructor function takes two parameters:

a container to place a Pivot into
a configuration object with the initial Pivot structure, fields, data and other properties. See the full list below.

var myPivot = new dhx.Pivot("container", {
    data: dataset,
    fields: {
        rows: ["form", "name"],
        columns: ["year"],
        values: [{ id: "oil", method: "max" }, { id: "oil", method: "sum" }],
    },
    fieldList: [
        { id: "name", label: "name" },
        { id: "year", label: "year" },
        { id: "continent", label: "Continent" },
        // more fields
    ]
  }
);

It is also possible to skip setting a container for Pivot and to add it right into the document's body:

var myPivot = new dhx.Pivot(document.body, {
    fields: {
        // initial pivot structure
    },
    fieldList: [        
       // the full list of fields
    ]
});

Pivot configuration object

The list of possible properties of the Pivot configuration object (the second parameter of the constructor):

fields - (object) mandatory, specifies the initial Pivot structure and fields, and sets the scheme for data analysis.
fieldList - (array) mandatory, defines an array of fields from the dataset that will be used in Pivot. Besides, it allows setting custom labels for fields.
data - (array) optional, a dataset or a link to it. Defines the data to be loaded into Pivot. You can also load data in a different way. See details in the article Loading Data into Pivot.
types - (object) optional, defines the types of data operations that can be applied to columns, allows setting custom labels for the types of operations. Read more in the section Configuring operations.
layout - (object) optional, sets an object with properties that define the appearance of the Pivot layout.
mark - (object|function) optional, defines the styling of cells
customFormat - (function) optional, specifies a function that redefines the default formatting of cells values and sets a custom format

Pivot fields object

rows - an array of fields that will be used as Pivot rows and shown in the left part of the component
columns - an array of fields that will be used as Pivot columns and form the top part of the datatable's header
values - an array of fields that will be used as Pivot data and shown in the datatable's cells. Besides, it sets the bottom part of the datatable's header

Related sample: Initialization