JSFiddle - React, Tailwind, and code Playground

by Iryna Kulchytska

HTML

<script src="http://www.flexmonster.com/flexmonster/flexmonster.js"></script>
<div id="pivotContainer">The component will appear within this DIV.</div>

JavaScript

flexmonster.embedPivotComponent("http://flexmonster.com/flexmonster/", "pivotContainer", "100%", "600", {
    jsPivotCreationCompleteHandler: pivotCreationCompleteHandler, 
    licenseKey: "Z540-0B1ON3-3H1H-2M2I-1W2S-1X2B-2B38"
}, "html5", true);

function pivotCreationCompleteHandler() { 
	setDataViaAPI(); 
} 
  
function setDataViaAPI() { 
	addDataStructure(); 
	addData(); 
	setReport(); 
} 
      
function addDataStructure() { 
	flexmonster.addDimension({uniqueName: "[Color]", caption: "Color"}); 
	flexmonster.addHierarchy({uniqueName: "[Color].[Color]", caption: "Color", dimensionUniqueName: "[Color]"}); 
                            
	flexmonster.addDimension({uniqueName: "[Style]", caption: "Style"}); 
	flexmonster.addHierarchy({uniqueName: "[Style].[Style]", caption: "Style", dimensionUniqueName: "[Style]"}); 
                    
	//add measures using addMeasure() API call
	flexmonster.addMeasure({uniqueName: "[Measures].[Price]", caption: "Price"});
	flexmonster.addMeasure({uniqueName: "[Measures].[Discount]", caption: "Discount", aggregation: "average"});
                    
	flexmonster.addDimension({uniqueName: "[Date]", caption: "Date"});       
	flexmonster.addHierarchy({uniqueName: "[Date].[Date]", caption: "Date", dimensionUniqueName: "[Date]"}); 
} 
      
function addData() {     
	var data = [ 
	["red", "classic", 12.00, 3, "01/05/2014"], 
	["blue", "classic", 13.00, 2, "01/06/2014"], 
	["white", "sport", 44.00, 6, "01/07/2014"], 
	["red", "modern", 15.00, 3, "01/08/2014"], 
	["yellow", "modern", 10.00, 0, "01/08/2014"], 
	["yellow", "classic", 13.00, 3, "01/09/2014"], 
	["yellow", "sport", 30.00, 0, "01/09/2014"] 
	]; 

	flexmonster.addDataArray(data); 
} 
    
function setReport() { 
	var report = { 
		dataSourceType: "api", 
		showDefaultSlice: false 
	}; 

	flexmonster.setReport(report);     
}