Options

Options

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div class="buttons-container">
  <div class="select-container compact">
    <span class="text">View type: </span>
    <select id="select-view-type">
      <option selected value="grid_charts">Grid and charts</option>
      <option value="charts">Chart</option>
      <option value="grid">Grid</option>
    </select>
  </div>
  <div class="buttons-row">
    <div class="switch-container compact">
      <label class="switch">
        <input type="checkbox" onclick="toggleConfiguratorButton()" checked>
        <span class="slider round"></span>
      </label>
      <span class="text">Field List button</span>
    </div>
    <div class="switch-container compact">
      <label class="switch">
        <input type="checkbox" onclick="toggleShowAggregationLabels()" checked>
        <span class="slider round"></span>
      </label>
      <span class="text">Aggregation labels</span>
    </div>
    <div class="switch-container compact">
      <label class="switch">
        <input type="checkbox" onclick="toggleReadOnly()">
        <span class="slider round"></span>
      </label>
      <span class="text">Read-only</span>
    </div>
  </div>
</div>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

.fm-charts-color-1 {
  fill: rgba(0, 164, 90, 0.7) !important;
}

.fm-charts-color-2 {
  fill: rgba(223, 56, 0, 0.7) !important;
}

.fm-charts-color-3 {
  fill: rgba(255, 184, 0, 0.7) !important;
}

.fm-charts-color-4 {
  fill: rgba(109, 59, 216, 0.7) !important;  
}

.fm-charts-color-5 {
  fill: rgba(0, 117, 255, 0.7) !important;
}

.fm-charts-color-6 {
  fill: none !important;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 650,
  report: {
    dataSource: {
      filename: "data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Category",
          filter: {
            exclude: [
              "category.[cars]",
              "category.[clothing]",
            ],
          },
        },
      ],
      columns: [
        {
          uniqueName: "Country",
          filter: {
            exclude: [
              "country.[australia]",
              "country.[united kingdom]",
            ],
          },
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
      reportFilters: [
        {
          uniqueName: "Business Type",
        },
      ],
    },
    options: {
      viewType: "grid_charts",
      datePattern: "yyyy-MM-dd HH:mm:ss",
      chart: {
        type: "column",
        position: "bottom",
        showLegend: false,
      },
    },
  },
});

function toggleReadOnly() {
  setOption("readOnly", !pivot.getOptions().readOnly);
}

function toggleShowAggregationLabels() {
  setOption("showAggregationLabels", !pivot.getOptions().showAggregationLabels);
}

function toggleConfiguratorButton() {
  setOption("configuratorButton", !pivot.getOptions().configuratorButton);
}

function setOption(option, value) {
  pivot.setOptions({
    [option]: value,
  });
  pivot.refresh();
}

document
  .getElementById("select-view-type")
  .addEventListener("change", function () {
    setOption("viewType", this.value);
  });