Quick start

Follow this article to get started with Flexmonster Pivot Table & Charts in just 5 minutes!

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

Initialize Flexmonster

Embed Flexmonster Pivot into your web page in 4 simple steps. If you run into any issues, visit our troubleshooting page.

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

If Flexmonster is not yet downloaded on your system, get Flexmonster, then include it in your web page 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 web page:

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 flexmonster/ folder. 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 flexmonster/ folder. 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>

Flexmonster has more initialization parameters — check them out here.

Step 4. See the result

Now launch the page from a browser — the component without data is embedded into your project! You can see a live example on JSFiddle.

Troubleshooting

If you run into any issues, visit our troubleshooting page.

Next steps

Visit our detailed guides to learn the different aspects of using the component: