NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

Localization, JavaScript Programming Example of 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>