Example with strictNumbersParsing property

Options

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"
      id="strictNumbersCheckbox"
      onclick="toggleStrictNumbersParsing()"
    />
    <span class="slider round"></span>
  </label>
  <span class="text" id="currentSetting">
    <code>strictNumbersParsing</code> is set to <code>false</code>.
  </span>
</div>

<div id="pivot-container">The component will appear here</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/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
    },
    options: {
      grid: {
        type: "flat",
      },
      strictNumbersParsing: false,
    },
    slice: {
      rows: [
        {
          uniqueName: "Category",
        },
      ],
      columns: [
        {
          uniqueName: "Color",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Quantity",
        },
      ],
    },
  },
});

function toggleStrictNumbersParsing() {
  const checkbox = document.getElementById("strictNumbersCheckbox");
  const currentSetting = document.getElementById("currentSetting");
  const currentReport = pivot.getReport({
    withDefaults: true,
    withGlobals: true,
  });
  currentReport.options.strictNumbersParsing = checkbox.checked;
  pivot.setReport(currentReport);
  currentSetting.innerHTML = `<code>strictNumbersParsing</code> is set to <code>${checkbox.checked}</code>.`;
}

function getData() {
  return [
    {
      Color: "green",
      Quantity: 19,
      Category: "Clothes",
    },
    {
      Color: "blue",
      Quantity: "abc76",
      Category: "Clothes",
    },
    {
      Color: "blue",
      Quantity: "a100",
      Category: "Accessories",
    },
    {
      Color: "red",
      Quantity: "7abc6",
      Category: "Cars",
    },

    {
      Color: "red",
      Quantity: "abc",
      Category: "Cars",
    },
  ];
}