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:

Embed Pivot vith Flash Vars configuration

To get your first embedded Pivot Table with Flash Vars configuration you should accomplish the following steps:

  1. Copy content of Pivot folder (Pivot component and supported files) to root of your site or sandbox folder.
  2. 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>
  3. 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");
  4. Refresh your HTML page - you will see an empty grid and opened configurator.
  5. 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
  6. 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:

  1. Copy content of Pivot folder (Pivot component and supported files) to root of your site or sandbox folder.
  2. 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>
  3. Edit config.xml: change path to your CSV file:
    <dataSource type="CSV">
        <filename>data/data.csv</filename>
    </dataSource>
  4. Refresh your HTML page - you will see an empty grid and opened configurator.
  5. 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
  6. Enjoy your first pivot report!

Pivot Component package structure

Pivot folder contains Pivot Component files:

Troubleshooting