Introduction #

Lazy-load datasets are on-demand triggered datasets. Unlike standard datasets that auto-query on page load, lazy-load datasets require frontend code to call ds_refresh() to trigger. Suitable for data download, multi-level drill-down, and user-interaction-triggered loading scenarios.

Use Cases #

• Similar to frontend-backend development where the backend provides APIs but the frontend doesn’t need to query immediately on page load
• E.g., data download - only query when user needs to download
• E.g., hierarchical data linkage - load only first level initially, load other levels on click

Enable Lazy-load Dataset #

• In dashboard “Add” -> “Lazy-load Dataset”
• When opening the dashboard, this dataset will not be loaded

Usage #

Refresh Data #

• You can manually trigger dataset refresh at any time. E.g., if lazy-load dataset index is 0
• Call ds_refresh(0) in the JS code where you need to trigger refresh
• This refreshes dataset #0 and executes the JS in dataset #0’s chart

Using Data #

Default Usage #

When the lazy-load dataset’s chart hasn’t been modified, the default global variable is “data_index”. E.g., if lazy-load dataset index is 0, use data0 in the template script to get the refreshed data

Data Processing #

In some scenarios, you can customize processing logic in the lazy-load chart. E.g., convert data to Vue-compatible format and assign to Vue variables:

let dataset = __dataset__;
dataset = ds_createMap_all(dataset);
vapp.ds1 = dataset;  // Assign to Vue

Once the chart has been edited, you can no longer use “data_index” to access data

Parameter Passing #

In some scenarios, you need to get parameters from the frontend before triggering data queries, e.g., filter items. Use ds_setParam(‘param_name’, value) to set parameters. E.g., refresh dataset #1:

ds_setParam('city', 'Shunde');
ds_setParam('province', 'Guangdong');
ds_refresh(1);

Typical Usage Examples #

Scenario 1: Download Button Trigger Data Refresh #

// Download button in a static component
dom__name__.innerHTML = '<button id="btn_download">Download Data</button>';

$('#btn_download').click(function() {
    ds_setParam('city', 'Guangzhou');  // Pass filter parameter
    ds_refresh(3);                     // Trigger lazy-load dataset #3
});

Scenario 2: Multi-level Drill-down (Load Next Level on Chart Click) #

myChart__name__.on('click', function(params) {
    ds_setParam('province', params.name);  // Pass clicked province
    ds_refresh(2);                           // Refresh dataset #2 (city-level data)
    $('#container_2').css('display', 'block');
});