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.
Download Flexmonster if it is not added to your project yet.
Then, include the component in your webpage with one of the following scripts:
<script src="node_modules/flexmonster/flexmonster.js"></script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="flexmonster/flexmonster.js"></script>
Create a <div>
container for the component:
<div id="pivotContainer">The component will appear here</div>
Add a simple script to embed the component into the webpage:
<script src="node_modules/flexmonster/flexmonster.js"></script> <div id="pivotContainer">The component will appear here</div> <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/
.
<script src="https://cdn.flexmonster.com/flexmonster.js"></script> <div id="pivotContainer">The component will appear here</div> <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/
.
<script src="flexmonster/flexmonster.js"></script> <div id="pivotContainer">The component will appear here</div> <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: