JavaScript ChartsAsynchronous Data

Asynchronous Data allows charts to load data on demand, supporting progressive detail loading and server-side paging when used with Zoom or the Scrollbar.

Data Source Copy Link

Use the dataSource option to provide an asynchronous getData callback. The chart calls this function on initial load and then whenever the visible window changes, and displays a loading overlay until the returned promise resolves.

{
    dataSource: {
        getData: ({ windowStart, windowEnd }) => {
            return FakeServer.get({ windowStart, windowEnd });
        },
    },
}

In this example:

• The fake server returns coarse data covering the full date range alongside finer-grained data for the visible window.
• As the user zooms in, getData is re-invoked with updated windowStart and windowEnd values and the server returns higher-resolution data for that range.

The getData callback receives an AgDataSourceCallbackParams object with:

• windowStart: the start of the visible window.
• windowEnd: the end of the visible window.
• source: what triggered the request, such as 'mini-chart', 'user-interaction' or 'chart-update'.
• context: the chart context object, if one has been provided.

When the Navigator Mini Chart is enabled, it issues its own getData call with source: 'mini-chart' to load a full-range overview, independent of the main chart's windowed fetches. This is only done on initial load or options update.

Triggering a Reload Copy Link

Calling updateDelta({}) with an empty object triggers getData to be called again, which is useful for refreshing data on demand. The Reload Data button in the example above does exactly this; the loading overlay is shown while the request is in progress, and the chart updates with the freshly fetched data once it resolves.

chart.updateDelta({});

Loading Overlay Copy Link

While getData is in progress, the chart displays a Loading Overlay automatically. The overlay can be customised through the overlays.loading option; see Overlays for text customisation and custom renderers.

Manual Control Copy Link

Set loading on the chart options to control the overlay independently of dataSource.

Use the buttons to override the loading state.

{
    loading: true,
}

• true - force the overlay on.
• false - force the overlay off.
• undefined - automatic, shown while getData is pending and hidden when it resolves.

API Reference Copy Link