How to connect to static CSV or JSON files

Step 1: Embed the component into your web page

Embedding Flexmonster Pivot is a simple copy-paste procedure that takes just minutes!

• Copy contents of client/ folder into the web project root to your server.
• Create <div> container for the component:

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

• Include flexmonster.js into your HTML page. Please note, that your page should be in the same folder as flexmonster/:

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

• Add simple script to embed the component:

  <div id="pivotContainer">The component will appear here</div>
  <script type="text/javascript" src="flexmonster/flexmonster.js"></script>
  
  <script>
     var pivot = new Flexmonster({
        container: "pivotContainer",
        toolbar: true,
        licenseKey: "Z7YP-XDBA07-5L1X6W-51086O"
     });
  </script>
  

Run your web page and see the empty table. The next step is to see your own data on the grid.

Step 2: Configure report with your own data

Let’s say you have the following CSV file called data.csv. To make it simple, copy this file to the flexmonster/ folder.

Category,Size,Color,Destination,Business Type,Country,Price,Quantity,Discount
Accessories,262 oz,red,Australia,Specialty Bike Shop,Australia,174,225,23
Accessories,214 oz,yellow,Canada,Specialty Bike Shop,Canada,502,90,17
Accessories,147 oz,white,France,Specialty Bike Shop,France,242,855,37
Accessories,112 oz,yellow,Germany,Specialty Bike Shop,Germany,102,897,42

Add filename property to report object:

var pivot = new Flexmonster({
   container: "pivotContainer",
   toolbar: true,
   report: {
      dataSource: {
         /* OR URL to the CSV file */  
         filename: "data.csv",

         /* OR URL to the JSON file */  
         /*filename: "data.json",*/
      }
   },
   licenseKey: "Z7YP-XDBA07-5L1X6W-51086O"
);

Launch the web page from browser — here you go! A pivot table is embedded into your project.

See live demo

See how CSV is used in client/index.html and connect to your own CSV or JSON.

See also:

JSON data source

CSV data source