> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# How custom visualizations get data

> Understand the hooks, components, and backend API that feed custom visualizations, and how series, slices, and data points structure the result.

API reference: [useExecutionDataView()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.useexecutiondataview/index.md) (function), [useInsightDataView()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.useinsightdataview/index.md) (function)

With GoodData.UI, you can build your own visual components on top of GoodData data. This page explains the data side: which APIs fetch the data, how to describe what you need, and how to read the result. For a worked example that also replaces the filters and adds an export, follow [Build a fully custom frontend](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/embedding/build-custom-frontend/index.md).

> **Note:**
> This page builds on the [execution model](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/execution/execution-model/index.md). The [catalog-export](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/data-model/export-catalog/index.md) tool generates typed constants for your measures and attributes, which make the data specification easier to read.

## [Ways to get the data](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/embedding/custom-visualizations/#ways-to-get-the-data)

You can get the data for a custom visualization with React [hooks](#react-hooks), React [components](#react-components), or the [execution API](#execution-api).

Hooks and components have similar APIs and capabilities. For more complex scenarios, for example when one execution depends on another, hooks avoid nesting components inside each other.

### [React hooks](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/embedding/custom-visualizations/#react-hooks)

- [`useExecutionDataView`](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/use-execution-data-view/index.md) fetches the data you describe with [series and slices](#series-and-slices) or with a [custom execution](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/execution/execution-model/index.md), and reports the loading status and errors.
- [`useInsightDataView`](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/use-insight-data-view/index.md) fetches the data of a visualization saved in [Analyze](https://www.gooddata.ai/docs/cloud/create-visualizations/), so you can render it with your own component. It's [`InsightView`](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/insightview/index.md) without the view part.

### [React components](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/embedding/custom-visualizations/#react-components)

- [`Execute`](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/execute/index.md) is the component counterpart of `useExecutionDataView` for data described with [series and slices](#series-and-slices).
- [`RawExecute`](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/raw-execute/index.md) is the component counterpart of `useExecutionDataView` for a [custom execution](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/execution/execution-model/index.md).
- [`ExecuteInsight`](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/execute-insight/index.md) is the component counterpart of `useInsightDataView`: it fetches the data of a saved visualization.

Each of them fetches the result and reports the loading status and errors.

### [Execution API](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/embedding/custom-visualizations/#execution-api)

Without hooks or components, you can get the data directly from the analytical backend instance. See [custom executions](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/execution/execution-model/index.md).

## [Series and slices](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/embedding/custom-visualizations/#series-and-slices)

The execution hooks and components describe the data as series and slices. Two examples show how they relate.

### [Tabular data](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/embedding/custom-visualizations/#tabular-data)

Imagine a custom table component that shows one row for each value of the attribute `A1`. Each row has two columns, one for the measure `M1` and one for the measure `M2`.

Here, the data series are the two measures `M1` and `M2`, and the slices come from the attribute `A1`.

Now the table becomes more dynamic: for each value of the attribute `A2`, it includes two columns, one for each measure, `M1` and `M2`.

Here, the data series are the measures `M1` and `M2`, **scoped** to the values of the attribute `A2`. On top of that, these columns are sliced by the values of the attribute `A1`.

### [Scalars](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/embedding/custom-visualizations/#scalars)

Imagine a custom headline component that shows several key figures, each calculated from a different measure: `M1`, `M2`, and `M3`.

Here, the data series are the measures `M1`, `M2`, and `M3`, and there are no data slices at all.

## [Working with the results](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/embedding/custom-visualizations/#working-with-the-results)

The result instance has methods for convenient data access:

- `result.data().series()` returns the result as a collection of data series.
- `result.data().slices()` returns the result as a collection of data slices.
- You can iterate a collection with a `for-of` loop, or turn it into an array and use the usual array functions.
- For each series or slice, you can iterate its data points:
    - Iterating the data points of a series gives you one data point per slice.
    - Iterating the data points of a slice gives you one data point per series.
- Each data point holds the data and the metadata: the series descriptor and the slice descriptor. You can read either the raw or the formatted value.

> **Avoid the raw backend result:**
> The result instance also exposes the raw result from the backend. Its structure is an implementation detail, so read the data through series and slices instead.