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

    Quick start

    This guide explains how to get started with Flexmonster Pivot Table & Charts.

    To use Flexmonster with frameworks, see our guides on integrations with:

    To use Flexmonster in a pure JavaScript project, follow the steps below.

    Step 1. Add a container for Flexmonster

    Create a <div> container for the component:

    <div id="pivotContainer">The component will appear here</div>

    Step 2. Include Flexmonster in the HTML page

    Download Flexmonster if it is not added to your project yet. 

    Then, include the component in your webpage with one of the following scripts:

    Include from the npm package

    <div id="pivotContainer">The component will appear here</div>
    <script src="node_modules/flexmonster/flexmonster.js"></script>

    Include from CDN

    <div id="pivotContainer">The component will appear here</div>
    <script src="https://cdn.flexmonster.com/flexmonster.js"></script>

    Include from the download package

    <div id="pivotContainer">The component will appear here</div>
    <script src="flexmonster/flexmonster.js"></script>

    Step 3. Embed the component

    Add a simple script to embed the component into the webpage:

    For the npm package

    <div id="pivotContainer">The component will appear here</div>
    <script src="node_modules/flexmonster/flexmonster.js"></script>
    
    <script>
        let pivot = new Flexmonster({
            container: "pivotContainer",
            componentFolder: "node_modules/flexmonster/",
            toolbar: true
        });
    </script>

    Notice the componentFolder parameter – it should point to the folder with Flexmonster files. Since Flexmonster is included via npm, componentFolder should be defined as node_modules/flexmonster/.

    For downloads from our CDN

    <div id="pivotContainer">The component will appear here</div>
    <script src="https://cdn.flexmonster.com/flexmonster.js"></script>
    
    <script>
        let pivot = new Flexmonster({
            container: "pivotContainer",
            componentFolder: "https://cdn.flexmonster.com/",
            toolbar: true
        });
    </script>

    Notice the componentFolder parameter – it should point to the folder with Flexmonster files. Since Flexmonster is included from our CDN, componentFolder should be defined as https://cdn.flexmonster.com/.

    For the download package

    <div id="pivotContainer">The component will appear here</div>
    <script src="flexmonster/flexmonster.js"></script>
    
    <script>
        let pivot = new Flexmonster({
            container: "pivotContainer",
            componentFolder: "flexmonster/",
            toolbar: true
        });
    </script>

    This step mentions only some of Flexmonster’s initialization parameters. See the full list of available parameters in the API reference: Flexmonster().

    Step 4. See the result

    Open the created webpage in a browser to see Flexmonster without data. Here is a live JSFiddle sample of the expected result.

    Troubleshooting

    If you run into any issues, visit our troubleshooting page

    Next steps

    Visit the following guides to learn about different aspects of using Flexmonster: