Localization, JavaScript Programming Example of Localization

Home
Examples
Localization

Localization, JavaScript Programming Example of Localization

Get the programming example below to set any language in Pivot by specifying a custom locale for the page. You are welcome to use our free coding samples for your web development projects.

JS Code

webix.ready(function() {
  // use custom scrolls, optional
  webix.CustomScroll.init();

  const data = {
    view: "pivot",
    id: "pivot",
    locale: {
      lang: "en",
      webix: {
        // switch all webix widgets to the selected locale
        en: "en-US",
        ru: "ru-RU",
        it: "it-IT",
      },
    },
    structure: {
      rows: ["form", "name"],
      columns: ["year"],
      values: [{ name: "oil", operation: ["min", "sum"] }],
    },
    url: "https://cdn.webix.com/demodata/pivot.json",
  };

  pivot.locales.ru = ruLocale;
  pivot.locales.it = itLocale;

  const toolbar = {
    cols: [
      {
        view: "segmented",
        options: ["en", "ru", "it"],
        width: 250,
        click: function() {
          const locale = $$("pivot").getService("locale");
          locale.setLang(this.getValue());
        },
      },
    ],
  };

  webix.ui({
    type: "wide",
    rows: [toolbar, data],
  });
});

HTML Code

<script> 
const ruLocale = {
	//general
	Done: "Готово",
	Table: "Таблица",
	Tree: "Дерево",
	Chart: "График",
	"Click to configure": "Нажмите, чтобы настроить",
	"Pivot configuration": "Конфигурация Pivot",
	Total: "Итого",
	//settings
	Columns: "Столбцы",
	"Add column": "Добавить столбец",
	Rows: "Ряды",
	"Add row": "Добавить ряд",
	Filters: "Фильтры",
	"Add filter": "Добавить фильтр",
	"Group By": "Сгруппировать по",
	"Chart type": "Тип графика",
	"Logarithmic scale": "Логарифмическая шкала",
	Line: "Линейный",
	Radar: "Лепестковый",
	Bar: "Гистограмма",
	Values: "Значения",
	"Add value": "Добавить значение",
	//operations
	count: "кол-во",
	max: "макс",
	min: "мин",
	round: "округл.",
	avg: "средн.",
	wavg: "средневзв.",
	any: "любое",
	sum: "сумма",
};
  
const itLocale = {
	Done: "Fine",
	Table: "Tabella",
	Tree: "Albero",
	Chart: "Grafico",
	"Click to configure": "Cliccare su per configurare",
	"Pivot configuration": "Configurazione di Pivot",
	Total: "Totale",
	Columns: "Colonne",
	"Add column": "Aggiungi colonna",
	Rows: "Righe",
	"Add row": "Aggiungi riga",
	Filters: "Filtri",
	"Add filter": "Aggiungi filtro",
	"Group By": "Raggruppa per",
	"Chart type": "Tipo di grafico",
	"Logarithmic scale": "Scala logaritmica",
	Line: "A linee",
	Radar: "Radar",
	Bar: "A barre",
	Values: "Valori",
	"Add value": "Aggiungi valore",
	count: "conti.num.",
	max: "max",
	min: "min",
	round: "arrotonda",
	avg: "media",
	wavg: "med.pond.",
	any: "qualsiasi",
	sum: "somma",
};
</script>

How to set different languages within Pivot widget?

Download Webix UI Framework

Study Pivot Documentation

Check out Pivot Widget Features