Chart options

Options

by Flexmonster Pivot Table

HTML

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

<div class="buttons-container">
  <div class="buttons-row">
    <div class="switch-container compact">
      <label class="switch">
        <input type="checkbox" onclick="toggleTitle()" checked />
        <span class="slider round"></span>
      </label>
      <span class="text">Title</span>
    </div>
    <div class="switch-container compact">
      <label class="switch">
        <input type="checkbox" onclick="toggleFilters()" checked />
        <span class="slider round"></span>
      </label>
      <span class="text">Filters</span>
    </div>
    <div class="switch-container compact">
      <label class="switch">
        <input type="checkbox" onclick="toggleLegend()" checked />
        <span class="slider round"></span>
      </label>
      <span class="text">Legend</span>
    </div>
    <div class="switch-container compact">
      <label class="switch">
        <input type="checkbox" onclick="toggleMeasuresDropdown()" checked />
        <span class="slider round"></span>
      </label>
      <span class="text">Measures dropdown</span>
    </div>
  </div>
</div>

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

CSS

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

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 400,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    options: {
      viewType: "charts",
      chart: {
        type: "pie",
        title: "Chart One"
      }
    },
    slice: {
      rows: [
      {
        uniqueName: "Country",
        filter: {
        	members: [
         		"country.[australia]",
            "country.[canada]",
            "country.[france]"
          ]
        }
      }, 
      {
        uniqueName: "Category",
        filter: {
      		exclude: [
          	"category.[bikes]",
            "category.[cars]"
          ]
        }
      }],
      columns: [{ uniqueName: "[Measures]" }],
      measures: [{ uniqueName: "Price" }, {uniqueName: "Discount"}],
      expands: {
        rows: [{
          tuple: [
            "Country.[Canada]"
          ]
        }]
      }
    }
  }
});

function toggleTitle() {
  let showTitle = pivot.getOptions().chart.title;
  setChartOption('title', showTitle === '' ? 'Chart One' : '');
}


function toggleFilters() {
  setChartOption('showFilter', !pivot.getOptions().chart.showFilter);
}

function toggleLegend() {
  setChartOption('showLegend', !pivot.getOptions().chart.showLegend);
}


function toggleMeasuresDropdown() {
  let showMeasures = pivot.getOptions().chart.showMeasures;
  setChartOption('showMeasures', !pivot.getOptions().chart.showMeasures);
}


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