Menu
Download Free Trial
Table of contents

Your first pivot table

This article explains how to create your first pivot table based on a simple report with JSON as a data source. JSON data source is good to display data which already is on your page. This is the most simple case of the configuration.

You already know how to install the component. Now it is time to see data in it and configure what you want to see in rows and in columns.

  1. You already have in your HTML page the following empty pivot table component:
    <div id="pivotContainer">The component will appear here</div>
    <script src="flexmonster/lib/jquery.min.js"></script>
    <script src="flexmonster/flexmonster.js"></script>
    
    <script>
    	var pivot = $("#pivotContainer").flexmonster({
    		toolbar: true,
    		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
    	});
    </script>
  2. Copy the following JSON and paste it into your HTML page:
    <div id="pivotContainer">The component will appear here</div>
    <script src="flexmonster/lib/jquery.min.js"></script>
    <script src="flexmonster/flexmonster.js"></script>
    
    <script>
    
    	var jsonData = [
    	{
    		"Color" : "green",
    		"Сountry" : "Canada",
    		"State" : "Ontario",
    		"City" : "Toronto",
    		"Price" : 174,
    		"Quantity" : 22
    	},
    	{
    		"Color" : "red",
    		"Country" : "USA",
    		"State" : "California",
    		"City" : "Los Angeles",
    		"Price" : 166,
    		"Quantity" : 19
    	}
    	];
    
    
    	var pivot = $("#pivotContainer").flexmonster({
    		toolbar: true,
    		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
    	});
    </script>
  3. Add data property to report object:
    <div id="pivotContainer">The component will appear here</div>
    <script src="flexmonster/lib/jquery.min.js"></script>
    <script 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 = $("#pivotContainer").flexmonster({
    		toolbar: true,
    		report: {
    			dataSource: {
    				data: jsonData
    			}
    		},
    		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
    	});
    </script>
  4. Define a slice – fields that go to rows, go to columns and go to measures:
    <div id="pivotContainer">The component will appear here</div>
    <script src="flexmonster/lib/jquery.min.js"></script>
    <script 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 = $("#pivotContainer").flexmonster({
    		toolbar: true,
    		report: {
    			dataSource: {
    				data: jsonData
    			},
    			slice: {
    				rows: [
    				{ uniqueName: "Color" },
    				{ uniqueName: "[Measures]" }
    				],
    				columns: [
    				{ uniqueName: "Country" }
    				],
    				measures: [
    				{
    					uniqueName: "Price", 
    					aggregation: "sum" 
    				}
    				]
    			}
    		},
    		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
    	});
    </script>
  5. Now launch the page from browser — here you go! Your first pivot table based on JSON data is ready.