How to use inline JSON data

JSON data source is good to display data which already is on your page. This is the most simple case of the configuration.

The component supports a certain format of JSON – array of objects, where each object is an unordered set of name/value pairs. For example:

var jsonData = [
   {
      "Color" : "green",
      "Country" : "Canada",
      "State" : "Ontario",
      "City" : "Toronto",
      "Price" : 174,
      "Quantity" : 22
   },
   {
      "Color" : "red",
      "Country" : "USA",
      "State" : "California",
      "City" : "Los Angeles",
      "Price" : 166,
      "Quantity" : 19
   }
];

You need to accomplish the following steps to use JSON data as a data source in pivot table embedded into your project.

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: "Z72R-XHF66S-1T5J3K-2D6X5A-2M216D-4V6969-241A6T-394Z4Z-14215Y-306T25"
     });
  </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

Copy the following JSON and paste it into your HTML page:

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

<script>

   var jsonData = [
      {
         "Color" : "green",
         "Country" : "Canada",
         "State" : "Ontario",
         "City" : "Toronto",
         "Price" : 174,
         "Quantity" : 22
      },
      {
         "Color" : "red",
         "Country" : "USA",
         "State" : "California",
         "City" : "Los Angeles",
         "Price" : 166,
         "Quantity" : 19
      }
   ];

   var pivot = new Flexmonster({
      container: "pivotContainer",
      toolbar: true,
      report: {
         dataSource: {
            data: jsonData
         }
      },
      licenseKey: "Z72R-XHF66S-1T5J3K-2D6X5A-2M216D-4V6969-241A6T-394Z4Z-14215Y-306T25"
   });
</script>

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

See live demo

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

See also:

Data types in JSON