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.
Create a <div>
container for the component:
<div id="pivotContainer">The component will appear here</div>
Download Flexmonster if it is not added to your project yet.
Then, include the component in your webpage with one of the following scripts:
<div id="pivotContainer">The component will appear here</div>
<script src="node_modules/flexmonster/flexmonster.js"></script>
<div id="pivotContainer">The component will appear here</div>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivotContainer">The component will appear here</div>
<script src="flexmonster/flexmonster.js"></script>
Add a simple script to embed the component into the webpage:
<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/
.
<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/
.
<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().
Open the created webpage in a browser to see Flexmonster without data. Here is a live JSFiddle sample of the expected result.
If you run into any issues, visit our troubleshooting page.
Visit the following guides to learn about different aspects of using Flexmonster: