Integration with RequireJS

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

Prerequisites

To run a simple application, you will need Node.js and npm. Get them here if they are not already installed on your machine.

Step 1. Create a new project based on the sample from GitHub

Download a .zip archive with the sample or clone it from GitHub with the following command:

git clone https://github.com/flexmonster/pivot-requirejs
cd pivot-requirejs

Step 2. Install npm packages

Install the npm packages described in package.json:

npm install

Step 3. Run the sample project

Open the index.html file in the browser to see the result.

Project structure

Let’s take a closer look at the folder structure of this application:

scripts/ – the folder containing application JavaScript files:
- main.js – the main application file; this is where we embed Flexmonster.
- require.js – the RequireJS library.
index.html – here we add the <div> container for Flexmonster.
package.json – contains the description of the npm packages.

Take a look at the contents of the key files:

scripts/main.js

requirejs(["node_modules/flexmonster/flexmonster.full.js"], 
function() {
    var pivot = new Flexmonster({
        container: "pivotContainer",
        toolbar: true,
        report: "https://cdn.flexmonster.com/reports/report.json"
    })
})

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Flexmonster Sample Project</title>
      <!-- data-main attribute tells require.js to load
           scripts/main.js after require.js loads. -->
      <script data-main="scripts/main" 
              src="scripts/require.js">
      </script>
      <link rel="stylesheet" type="text/css" 
            href="node_modules/flexmonster/flexmonster.css">
  </head>
  <body>
    <h1>Flexmonster Sample Project</h1>
    <div id="pivotContainer"></div>
  </body>
</html>

What’s next?

You may be interested in the following articles: