Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    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 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

    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: