> ## Documentation Index
> Fetch the complete documentation index at: https://docs.helloleo.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Data Visualization with Airtable

> Build interactive data visualizations using Airtable data

Learn how to build a data visualization dashboard that connects to your Airtable bases, creating charts, graphs, and interactive reports from your spreadsheet data.

## Overview

This example demonstrates building a data visualization dashboard that:

* Connects to Airtable bases and tables
* Creates various chart types (bar, line, pie, etc.)
* Provides interactive filtering and drill-down
* Updates in real-time as Airtable data changes

## Prerequisites

* Airtable integration configured in HelloLeo
* Airtable base with data tables
* Access token with read permissions

## Step-by-Step Guide

### 1. Set Up the Integration

First, ensure your Airtable integration is configured:

1. Go to **Project Settings** → **Project Integrations**
2. Select **Airtable** and enter your access token
3. Test the connection

### 2. Create the Dashboard Layout

Start by creating a dashboard with multiple visualization widgets:

```
Create a data visualization dashboard with:
- Header showing dashboard title
- Grid layout for multiple charts
- Filter panel on the left
- Chart widgets that can be resized and rearranged

Use a responsive grid system.
```

### 3. Build Sales Chart

Create a sales visualization:

```
Create a bar chart showing sales data from Airtable.
Fetch data from the "Sales" table and display:
- X-axis: Month
- Y-axis: Total sales amount
- Color bars by product category

Use Airtable API to fetch records from Sales table,
group by month, and calculate totals.
```

### 4. Create Customer Distribution Pie Chart

Build a customer distribution visualization:

```
Create a pie chart showing customer distribution by region.
Fetch customer data from Airtable "Customers" table and:
- Group customers by region field
- Count customers per region
- Display as pie chart with percentages
- Add legend showing region names
```

### 5. Build Time Series Line Chart

Create a time series visualization:

```
Create a line chart showing revenue trends over time.
Fetch data from Airtable "Transactions" table:
- X-axis: Date (grouped by week or month)
- Y-axis: Revenue amount
- Multiple lines for different product categories
- Interactive tooltips showing exact values

Use Airtable filterByFormula to filter by date range.
```

### 6. Add Interactive Filters

Create filtering functionality:

```
Add filter controls to the dashboard:
- Date range picker
- Category dropdown
- Region selector

When filters change, update all charts to reflect 
filtered data from Airtable.
```

### 7. Create Data Table View

Add a detailed data table:

```
Create a data table component showing raw Airtable data:
- Sortable columns
- Search functionality
- Pagination (20 records per page)
- Export to CSV button

Fetch records from Airtable with pagination support.
```

## Example Prompts

### Initial Setup

```
Build a data visualization dashboard with:
- Sales bar chart from Airtable Sales table
- Customer distribution pie chart from Customers table
- Revenue trend line chart from Transactions table
- Interactive filters for date range and category
- Data table showing filtered results

Connect all visualizations to Airtable data.
```

### Enhancements

```
Add drill-down functionality: when clicking on a bar 
in the sales chart, show detailed records for that period.
```

```
Create a comparison view showing this month vs last month 
sales side by side.
```

```
Add export functionality to download charts as images 
or data as CSV.
```

## Key Airtable Concepts

* **Bases** - Airtable workspaces containing tables
* **Tables** - Collections of records (like database tables)
* **Records** - Individual rows in a table
* **Fields** - Columns in a table
* **Views** - Filtered/sorted table views

## Best Practices

* **Performance**: Use Airtable's `maxRecords` parameter to limit data fetching
* **Filtering**: Use `filterByFormula` to filter data server-side
* **Pagination**: Implement pagination for large datasets
* **Caching**: Consider caching Airtable data to reduce API calls
* **Error Handling**: Handle Airtable API rate limits gracefully

## Chart Types to Consider

* **Bar Charts** - Compare categories
* **Line Charts** - Show trends over time
* **Pie Charts** - Show proportions
* **Scatter Plots** - Show correlations
* **Heatmaps** - Show density or intensity
* **Gauges** - Show KPIs and metrics

## Next Steps

* Add real-time updates using Airtable webhooks
* Create custom date range presets (last 7 days, last month, etc.)
* Add chart customization options (colors, labels, etc.)
* Implement data export in multiple formats
* Add user preferences to save dashboard layouts

<CardGroup cols={2}>
  <Card title="Airtable Integration" icon="plug" href="/integrations/airtable">
    Learn more about Airtable integration
  </Card>

  <Card title="Working with Integrations" icon="book" href="/integrations/working-with-integrations">
    General guide for using integrations
  </Card>
</CardGroup>