Skip to main content

DHTMLX Pivot. Different datasets example

Demo of switching between multiple datasets in DHTMLX Pivot. Load several datasets at once and use setConfig to swap fields, data, and configuration dynamically via a dropdown selector.

Live example​

const widget = new pivot.Pivot("#pivot", {fields:[], data: []});

const url = "https://snippet.dhtmlx.com/codebase/data/pivot/";
const folders = ["02", "03", "04", "05"];
const select = document.querySelector("#form-select");
let datasets;

// data loading
Promise.all(folders.map(folder => fetch(url + folder + "/dataset.json")))
    .then(responses => Promise.all(responses.map(res => res.json())))
    .then(arr => initDatasets(arr));

function initDatasets(arr) {
    datasets = arr;
    // process "year" field and fields with "date" type
    datasets.forEach(ds => {
        const yearField = ds.fields.find(f => f.id === "year");
 		if (yearField) yearField.format = false;
      
        const dateFields = ds.fields.filter(f => f.type == "date");
        if (dateFields.length) {
            ds.data.forEach(item => {
                dateFields.forEach(f => {
                    const v = item[f.id];
                    if (typeof v == "string") item[f.id] = new Date(v);
                });
            });
        }
    });
    // set options and select the first dataset
    let i = 0;
   
    folders.forEach(id => {
        const opt = document.createElement('option');
        opt.value = id;
        opt.innerHTML = arr[i].title;
        select.appendChild(opt);
        i++;
    });
   setDataset(0);
   
}

function setDataset(i){
    if(datasets[i]){
       const {fields, data, config} = datasets[i];
       widget.setConfig({fields, data, config});
    }
}
<!-- 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 dataset:</label>
	<select name="form-select" class="dhx_select dhx_sample-input" id="form-select" style="width: 220px;" onchange="setDataset(this.selectedIndex)">
    </select>
</section>

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

Analytics dashboards often need to display data from different sources or domains - sales data, happiness reports, economic indicators - within the same pivot component. Rebuilding the entire pivot widget for each dataset is inefficient and creates a jarring user experience with full page reloads.

DHTMLX Pivot's setConfig() method allows you to replace the entire pivot state at runtime, including fields, data, and configuration. By preloading multiple datasets with Promise.all and storing them in an array, you can switch between completely different data structures with a single method call. The pivot applies the new dataset, fields, and default row/column/value configuration after rebuilding with the updated config.

This example loads four datasets from remote JSON endpoints (anime data, world happiness report, coffee sales, and global economic data) using Promise.all. A dropdown selector lets users choose which dataset to display. Each dataset includes its own fields definition and default configuration, so the pivot adapts completely - different row groupings, column dimensions, and value aggregations - when the user switches datasets.

Solution overview​

To switch between datasets, initialize the pivot with empty fields and data, then load all datasets asynchronously. Store them in an array and call widget.setConfig() with the selected dataset's fields, data, and config. A setDataset() function wired to a select element triggers the swap.

Key points​

  • Full reconfiguration with setConfig: Passing { fields, data, config } to setConfig() replaces everything - field definitions, dataset, and the row/column/value layout - in a single call
  • Parallel data loading: Promise.all fetches all datasets simultaneously, reducing total load time compared to sequential requests
  • Date preprocessing: Each dataset's date fields are converted from strings to Date objects during initialization, ensuring proper date handling across all datasets
  • Year field format override: Setting yearField.format = false prevents year values from being formatted as dates or numbers, keeping them displayed as plain integers

API reference​

  • Pivot setConfig(): Method to update pivot configuration at runtime (the component is recreated with updated config).
  • Pivot fields: Field definitions including type and label for each data column.
  • Pivot data: Configuration for providing the dataset to the Pivot component.

Additional resources​