Set localization for specific labels

Configuring the report

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to set localization for specific labels</h2>
  <p>
    Flexmonster allows you to localize only the needed UI labels, while other
    labels will have their default values.
  </p>
  <p>
    In this example, we've localized the <code>"dateInvalidCaption"</code> and
    <code>"blankMember"</code> labels (lines 2-7 in the JavaScript box). These
    labels are present on the grid if the dataset contains invalid dates or
    blank members, respectively.
  </p>
  <p>
    <a
      href="https://www.flexmonster.com/doc/localizing-component/"
      target="_blank"
    >Visit our docs to learn more about localizing the component</a>.
  </p>
</div>

<button onclick="setReport(report2)">Remove localization</button>
<button onclick="setReport(report1)">Set localization</button>

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

CSS

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

JavaScript

let report1 = {
	localization: {
    grid: {
      "blankMember": "Blank member caption",
      "dateInvalidCaption": "Invalid date caption"
    }
  },
	dataSource: {
    data: getData()
  },
  slice: {
  	rows: [
   		{
   			uniqueName: "Country"
    	}
  	],
    columns: [
    	{
      	uniqueName: "Date.Year"
      },
      {
      	uniqueName: "[Measures]"
      }
    ],
    measures: [{
   		uniqueName: "Price",
      aggregation: "sum"
    }]
  }
};

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 350,
  toolbar: true,
  report: report1
});

let report2 = {
	dataSource: {
    data: getData()
  },
  slice: {
  	rows: [
   		{
   			uniqueName: "Country"
    	}
  	],
    columns: [
    	{
      	uniqueName: "Date.Year"
      },
      {
      	uniqueName: "[Measures]"
      }
    ],
    measures: [{
   		uniqueName: "Price",
      aggregation: "sum"
    }]
  }
};

function getData() {
  return [{
    "Country": "Canada",
    "Price": 174,
    "Date": "2012-05-07"
  }, {
    "Price": 1664,
    "Date": ""
  }];
}

function setReport(report) {
  pivot.setReport(report);
}