Vue Embedded AnalyticsSharing Data

A Data Engine loads, processes, and caches data for Studio widgets. Studio creates one automatically when you pass data sources via the data property, but you can create the engine yourself to share it across instances, or replace it entirely with a custom backend.

Built-in Engine Copy Link

When you pass data sources directly to Studio, it creates a built-in Data Engine behind the scenes. Creating the engine externally with createDataEngine(data) gives you two benefits:

• Sharing - multiple Studio instances can point at the same engine, so they share a single copy of the data.
• Caching across lifecycles - the engine survives when Studio is destroyed and recreated, so data doesn't need to be re-fetched or reprocessed on remount.

Inline Data Copy Link

Pass row arrays directly when the data is small or already in memory:

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

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

this.data = dataEngine;

Fetched Data Copy Link

For larger datasets, fetch the data first and then create the engine. The engine reference stays stable across Studio remounts:

const dataEngine = await fetch('/api/medals.json')
    .then((response) => response.json())
    .then((data) => createDataEngine({ sources: [{ id: 'medals', data }] }));

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

this.data = dataEngine;

See Synchronous Data Sources and Asynchronous Data Sources for the full range of data loading patterns.

createDataEngine(data) accepts a data object of type AgDataSourcesDefinition.

Custom Engines Copy Link

For larger datasets or when you want to delegate query execution to a backend you already own, see the Server-Side Data guide.