Embedding your First Pivot
Here, we will guide you through the process of embedding Pivot Table into your HTML page with your own data.
All you need for the quick start are under Pivot folder in the Download Package.
Embedding consist of 2 steps:
- Inserting Pivot Component to your page
In our example we use easy-to-use SWFobject library, you may use any kind of embedding into HTML.
- Pivot Component configuration:
Embed Pivot vith Flash Vars configuration
To get your first embedded Pivot Table with Flash Vars configuration you should accomplish the following steps:
- Copy content of Pivot folder (Pivot component and supported files) to root of your site or sandbox folder.
-
Insert Pivot component into your HTML file – paste code below:
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashContent">No Flash player or Javascript disabeled message</div>
<script type="text/javascript">
var so = new SWFObject("PivotTable.swf", "flash", "1000", "720", "9", "#FFFFFF");
so.addParam("allowScriptAccess", "sameDomain");
so.addParam("menu", "false");
so.addParam("allowFullScreen", "true");
so.addVariable("filename", "data/data.csv");
so.addVariable("styleSheetName", "original.css");
so.addVariable("configuratorEnabled", "true");
so.addVariable("chartsEnabled", "true");
so.write("flashContent");
flash.focus();
</script>
- Set path to your CSV file. To do this change value of filename FlashVar: replace data/data.csv with your own path.
so.addVariable("filename", "data/data.csv");
- Refresh your HTML page - you will see an empty grid and opened configurator.
- Choose data for your first report by using configurator. Drag'n'drop at least 1 field from Select Dimensions to Columns and Row boxes, click preferred aggregation in Select Values box, press Update.
Show process
- Enjoy your first pivot report!
If you have any troubleshooting with this process, open FirtsPivot.html to see Pivot Component example with sample data.
Embed Pivot vith XML configuration
This way is a little more comlicated, but more powerful. Advantages are xml simplicity, usability, and more tools for creating predefined reports.
To get your embedded Pivot Table with XML configuration you should accomplish the following steps:
- Copy content of Pivot folder (Pivot component and supported files) to root of your site or sandbox folder.
-
Insert Pivot component into your HTML file – paste code below:
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashContent">No Flash player or Javascript disabeled message</div>
<script type="text/javascript">
var so = new SWFObject("PivotTable.swf", "flash", "1000", "720", "9", "#FFFFFF");
so.addParam("allowScriptAccess", "sameDomain");
so.addParam("menu", "false");
so.addParam("allowFullScreen", "true");
so.addVariable("configUrl", "config.xml");
so.write("flashContent");
flash.focus();
</script>
- Edit config.xml: change path to your CSV file:
<dataSource type="CSV">
<filename>data/data.csv</filename>
</dataSource>
- Refresh your HTML page - you will see an empty grid and opened configurator.
- Choose data for your first report by using configurator. Drag'n'drop at least 1 field from Select Dimensions to Columns and Row boxes, click preferred aggregation in Select Values box, press Update.
Show process
- Enjoy your first pivot report!
Pivot Component package structure
Pivot folder contains Pivot Component files:
- Pivot Component files - 2 swf files: PivotTable.swf and assets.swf
- Pivot HTML wrapper - FirstPivot.html
- Optional: libraries for inserting swf files in HTML and checking flash player version (we use swfobject.js in example)
- Optional: libraries for installing needed player version (playerProductInstall.swf)
- Pivot Configuration file - config.xml
- Pivot style CSS file - original.css
- Pivot style images folder - styles folder
- Pivot data source - data folder 'data' with example .csv file
Troubleshooting
- Empty screen and endless Loading
Chek .swf files to be in root folder as in example
- Error Alert: Report has incorrect parameters
Please check that report fields are correct. Also review if CSV file was generated correctly – check original sample data file for comparing.
- Error Alert: Cannot load style's file
Check if Pivot Component has proper configuration and URL to CSS file.
- Error Alert: Unable to open file [...]
Pivot Component cant load file. Check paths to CSV, CSS files in configuration file config.xml. If Pivot Component cannot load image file, check if styles folder is in root of your site or sandbox folder.