Getting Started
1 Nov 2016 / 3 minutes to read
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.
> 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.
<template>
<require from="./pivottreemap.css"></require>
<div>
<ej-pivot-tree-map id="PivotTreeMap1"></ej-pivot-tree-map>
</div>
</template>
- Create
pivottreemap.js
file insidesrc/samples/pivottreemap
folder with below code snippet.
export class BasicUse {
constructor() {}
}
- Create
pivottreemap.css
file insidesrc/samples/pivottreemap
folder with below code snippet.
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.
<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>
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.
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page