Localization

Translate your pivot table to provide end-users with a localized reporting experience.

.js
.html

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
      type: "csv",
      filename: "https://cdn.flexmonster.com/data/data-en.csv",
    },
    slice: {
      rows: [{
        uniqueName: "Category"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price",
        aggregation: "sum",
        format: "currency"
      }]
    },
    formats: [{
      name: "",
      thousandsSeparator: ",",
      decimalSeparator: ".",
      decimalPlaces: 2,
    }, {
      name: "currency",
      currencySymbol: "$",
    }]
  },
  shareReportConnection: {
    url: "https://olap.flexmonster.com:9500",
  },
  beforetoolbarcreated: customizeToolbar,
});

let currentLang = "en";

const pdfFonts = {
  "en": "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  "fr": "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  "it": "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  "es": "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  "pt": "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  "zh": "https://cdn.flexmonster.com/fonts/NotoSansCJKsc-Regular.ttf",
  "uk": "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
};

function setLocalization(lang) {
  currentLang = lang;
  pivot.setReport({
    dataSource: {
      type: "csv",
      filename: "data/data-" + lang + ".csv",
    },
    localization: "loc/" + lang + ".json",
    formats: [{
      name: "",
      thousandsSeparator: ",",
      decimalSeparator: ".",
      decimalPlaces: 2,
      currencySymbol: "$",
    }]
  });
}

function customizeToolbar(toolbar) {
  toolbar.exportHandler = (type) => {
    if (type === "pdf") {
      pivot.exportTo(type, {
        fontUrl: pdfFonts[currentLang],
      });
    } else {
      pivot.exportTo(type);
    }
  };
  toolbar.showShareReportTab = true;
}

<button onclick="setLocalization('en')">EN</button>
<button onclick="setLocalization('fr')">FR</button>
<button onclick="setLocalization('it')">IT</button>
<button onclick="setLocalization('es')">ES</button>
<button onclick="setLocalization('pt')">PT</button>
<button onclick="setLocalization('zh')">ZH</button>
<button onclick="setLocalization('uk')">UK</button>

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

You can easily translate labels, text messages, captions, and other text elements of the pivot table into the language of your choice.

Simply specify the path to the localization file — a JSON file with key-value pairs, where a key is the component's element and a value is the translation of its text into the respective language.

It is possible to translate the entire component using global settings or override localizations within specific reports.

See more details on how to localize the web pivot table in the Localizing the component guide.

Themes Heat map

Changes to Flexmonster Software License Agreement

Localization

See our live examples