Define Data Source

After the embed the component into your HTML page, the next step is the configuration of your data source.

Here, we will guide you through the process of defining the data source for Pivot Table and Charts Component. You can define the one from the following data sources: CSV, Mondrian or Microsoft Analysis Services. Please note, that not all the editions of Pivot Table and Charts Component allow to connect to Mondrian and Microsoft Analysis Services. Also, each edition has the data amount limitation. Depending on the data source type, follow the one of the following sections bellow.

CSV

To connect Pivot Table component to your CSV data source, you should accomplish the following steps:
  1. Create the following XML configuration file config.xml in the Pivot Table component folder in your web application:
    <config>
      <dataSource type="CSV">
      </dataSource>
    </config>
  2. Put the path to CSV data source in configuration file. It can be CSV file or path to the service which returns CSV:
    <config>
      <dataSource type="CSV">
        <filename>data/data.csv</filename>
      </dataSource>
    </config>
  3. Edit your HTML page where the Pivot Table component has been embedded and add path to config.xml in configUrl parameter. For example:

    <script type="text/javascript" src="flexmonster/flexmonster.js"></script>
    <script type="text/javascript">
    var params = {
        configUrl : "config.xml"
     };
    flexmonster.embedPivotComponent("flexmonster/", "pivotContainer","100%", "500", params);
    </script>

  4. Open your HTML page in the browser - you will see an empty grid and opened Fields List.
  5. Choose data for your first report by using Fields List. Drag and 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!

Mondrian

To connect Pivot Table component to Mondrian, you should accomplish the following steps:
  1. Create the following XML configuration file config.xml in the Pivot Table component folder in your web application:
    <config>
      <dataSource type="Mondrian">
      </dataSource>
    </config>
  2. Define your service info, data source catalog name, cube name, and proxy URL:
    <config>
      <dataSource type="Mondrian">
        <dataSourceInfo>Provider=Mondrian;DataSource=MondrianFoodMart;</dataSourceInfo>
        <catalog>FoodMart</catalog>
        <cube>Sales</cube>
        <proxyUrl>http://olap.flexmonster.com:8080/mondrian/xmla</proxyUrl>
      </dataSource>
    </config>
  3. Edit your HTML page where the Pivot Table component has been embedded and add path to config.xml in configUrl parameter. For example:
    <script type="text/javascript" src="flexmonster/flexmonster.js"></script>
    <script type="text/javascript">
    var params = {
        configUrl : "config.xml"
     };
    flexmonster.embedPivotComponent("flexmonster/", "pivotContainer","100%", "500", params);
    </script>
  4. Open your HTML page in the browser - you will see an empty grid and opened Fields List.
  5. Choose data for your first report by using Fields List. Drag and 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!

Microsoft Analysis Services

To connect Pivot Table component to Microsoft Analysis Services, you should accomplish the following steps:
  1. Create the following XML configuration file config.xml in the Pivot Table component folder in your web application:
    <config>
      <dataSource type="MSOLAP">
      </dataSource>
    </config>
  2. Define your service info, data source catalog name, cube name, and proxy URL:
    <config>
      <dataSource type="MSOLAP">
        <dataSourceInfo>Provider=MSOLAP; Data Source=extranet;</dataSourceInfo>
        <catalog>Adventure Works DW Standard Edition</catalog>
        <cube>Adventure Works</cube>
        <proxyUrl>http://olap.flexmonster.com/olap/msmdpump.dll</proxyUrl>
      </dataSource>
    </config>
  3. Edit your HTML page where the Pivot Table component has been embedded and add path to config.xml in configUrl parameter. For example:
    <script type="text/javascript" src="flexmonster/flexmonster.js"></script>
    <script type="text/javascript">
    var params = {
        configUrl : "config.xml"
     };
    flexmonster.embedPivotComponent("flexmonster/", "pivotContainer","100%", "500", params);
    </script>
  4. Open your HTML page in the browser - you will see an empty grid and opened Fields List.
  5. Choose data for your first report by using Fields List. Drag and 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 index.html from your package to see the example of Pivot Table and Charts embedding with sample data. Also see Troubleshooting.