Get Free Trial
List of all demos

Localization

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


    var currentLang = 'en';
    
    function setLocalization(lang) {
      currentLang = lang;
      pivot.setReport({
        dataSource: {
          type: "csv",
          filename: "data/data-" + lang + ".csv"
        },
        localization: "loc/" + lang + ".json"
      });
    }
    
    var pivot = new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      global: {
        localization: "loc/en.json"
      },
      report: {
        dataSource: {
          type: "csv",
          filename: "data/data-en.csv"
        },
        options: {
          configuratorActive: false
        }
      },
      width: "100%",
      height: 430,
      toolbar: true,
      beforetoolbarcreated: customizeToolbar
    });
    
    var 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 customizeToolbar(toolbar) {
      FlexmonsterToolbar.prototype.exportHandler = function(type) {
        if (type == "pdf") {
          this.pivot.exportTo(type, {
            fontUrl: pdfFonts[currentLang]
          });
        } else {
          this.pivot.exportTo(type);
        }
      }
    }
    
    var header = document.getElementById("buttons-toolbar");
    var btns = header.getElementsByClassName("btn-localization");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", buttonHandler);
    }
    
    function buttonHandler() {
      var current = document.getElementsByClassName("active-btn");
      current[0].className = current[0].className.replace(" active-btn", "");
      this.className += " active-btn";
    }
    
    <div id="buttons-toolbar" class="loc-container">
      <button class="btn-localization active-btn" onclick="setLocalization('en')">
        <img class="loc-img" src="https://cdn.flexmonster.com/i/flags/en.svg">
        <span>EN</span>
      </button>
      <button class="btn-localization" onclick="setLocalization('fr')">
        <img class="loc-img" src="https://cdn.flexmonster.com/i/flags/fr.svg">
        <span>FR</span>
      </button>
      <button class="btn-localization" onclick="setLocalization('it')">
        <img class="loc-img" src="https://cdn.flexmonster.com/i/flags/it.svg">
        <span>IT</span>
      </button>
      <button class="btn-localization" onclick="setLocalization('es')">
        <img class="loc-img" src="https://cdn.flexmonster.com/i/flags/es.svg">
        <span>ES</span>
      </button>
      <button class="btn-localization" onclick="setLocalization('pt')">
        <img class="loc-img" src="https://cdn.flexmonster.com/i/flags/pt.svg">
        <span>PT</span>
      </button>
      <button class="btn-localization" onclick="setLocalization('zh')">
        <img class="loc-img" src="https://cdn.flexmonster.com/i/flags/zh.svg">
        <span>ZH</span>
      </button>
      <button class="btn-localization" onclick="setLocalization('uk')">
        <img class="loc-img" src="https://cdn.flexmonster.com/i/flags/uk.svg">
        <span>UK</span>
      </button>
    </div>
    
    <div id="pivot-container"></div>
    
    .loc-container {
      margin: 7px;
    }
    
    .btn-localization {
      height: 50px;
      width: 90px;
      border-radius: 5px;
      background-color: #F5F5F5;
      border: 1px solid #F5F5F5;
      position: relative;
      margin: 0 10px 10px 0;
    }
    
    .btn-localization:hover {
      background-color: #DF3800;
      border: 1px solid #DF3800;
      color: white;
    }
    
    .btn-localization>* {
      vertical-align: middle;
    }
    
    .loc-img {
      width: 30px;
      margin-right: 10px;
      border: 1px solid white;
      border-radius: 2px;
    }
    
    .active-btn {
      background-color: #DF3800;
      border: 1px solid #DF3800;
      color: white;
    }
    
    .active-btn .loc-img {
      border: 1px solid white;
    }
    
    .active-btn::after {
      content: '';
      position: absolute;
      top: 100%;
      left: calc(50% - 7px);
      background: #DF3800;
      width: 15px;
      height: 7px;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
    

    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 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 component guide.