Edit in JSFiddle

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 355,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      columns: [{
        filter: {
          members: ["color.[green]", "color.[red]", "color.[white]", "color.[yellow]"]
        },
        uniqueName: "Color"
      }],
      measures: [{
        aggregation: "sum",
        uniqueName: "Price"
      }],
      reportFilters: [{
        uniqueName: "Business Type"
      }],
      rows: [{
        filter: {
          members: ["category.[accessories]", "category.[clothing]", "category.[bikes]"]
        },
        uniqueName: "Category"
      }, {
        filter: {
          members: ["country.[france]", "country.[germany]", "country.[united kingdom]"]
        },
        uniqueName: "Country"
      }, {
        uniqueName: "[Measures]"
      }]
    },
    "options": {
      "datePattern": "yyyy-MM-dd HH:mm:ss",
      "chart": {
      	"type": "pie",
        "position": "right",
        "showLegend": false
      }
    }
  }
});

function toggleReadOnly() {
  setOption('readOnly', !flexmonster.getOptions().readOnly);
}

function toggleShowAggregationLabels() {
  setOption('showAggregationLabels', !flexmonster.getOptions().showAggregationLabels);
}

function toggleConfiguratorButton() {
setOption('configuratorButton', !flexmonster.getOptions().configuratorButton);
}

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

document.querySelectorAll('.selectopt').forEach(function(opt) {
  opt.addEventListener('change', function() {
    setOption('viewType', this.value);
  });
});

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

<div class="buttons-container">
  <div class="select-container">
    <span class="text">View type: </span>
    <div class="select" tabindex="1">
    <input class="selectopt" name="grid-type" type="radio" id="opt1" value="grid" checked>
      <label for="opt1" class="option">Grid</label>
      <input class="selectopt" name="grid-type" type="radio" id="opt2" value="charts">
      <label for="opt2" class="option">Chart</label>
      <input class="selectopt" name="grid-type" type="radio" id="opt3" value="grid_charts">
      <label for="opt3" class="option">Grid and charts</label>
    </div>
  </div>
  <div class="second-row-buttons">
  <div class="switch-container">
      <label class="switch">
        <input type="checkbox" onclick="toggleConfiguratorButton()" checked>
        <span class="slider round"></span>
      </label>
      <span class="text">Field List<br>button</span>
    </div>
    <div class="spacer"></div>
    <div class="switch-container">
      <label class="switch">
        <input type="checkbox" onclick="toggleShowAggregationLabels()" checked>
        <span class="slider round"></span>
      </label>
      <span class="text">Aggregation<br> labels</span>
    </div>
    
    <div class="spacer"></div>
    <div class="switch-container">
      <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" class="column right"></div>