Embed into the Web Application

After the installation of the component, all SWF files you need for the quick start already are in the appropriate folder in your web application.

Here, we will guide you through the process of embedding Pivot Table and Charts component into your HTML using SWFObject 2.2 library. To get your embedded Pivot Table component you should accomplish the following steps:

  1. Link Pivot Table and Cahrts component JavaScript libraries - copy the code below and paste it in your HTML <head> tag:
    <script type="text/javascript" src="index_resourses/js/swfobject.js"></script>
    <script type="text/javascript" src="index_resourses/js/wheel.js"></script>
    Where:
    swfobject.js — SWFObject 2.2 library for inserting Adobe Flash content into web-pages.
    wheel.js — enabling Mouse wheel scroll for Pivot Table and Charts component.
  2. Initialize Pivot Table and Charts component using SWFObject 2.2 library. Copy the code below and paste it in your HTML <body> tag:
    <script type="text/javascript">
      //Inserting Pivot Table and Charts Component using SWFObject library 2.2

      var swfFilePath = "";
      var attributes = {
        id : "flash",
        name : "flash"
      };
      var params = {
        allowScriptAccess : "always",
        menu : "false",
        wmode : "opaque",
        allowFullScreen : "true"
      };
      var flashvars = {
        swfFilePath : swfFilePath,
        configUrl : ""
      };

      swfobject.embedSWF(swfFilePath + "PivotTable.swf", "flashContent", "100%", "500", "10.0.0", swfFilePath + "expressInstall.swf", flashvars, params, attributes, swfAdded);

      function swfAdded(e) {
        if (e.success) initScrollListening();
      }
    </script>
    Where:
    swfFilePath - flashvar to define tha path from HTML file to the component SWF files.
    configUrl - flashvar to define the path to XML configuration file.
    initScrollListening() - JavaScript function from wheel.js library; it enables Pivot Table and Charts scrolling by mouse wheel.

If you have any troubleshooting with this process, open index.html from your package to see the example of Pivot Table and Charts embedding with sample data. Also see Troubleshooting.