This tutorial will help you integrate the pivot table with the RequireJS framework. Follow this guide to set up a simple RequireJS project using Flexmonster Pivot Table & Charts.
To run a simple application, you will need Node.js and npm. Get it here if it’s not already installed on your machine.
Download the .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
Install the npm packages described in package.json
:
npm install
Open the index.html
file in the browser to see the result.
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; here 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 content of the key files:
requirejs(["node_modules/flexmonster/flexmonster.full.js"],
function() {
var pivot = new Flexmonster({
container: "pivotContainer",
toolbar: true,
report: "https://cdn.flexmonster.com/reports/report.json"
})
})
<!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>
You may be interested in the following articles: