Getting Started
4 Nov 201618 minutes to read
This section explains you the steps required to populate the PivotChart with data source. This section covers only the minimal features that you need to know to get started with the PivotChart.
Script and CSS Reference
Create a HTML page and add the script and CSS references in the order mentioned in the following code example.
<!DOCTYPE html>
<html>
<head>
<!-- Essential Studio for JavaScript theme reference -->
<link rel="stylesheet" href="http://cdn.syncfusion.com/14.3.0.49/js/web/bootstrap-theme/ej.web.all.min.css" />
<!-- react script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<!-- jquery script -->
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<!-- Essential JS UI widget -->
<script src="http://cdn.syncfusion.com/14.3.0.49/js/web/ej.web.all.min.js"></script>
<script src="http://cdn.syncfusion.com/14.3.0.49/js/common/ej.web.react.min.js"></script>
<!--Add custom scripts here -->
</head>
<body>
</body>
</html>In the above code, ej.web.all.min.js script reference has been added for demonstration purpose. It is not recommended to use this for deployment purpose, as its file size is larger since it contains all the widgets. Instead, you can use [CSG](http://csg.syncfusion.com/# “”) utility to generate a custom script file with the required widgets for deployment purpose.
Note:
-
react.jsandreact-dom.jsare the core files needed to create react elements. -
browser.min.jsfile is required for code transform. -
ej.web.react.min.jsis a react-syncfusion bridge to render Syncfusion components.
Relational
This section covers the information that you need to know to populate a simple PivotChart with Relational data source.
Control Initialization
Add a div container to render the PivotChart.
<!DOCTYPE html>
<html>
<body>
<div id="PivotChart1" style="width:99%;"></div>
</body>
</html>Initialize the PivotChart by using the EJ.PivotChart tag.
<!DOCTYPE html>
<html>
<head>
<style>
#Relational {
width: 100%;
height: 450px;
}
</style>
</head>
<body>
<div id="PivotChart1" style="width:99%;"></div>
<script type="text/babel">
ReactDOM.render(
<EJ.PivotChart id="Relational"></EJ.PivotChart>,
document.getElementById('PivotChart1')
);
</script>
</body>
</html>Populate PivotChart with Data
Let us now see how to populate the PivotChart control using a sample JSON data as shown below.
<script type="text/babel">
var pivot_dataset = [
{ Amount: 100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Alberta" },
{ Amount: 200, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 3, State: "British Columbia" },
{ Amount: 300, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 4, State: "Brunswick" },
{ Amount: 150, Country: "Canada", Date: "FY 2008", Product: "Bike", Quantity: 3, State: "Manitoba" },
{ Amount: 200, Country: "Canada", Date: "FY 2006", Product: "Car", Quantity: 4, State: "Ontario" },
{ Amount: 100, Country: "Canada", Date: "FY 2007", Product: "Van", Quantity: 1, State: "Quebec" },
{ Amount: 200, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Charente-Maritime" },
{ Amount: 250, Country: "France", Date: "FY 2006", Product: "Van", Quantity: 4, State: "Essonne" },
{ Amount: 300, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 3, State: "Garonne (Haute)" },
{ Amount: 150, Country: "France", Date: "FY 2008", Product: "Van", Quantity: 2, State: "Gers" },
{ Amount: 200, Country: "Germany", Date: "FY 2006", Product: "Van", Quantity: 3, State: "Bayern" },
{ Amount: 250, Country: "Germany", Date: "FY 2007", Product: "Car", Quantity: 3, State: "Brandenburg" },
{ Amount: 150, Country: "Germany", Date: "FY 2008", Product: "Car", Quantity: 4, State: "Hamburg" },
{ Amount: 200, Country: "Germany", Date: "FY 2008", Product: "Bike", Quantity: 4, State: "Hessen" },
{ Amount: 150, Country: "Germany", Date: "FY 2007", Product: "Van", Quantity: 3, State: "Nordrhein-Westfalen" },
{ Amount: 100, Country: "Germany", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Saarland" },
{ Amount: 150, Country: "United Kingdom", Date: "FY 2008", Product: "Bike", Quantity: 5, State: "England" },
{ Amount: 250, Country: "United States", Date: "FY 2007", Product: "Car", Quantity: 4, State: "Alabama" },
{ Amount: 200, Country: "United States", Date: "FY 2005", Product: "Van", Quantity: 4, State: "California" },
{ Amount: 100, Country: "United States", Date: "FY 2006", Product: "Bike", Quantity: 2, State: "Colorado" },
{ Amount: 150, Country: "United States", Date: "FY 2008", Product: "Car", Quantity: 3, State: "New Mexico" },
{ Amount: 200, Country: "United States", Date: "FY 2005", Product: "Bike", Quantity: 4, State: "New York" },
{ Amount: 250, Country: "United States", Date: "FY 2008", Product: "Car", Quantity: 3, State: "North Carolina" },
{ Amount: 300, Country: "United States", Date: "FY 2007", Product: "Van", Quantity: 4, State: "South Carolina" }
];
var pivotdataSource = {
data: pivot_dataset,
rows: [
{ fieldName: "Country", fieldCaption: "Country" },
{ fieldName: "State", fieldCaption: "State" }
],
columns: [
{ fieldName: "Product", fieldCaption: "Product" }
],
values: [
{ fieldName: "Amount", fieldCaption: "Amount" },
{ fieldName: "Quantity", fieldCaption: "Quantity" }
],
filters: []
};
var piovchart_size={ height: "460px", width: "100%" };
var def_commonSeriesOption = { enableAnimation: true, type: ej.PivotChart.ChartTypes.Column, tooltip: { visible: true }};
$(function(){
ReactDOM.render(
<EJ.PivotChart id="Relational" dataSource= {pivotdataSource} isResponsive={true} commonSeriesOptions= {def_commonSeriesOption} size= {piovchart_size}></EJ.PivotChart>,
document.getElementById('PivotChart1')
);
});
</script>The above code will generate a simple PivotChart with sales amount over products in different regions.
OLAP
This section covers the information that you need to know to populate a simple PivotChart with OLAP data source.
Control Initialization
Add a div container to render the PivotChart.
<!DOCTYPE html>
<html>
<body>
<div id="PivotChart1" style="width:99%;"></div>
</body>
</html>Initialize the PivotChart by using the EJ.PivotChart tag.
<!DOCTYPE html>
<html>
<head>
<style>
#Olap{
width: 100%;
height: 450px;
}
</style>
</head>
<body>
<div id="PivotChart1" style="width:99%;"></div>
<script type="text/babel">
ReactDOM.render(
<EJ.PivotChart id="Olap"></EJ.PivotChart>,
document.getElementById('PivotChart1')
);
</script>
</body>
</html>Populate PivotChart with data
Let us now see how to populate the PivotChart control using a sample JSON data as shown below.
<script type="text/babel">
var Olap_dataSource={
data: "http://bi.syncfusion.com/olap/msmdpump.dll",
catalog: "Adventure Works DW 2008 SE", //"Adventure Works DW 2008 SEtandard Edition
cube: "Adventure Works", rows: [{ fieldName: "[Date].[Fiscal]" }], columns: [{ fieldName: "[Customer].[Customer Geography]" }],
values: [{ measures: [{ fieldName: "[Measures].[Internet Sales Amount]" }], axis: "columns" }]
};
var chart_size={ height: "460px", width: "100%" };
var def_commonSeriesOption={ enableAnimation: true, type: ej.PivotChart.ChartTypes.Column, tooltip: { visible: true }};
$(function(){
ReactDOM.render(
<EJ.PivotChart id="Olap" dataSource= {Olap_dataSource} isResponsive={true} commonSeriesOptions= {def_commonSeriesOption} size= {chart_size}></EJ.PivotChart>,
document.getElementById('PivotChart1')
);
});
</script>The above code will generate a simple PivotChart with internet sales amount over a period of fiscal years across different customer geographic locations.
