Vue Embedded AnalyticsConfiguring Data

Data is provided to Studio using the data property.

Data is retrieved from data sources. A data source represents one or more tables of data.

When multiple tables are provided, Relationships describe how the tables are linked.

There are two main types of data source:

• Synchronous Data Sources for data which has already been loaded in the application.
• Asynchronous Data Sources for data which is lazy loaded on demand.

It is also possible to Share Data between multiple instances of Studio by using a Data Engine.

The example above demonstrates configuring a single Synchronous Data Source.

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

this.data = {
    sources: [{
        id: 'medals',
        data: [
            {
                year: 2000,
                sport: 'Swimming',
                country: 'United States',
                // ... other fields
            },
            // ... other rows
        ],
    }],
};

Relationships Copy Link

When multiple tables are provided, if there are relationships between the data, then these should be provided alongside the data sources. This will allow fields from different tables to be displayed together in the same widget.

The example above demonstrates two tables, Medals and Capitals, linked together by country. Both tables are Synchronous Data Sources.

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

this.data = {
    sources: [{
        id: 'medals',
        data: [
            {
                year: 2000,
                sport: 'Swimming',
                country: 'United States',
                // ... other fields
            },
            // ... other rows
        ],
    }, {
        id: 'capitals',
        data: [
            {
                country: 'United States',
                capital: 'Washington DC',
                // ... other fields
            },
            // ... other rows
        ],
    }],
    relationships: [
        {
            id: 'medals-capitals',
            source: {
                tableId: 'medals',
                fieldId: 'country',
            },
            target: {
                tableId: 'capitals',
                fieldId: 'country',
            },
            type: 'many-to-one'
        },
    ],
};

Data API Copy Link