Menu
Download Free Trial
  1. Getting started
    1. Quickstart
    2. System requirements
    3. Managing license keys
    4. Updating to the latest version
    5. Typical errors
    6. Migration guide
    7. Installation troubleshooting
  2. JSON data source
    1. Data types in JSON
  3. CSV data source
    1. Data types in CSV
  4. Connecting to SQL database
    1. Connecting to database with .NET
    2. Connecting to database with Java
    3. Connecting to database with PHP
  5. Connecting to Microsoft Analysis Services
    1. Getting started with Accelerator
    2. Installing Accelerator as a Windows Service
    3. Configuring username/password protection
    4. Configuring secure HTTPS connection
    5. Troubleshooting
  6. Connecting to Pentaho Mondrian
    1. Getting started with Accelerator
    2. Configuring Mondrian roles
    3. Сonfiguring username/password protection
    4. Сonfiguring secure HTTPS connection
    5. Troubleshooting
  7. Connecting to icCube
  8. Configuring report
    1. Data source
    2. Slice
    3. Options
    4. Number formatting
    5. Conditional formatting
    6. Set report to the component
    7. Get report from the component
    8. Date and time formatting
    9. Calculated values
    10. Custom sorting
  9. Integration
    1. Integration with AngularJS
    2. Integration with Angular 2
    3. Integration with Angular 4
    4. Integration with React
    5. Integration with RequireJS
    6. Integration with TypeScript
    7. Integration with ASP.NET
    8. Integration with JSP
    9. Integration with PhoneGap
  10. Integration with charts
    1. Integration with Highcharts
    2. Integration with FusionCharts
    3. Integration with Google Charts
    4. Integration with any charting library
  11. Customizing toolbar
  12. Customizing appearance
  13. Localizing component
  14. Global Object
  15. Export and print
  16. API reference - JavaScript
  17. API reference - Flex
Table of contents

Integration with PhoneGap

This tutorial will help you to integrate Pivot Table Component with PhoneGap. Follow the steps to setup a simple PhoneGap project with Flexmonster Pivot Table:

Step 1. Create new PnoneGap project

  1. Open PhoneGap. If it is not installed, download and install PhoneGap using very detailed step by step instructions here.
  2. Click File. filephonegap
  3. Choose Create new project. newprojectphonegap
  4. Choose Hello World template and click Next. templatephonegap
  5. Enter local path, app name and click Create project. createprojectphonegap
  6. Your project will run automatically. See it by clicking on the IP address at the bottom of PhoneGap window. openprojectphonegap
  7. Make sure you see the default page in the browser. defaultpagephonegap

Step 2. Add Flexmonster files

Copy flexmonster/ from the download package to www/ folder. flexmonsterfolderphonegap

Step 3. Add Flexmonster dependencies to www/index.html

Inside www/index.html find where cordova.js is included. Add jQuery and Flexmonster libraries before cordova.js.

<script type="text/javascript" src="flexmonster/lib/jquery.min.js"></script>
<script type="text/javascript" src="flexmonster/flexmonster.js"></script>
<script type="text/javascript" src="cordova.js"></script>

Step 4. Create Pivot Table

  1. Open www/index.html and create <div> container for the component inside <p class="event received"></p>. Also, remove class="blink" from <div id="deviceready" class="blink">.
    <div class="app">
      <h1>PhoneGap</h1>
        <div id="deviceready">
          <p class="event listening">Connecting to Device</p>
          <p class="event received">
            <div id="pivotContainer" 
            style="position:absolute !important; left:0px; top:0px;"></div>
          </p>
        </div>
    </div>
    
  2. Open www/js/index.js and add simple script to embed the component inside receivedEvent function. Please note, licenseKey is your license or trial key, so you should replace XXX with an actual key.
    // Update DOM on a Received Event
    receivedEvent: function(id) {
      var parentElement = document.getElementById(id);
      var listeningElement = parentElement.querySelector('.listening');
      var receivedElement = parentElement.querySelector('.received');
    
      listeningElement.setAttribute('style', 'display:none;');
      receivedElement.setAttribute('style', 'display:block;');
    
      console.log('Received Event: ' + id);
    
      var pivot = flexmonster.embedPivotComponent(
        "flexmonster/", "pivotContainer", "100%", "100%", 
        { 
          filename: "http://www.flexmonster.com/download/data.csv",
          licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
        }, true
      );
    }
    
  3. See Pivot Table embedded into the project by clicking the IP address at the bottom of PhoneGap window. openprojectphonegap

Open www/css/index.css to configure the style of the component. For example, remove text-transform:uppercase; and letters will become normal sized.

You can download the full example here.