Angular Embedded AnalyticsAsynchronous Data Sources

Asynchronous data sources can be used to lazy load data on demand.

An asynchronous data source represents one or more tables of data.

<ag-studio
    [data]="data"
    /* other studio properties ... */ />

this.data = {
    sources: [{
        id: 'medalsSource',
        dataShape: 'row',
        getData: async (tableId) => {
            const data = await fetchData(tableId);
            return { data };
        },
        tables: [
            {
                id: 'medals',
                fields: [
                    {
                        id: 'athlete',
                        format: 'textFormat',
                    },
                    // ... other fields
                ],
            },
            // ... other tables
        ],
    }],
};

Asynchronous data sources can return row-based or column-based data. This is determined by the dataShape property.

Multiple Tables Copy Link

When multiple tables are provided, they can be linked by providing Relationships.

Reloading Data Copy Link

Data can be reloaded by calling api.reload().