1.Integration with RequireJS

This tutorial will help you integrate Flexmonster with the RequireJS framework. Follow this guide to set up a simple RequireJS project with Flexmonster Pivot Table and Charts.

Project structure

Here is an overview of a sample folder structure:

js/ – the folder that contains all JavaScript files
- app/ – the folder that contains application JS files
  - main.js – the main application JavaScript file
- lib/ – the folder that contains the project’s dependencies
  - flexmonster/ – the folder with Flexmonster files
  - require.js – the RequireJS library
- app.js – the main RequireJS file, contains configuration
app.html – the main HTML file, the entry point to your project

Find contents of key files below.

app.html

<!DOCTYPE html>
<html>
    <head>
        <title>RequireJS Sample Page</title>
        <script data-main="js/app" src="js/lib/require.js"></script>
    </head>
    <body>
        <h1>RequireJS+Flexmonster Sample Page</h1>
        <div id="fm-container"></div>
    </body>
</html>

js/app.js

/* Place third party dependencies in the lib folder.
Configure loading modules from the lib directory, except 'app' ones. */

requirejs.config({
    "baseUrl": "js/lib",
    "paths": {
      "app": "../app"
    }
});

/* Load the main app module to start the app. */
requirejs(["app/main"]);

js/app/main.js

/* Note that licenseKey is your license or trial key, 
so replace XXXX-XXXX-XXXX-XXXX-XXXX with an actual key. */

define(["flexmonster/flexmonster"], function() {
    new Flexmonster({
	    container: "fm-container",
    	componentFolder: "js/lib/flexmonster/",
	    width: "100%",
	    height: "500",
	    toolbar: true,
	    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
	    report: "https://cdn.flexmonster.com/reports/report.json"
    });
});