Skip to main content

DHTMLX Pivot. Localization example

Demo of switching DHTMLX Pivot interface language at runtime. Use the setLocale method with built-in locale packs (English, German, Chinese) to translate all UI labels, aggregation names, and configuration panel text.

Live example​

function changeLocale(sel) {
    widget.setLocale(pivot.locales[sel.value]);
}

// date string to Date 
const dateFields = fields.filter(f => f.type == "date");
if (dateFields.length) {
    dataset.forEach(item => {
        dateFields.forEach(f => {
            const v = item[f.id];
            if (typeof v == "string") item[f.id] = new Date(v);
        });
    });
}

const widget = new pivot.Pivot("#pivot", {
    fields, 
    data: dataset,
    config:  {
		rows: [
            "state"
        ],
        columns: [
            "product_line",
            "product_type"
        ],
        values: [
            {
                field: "profit",
                method: "var"
            },
            {
                field: "sales",
                method: "sum"
            },
            {
                field: "date",
                method: "min"
            }
        ]
	}
});

<!-- auxiliary controls for interacting with the sample -->
<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css">
<section class="dhx_sample-controls">
	<label for="form-select" class="dhx_sample-label">Select language:</label>
	<select name="form-select" class="dhx_select dhx_sample-input" id="form-select" style="width: 100px;" onchange="changeLocale(this)">
        <option value="en" selected>English</option>
        <option value="de">German</option>
        <option value="cn">Chinese</option>
    </select>
</section>

<!-- component container -->
<div id="pivot" style="height: calc(100% - 60px); width: 100%;"></div>
		
<!-- dataset -->

<script>
const dataset = [
      {
        "cogs": 51,
        "date": "10/1/2018",
        "inventory_margin": 503,
        "margin": 71,
        "market_size": "Major Market",
        "market": "Central",
        "marketing": 46,
        "product_line": "Leaves",
        "product_type": "Herbal Tea",
        "product": "Lemon",
        "profit": -5,
        "sales": 122,
        "state": "Colorado",
        "expenses": 76,
        "type": "Decaf"
      },
      {
        "cogs": 52,
        "date": "10/1/2018",
        "inventory_margin": 405,
        "margin": 71,
        "market_size": "Major Market",
        "market": "Central",
        "marketing": 17,
        "product_line": "Leaves",
        "product_type": "Herbal Tea",
        "product": "Mint",
        "profit": 26,
        "sales": 123,
        "state": "Colorado",
        "expenses": 45,
        "type": "Decaf"
      },
      // ... 1060 more items (see Live Editor for full data)
    ];
    const fields = [
      {
        "id": "cogs",
        "label": "Cogs",
        "type": "number"
      },
      {
        "id": "date",
        "label": "Date",
        "type": "date"
      },
      {
        "id": "inventory_margin",
        "label": "Inventory Margin",
        "type": "number"
      },
      {
        "id": "margin",
        "label": "Margin",
        "type": "number"
      },
      {
        "id": "market_size",
        "label": "Market Size",
        "type": "text"
      },
      {
        "id": "market",
        "label": "Market",
        "type": "text"
      },
      {
        "id": "marketing",
        "label": "Marketing",
        "type": "number"
      },
      {
        "id": "product_line",
        "label": "Product Line",
        "type": "text"
      },
      {
        "id": "product_type",
        "label": "Product Type",
        "type": "text"
      },
      {
        "id": "product",
        "label": "Product",
        "type": "text"
      },
      {
        "id": "profit",
        "label": "Profit",
        "type": "number"
      },
      {
        "id": "sales",
        "label": "Sales",
        "type": "number"
      },
      {
        "id": "state",
        "label": "State",
        "type": "text"
      },
      {
        "id": "expenses",
        "label": "Expenses",
        "type": "number"
      },
      {
        "id": "type",
        "label": "Type",
        "type": "text"
      }
    ];
</script>

Applications serving international audiences need to display pivot table interfaces in the user's preferred language. Hardcoding English labels for aggregation methods, configuration panel options, and UI elements creates a poor experience for non-English speakers and limits adoption in global markets.

DHTMLX Pivot ships with built-in locale packs accessible through pivot.locales. The setLocale() method on the widget instance applies a locale pack at runtime, instantly translating all UI elements - including aggregation method names (Sum, Count, Min, Max), configuration panel labels, and button text. No page reload is required.

This example provides a language selector dropdown with English, German, and Chinese options. Selecting a language calls widget.setLocale(pivot.locales[locale]), which immediately updates all visible text. The pivot displays sales data grouped by state and product line/type, with profit variance, sales sum, and minimum date aggregations.

Solution overview​

To localize the pivot, call widget.setLocale() with one of the built-in locale objects from pivot.locales. The available locales include en (English), de (German), and cn (Chinese). The method re-renders the entire widget with translated labels.

Key points​

  • Runtime locale switching: Call widget.setLocale(pivot.locales["de"]) to instantly switch the pivot interface to German (or any other supported language) without reloading the page
  • Built-in locale packs: DHTMLX Pivot includes en, de, and cn locale packs out of the box, covering all UI labels, aggregation method names, and configuration panel text
  • Complete UI translation: Localization applies to all visible text - column headers, method labels (Sum, Count, Min, Max, Var), filter options, and configuration panel buttons
  • Date field handling: Convert date strings to Date objects before initialization to ensure proper locale-aware date formatting in the pivot table cells

API reference​

Additional resources​