Get Started with Flexmonster Pivot Table and Charts Component in 5 minutes!

Get Flexmonster

Download Flexmonster to get the compiled CSS and JavaScript or include it with npm package manager.

• Download

  Download a free trial of the component and extract the files from the downloaded package. Copy flexmonster/ folder into your web project root to your server. Note: our free trial ships with license key for 30 days.

• Use npm package manager

  Our Pivot Table is available as npm package flexmonster. Run the command to install Flexmonster as a node module and save it as a dependency in your package.json:

  npm i flexmonster --save
  

  Get a free 30-day trial license key to use Flexmonster (the key is sent via email).

Initialization

To get your Pivot Table component embedded you should accomplish the following steps:

1. Create <div> container for the component:

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

2. Include flexmonster.js into your HTML page:

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

   Note: src should contain the path to your flexmonster.js, when installing Flexmonster via npm the path will be the following: node_modules/flexmonster/flexmonster.js
3. Add simple script to embed the component. licenseKey is your license or trial key, so you should replace XXXX-XXXX-XXXX-XXXX-XXXX with an actual key:

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

   Note 1: componentFolder should point to flexmonster/ folder. For example, when Flexmonster is included via npm, componentFolder should be defined as node_modules/flexmonster/
   Note 2: Flexmonster has more initialization parameters, check them out.
4. Now launch the page from browser — here you go! The component without data is embedded into your project. You can see the example on JSFiddle.

Troubleshooting

Should you have any problems — visit our troubleshooting page.

Next Steps

The next step is to see your own data on the grid. Find detailed tutorials for connecting Pivot Table to the following data sources: JSON, CSV, SQL database, Microsoft Analysis Services, Mondrian and icCube.