Chart with several active measures

Flexmonster Pivot Charts

by Flexmonster Pivot Table

HTML

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

<div class="switch-container compact">
  <label class="switch">
    <input type="checkbox" onclick="toggleControl()" checked/>
    <span class="slider round"></span>
  </label>
  <span class="text" id="currentSetting">Several active measures</span>
</div>

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

CSS

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

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 600,
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.json"
    },
    slice: {
    	rows: [
      	{ 
        	uniqueName: "Country",
        }
      ],
      columns: [
        { 
        	uniqueName: "[Measures]"
        }
      ],
    	measures: [
      	{ uniqueName: "Price" },
        { uniqueName: "Quantity"},
        { uniqueName: "Discount" }
      ]
    },
    options: {
    	viewType: "charts",
      chart:{
      	type: "line",
        multipleMeasures: true
      }
    }
  }
});

function toggleControl() {
  const options = pivot.getOptions();
  const newValue = options.chart.multipleMeasures === true ? false : true;
  options.chart.multipleMeasures = newValue;
  pivot.setOptions(options);
  pivot.refresh();
}