We have updated Flexmonster Software License Agreement, effective as of September 30, 2025 (list of changes)
All documentation
Connecting to data source

Integration with RequireJS

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

Prerequisites

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

To get our sample project, download it as ZIP or clone it with the following commands:

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

Step 2. Install npm dependencies

Install the npm dependencies 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 JavaScript files for the application:
    • 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 dependencies.

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>

Troubleshooting

If you run into any issues, visit our troubleshooting page

See also