Menu
Download Free Trial
Table of contents

Set report to the component

There are several ways to set report in JSON or XML format to the component:

  • Using report object in $(“#pivotContainer”).flexmonster() API call
    <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>
    
  • Using setReport() API call
    <button onclick="setReport()">Set report</button>
    <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"
    	});
    
    	function setReport() {
    		var report = flexmonster.getReport();
    		// parse, change or save for later use
    		flexmonster.setReport(report);
    	}
    </script>
    
  • Using open() API call to select JSON file from the local file system. In previous versions, reports were in XML format. You can open them as well as JSON.
    <button onclick="openReport()">Open report JSON</button>
    <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"
    	});
    
    	function openReport() {
    		flexmonster.open();
    	}
    </script>
  • Using load() API call to load JSON file from URL. In previous versions, reports were in XML format. You can open them as well as JSON.
    <button onclick="loadReport()">Load report JSON</button>
    <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"
    	});
    
    	function loadReport() {
    		flexmonster.load("report.json");
    	}
    </script>