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 = flexmonster.getOptions().chart.title; setChartOption('title', showTitle === '' ? 'Chart One' : ''); } function toggleFilters() { setChartOption('showFilter', !flexmonster.getOptions().chart.showFilter); } function toggleLegend() { setChartOption('showLegend', !flexmonster.getOptions().chart.showLegend); } function toggleMeasuresDropdown() { let showMeasures = flexmonster.getOptions().chart.showMeasures; setChartOption('showMeasures', !flexmonster.getOptions().chart.showMeasures); } function setChartOption(option, value) { flexmonster.setOptions({ chart: { [option]: value } }); flexmonster.refresh(); }
<script src="https://cdn.flexmonster.com/flexmonster.js"></script> <div class="buttons-container"> <div class="second-row-buttons"> <div class="switch-container"> <label class="switch"> <input type="checkbox" onclick="toggleTitle()" checked> <span class="slider round"></span> </label> <span class="text">Title</span> </div> <div class="spacer"></div> <div class="switch-container"> <label class="switch"> <input type="checkbox" onclick="toggleFilters()" checked> <span class="slider round"></span> </label> <span class="text">Filters</span> </div> <div class="spacer"></div> <div class="switch-container"> <label class="switch"> <input type="checkbox" onclick="toggleLegend()" checked> <span class="slider round"></span> </label> <span class="text">Legend</span> </div> <div class="spacer"></div> <div class="switch-container"> <label class="switch"> <input type="checkbox" onclick="toggleMeasuresDropdown()" checked> <span class="slider round"></span> </label> <span class="text">Measures<br>dropdown</span> </div> </div> </div> <div id="pivot-container" class="column right"></div>