Getting Started

Before we start with the PivotTreeMap, please refer this page page for general information regarding integrating Syncfusion widgets.

For quick start, we already configured a template project in GitHub repository syncfusion-template-repository. Run the below set of commands to clone the repository and install the required packages for Syncfusion Aurelia application.

html

> git clone "https://github.com/aurelia-ui-toolkits/syncfusion-template-repository"
    > cd syncfusion-template-repository
    > npm install
    > jspm install

Control Initialization

The below steps describes to create Syncfusion Aurelia PivotTreeMap component.

Create `pivottreemap` folder inside `src/samples/` location.
Create `pivottreemap.html` file inside `src/samples/pivottreemap` folder and use the below code example to render the PivotTreeMap component.

html

<template>
  <require from="./pivottreemap.css"></require>
  <div>
    <ej-pivot-tree-map id="PivotTreeMap1"></ej-pivot-tree-map>
  </div>
</template>

Create pivottreemap.js file inside src/samples/pivottreemap folder with below code snippet.

html

export class BasicUse {

  constructor() {}

}

Create pivottreemap.css file inside src/samples/pivottreemap folder with below code snippet.

html

ej-pivot-tree-map {
    min-height: 275px; 
    min-width: 525px; 
    height: 460px; 
    width: 99%; 
    position:relative !important; 
    display: block;
}

Populate PivotTreeMap with Data

Let us now see how to populate the PivotTreeMap control using a sample data as shown below.

html

<template>
  <require from="./pivottreemap.css"></require>  
  <div>
   <ej-pivot-tree-map id="PivotTreeMap1" e-data-source.bind="pivotData">
    </ej-pivot-tree-map>
  </div>

  <!--Tooltip labels can be localized here-->
  <script id="tooltipTemplate" type="application/jsrender">
    <div style="background:White; color:black; font-size:12px; font-weight:normal; border: 1px solid #4D4D4D; white-space: nowrap;border-radius: 2px; margin-right: 25px; min-width: 110px;padding-right: 5px; padding-left: 5px; padding-bottom: 2px ;width: auto; height: auto;">
      <div>Measure(s) : </div><div>Row : </div><div>Column : </div><div>Value : </div>
    </div>
  </script> 
</template>

html

export class BasicUse {
  constructor() {
    this.pivotData = {
      data: 'http://bi.syncfusion.com/olap/msmdpump.dll', //data
      catalog: 'Adventure Works DW 2008 SE',
      cube: 'Adventure Works',
      rows: [
        {
          fieldName: '[Date].[Fiscal]'
        }
      ],
      columns: [
        {
          fieldName: '[Customer].[Customer Geography]'
        }
      ],
      values: [
        {
          measures: [
            {
              fieldName: '[Measures].[Internet Sales Amount]'
            }
          ],
          axis: 'columns'
        }
      ]
    };
  }
}

The above code will generate a simple PivotTreeMap with internet sales amount over a period of fiscal years across different customer geographic locations.