How to Start

If you are in two minds about how to add dhtmlxPivot into your web application, you are in the right place. This tutorial will guide you through the main stages of Pivot creation and show you the possibilities of the component's configuration.

After completing all the steps below, you will get a fully functional Pivot, ready to analyze any complex data you provide for it.

Step 1. Including Source Files

To begin with, we need to include the source files of Pivot into your HTML file (to be able to use the functionality of the library). There are two necessary files:

  • the JS file of dhtmlxPivot
  • the CSS file of dhtmlxPivot
  • the link to the Google Fonts source file for the correct rendering of fonts

myPivot.html

<!DOCTYPE html>
<html>
<head>
  <title>How to Start with dhtmlxPivot</title>
  <script src="codebase/pivot.js"></script>   
 
  <link href="codebase/pivot.css" rel="stylesheet"> 
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
</head>
<body>
    <script>
        // your code will be here
</script> </body> </html>

Step 2. Creating Pivot

Then we will initialize Pivot. For this, we will create a DIV container and place dhtmlxPivot into it. So, our steps are:

  • specify a DIV container in the myPivot.html file
  • initialize dhtmlxPivot using the dhx.Pivot constructor

As parameters, the constructor function takes the HTML container where Pivot will be placed and the Pivot configuration object.

myPivot.html

<!DOCTYPE html>
<html>
<head>
  <title>How to Start with dhtmlxPivot</title>
  <script src="codebase/pivot.js"></script>   
 
  <link href="codebase/pivot.css" rel="stylesheet">  
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
</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>

Step 3. Setting Pivot Config

Now we need to define the Pivot configuration. There are two mandatory attributes we must set in the configuration object:

  • fields - specifies the initial Pivot fields and structure, and sets the scheme for data analysis
  • fieldList - defines the list of fields from the data set that will be available for use in Pivot

Other attributes are optional. See the full list of config properties.

myPivot.html

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" },
        // all fields
    ]
  }
);

Later we can change the Pivot configuration. Read about the possibilities of adjusting Pivot to your needs.

Step 4. Loading Data into Pivot

Finally, we should populate Pivot with data. dhtmlxPivot loads data in the JSON format. We will specify the data source as an inline object.

To load data into Pivot, we will use the data property and set our dataset as its value.

myPivot.html

var dataset = [
    { "name": "India",      "year": 2005,   "continent": "Asia",    "gdp": 808.744 },
    { "name": "Chad",       "year": 2011,   "continent": "Africa",  "gdp": 9.345 }, 
    { "name": "Belarus",    "year": 2011,   "continent": "Europe",  "gdp": 55.136 },
    // more fields
];
 
 
var myPivot = new dhx.Pivot("container", {
    data: dataset,                  fields: {
       // initial pivot structure
    },
    fieldList: [      
        // the full list of fields
    ]
  }
);

You can find more info on loading data into Pivot in the article Loading Data into Pivot.

What's Next

Now our Pivot is ready and only waits for your instructions. You can proceed to calculations and data exploring.

If you feel like diving deeper into the nature of dhtmlxPivot, these are suggestions for further studying:

Back to top