Tabs Example

Embedding Flexmonster

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div class="tab">
  <button class="tabnew" onclick="newPivot()">+ NEW</button>
</div>

<div id="pivotcontent"></div>

CSS

/* Style the tab */

div.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

div.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}


/* Change background color of buttons on hover */

div.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

div.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 0;
  border: none;
  border-top: none;
  outline: 3px solid red;
}

.tabcontent.active {
  display: block;
}

JavaScript

var pivotId = 0;

function newPivot() {
  pivotId++;

  var pivotName = 'pivotDiv' + pivotId;
  var pivotArea = $('<div id="' + pivotName + '" class="tabcontent"></div>');
  var newButton = $('<button class="tablink">Pivot ' + pivotId + '</button>');
  $('.tab').append(newButton);
  $('#pivotcontent').append(pivotArea);

  newButton.on('click', function() {
    $('.tablink,.tabcontent').removeClass('active');
    newButton.addClass('active');
    pivotArea.addClass('active');

    if (pivotArea.children().length == 0) {
      var pivot = new Flexmonster({
        container: pivotName,
        componentFolder: "https://cdn.flexmonster.com/",
        width: "98%",
        height: 450,
        toolbar: true,
        report: {
          dataSource: {
            filename: "data/data.csv"
          },
          slice: {
            rows: [{
              uniqueName: "Color"
            }],
            columns: [{
              uniqueName: "[Measures]"
            }],
            measures: [{
              uniqueName: "Price",
              format: "currency"
            }],
          },
          formats: [{
            name: "currency",
            currencySymbol: "$",
            currencySymbolAlign: "right",
            thousandsSeparator: ",",
            decimalPlaces: 3
          }]
        }
      });
    }
  })

}