Flexmonster CSS Demo

by Uaman23

HTML

<script src="https://s3.amazonaws.com/flexmonster/2.2/flexmonster.js"></script>
<div id="pivot-content"></div><!-- New Structure -->
<div id="pivot-content2"></div><!-- Classic Structure -->

JavaScript

var p = flexmonster.embedPivotComponent("https://s3.amazonaws.com/flexmonster/2.2/", "pivot-content", "100%", "300", {
  licenseKey: "Z53G-1T1WC3-1V1M-0L12-2M0A-1233-1I0Y-2Y2Q-1903-322S-0T2C-1I",
  configuratorActive: false,
  showGrandTotals: false,
  data: getDataNew(),
  rows: [{ uniqueName: "Product" }],
  columns: [{ uniqueName: "[Measures]" }
  ],
  measures: [
    { uniqueName: "02-02-2005", aggregation: "sum", format: "currency", active: true},
    { uniqueName: "02-03-2005", aggregation: "sum", format: "currency", active: true},
    { uniqueName: "02-04-2005", aggregation: "sum", format: "currency", active: true},
    { uniqueName: "02-05-2005", aggregation: "sum", format: "currency", active: true} ] 
},false);

var p2 = flexmonster.embedPivotComponent("https://s3.amazonaws.com/flexmonster/2.2/", "pivot-content2", "100%", "300", {
  licenseKey: "Z53G-1T1WC3-1V1M-0L12-2M0A-1233-1I0Y-2Y2Q-1903-322S-0T2C-1I",
  configuratorActive: false,
  showGrandTotals: false,
  drillAll:true,
  expandAll:true,
  data: getDataClassic(),
  rows: [{ uniqueName: "Product" }],
  columns: [{uniqueName: "Period.Month"},{uniqueName: "Period.Day"},
    { uniqueName: "[Measures]" }
  ],
  measures: [
    { uniqueName: "Sells", aggregation: "sum", format: "currency", active: true}   ] 
},false);



function getDataNew() {
  return [{
    "Product": "Water",
    "02-03-2005": "2",
    "02-02-2005": "3",
    "02-04-2005": "10",
    "02-05-2005": "15"  
  }, {
    "Product": "Bottle",
    "02-03-2005": "10",
    "02-02-2005": "2",
    "02-04-2005": "3",
    "02-05-2005": "4"  
  }, {
    "Product": "Cheese",
    "02-03-2005": "45",
    "02-02-2005": "56",
    "02-04-2005": "36",
    "02-05-2005": "48"  
  }]
}

function getDataClassic() {
  return [{
                "Product": "Water",
                "Period": "2005-02-03",
                "Sells": "10"
            },
            {
                "Product": "Water",
                "Period": "2005-02-02",
                "Sells":...