# Connect your Heroku Dataclips to Geckoboard

Learn how to connect Heroku Dataclips and begin visualizing your data.

September 24, 2025

## How to connect your Heroku Dataclips

1. Add a new Heroku Dataclips widget from your dashboard.
2. Select a visualization type from the list.
3. Add your Data Clip URL.
4. Complete the widget configuration as preferred, then **select Add widget.**

## Visualization options

### Number widget

The widget expects numeric data for the column specified in the configuration under _field_.

From the configuration menu, specify the following options:

- **URL:** The URL to your Dataclip, provided in the browser address field or from the **[share option](https://devcenter.heroku.com/articles/dataclips#sharing-dataclip-results)**.
- **Field:** You can choose which options returned from the Dataclip you want to display in the number widget.
- **Display:** Choose to display the first or last entry from the column indicated by _field_. e.g. in this example, the data is displayed in ascending order with the most recent month being last, so we choose last entry.

The example above uses the following SQL:

```
SELECT
date_trunc('month', purchases.created_at) as month,
sum(quantity * purchase_items.price) as book_purchases
FROM
products,
purchases,
purchase_items
WHERE
tags @> ARRAY[CAST('Book' as varchar(255))]
AND purchases.id = purchase_items.purchase_id
AND products.id = purchase_items.product_id
GROUP BY 1
ORDER BY 1 ASC;
```

This produces the following data:

|     |     |
| --- | --- |
| **month** | **book_purchases** |
| 2011-01-01 00:00:00+00 | 747.58 |
| 2011-02-01 00:00:00+00 | 953.48 |
| 2011-03-01 00:00:00+00 | 767.51 |
| 2011-04-01 00:00:00+00 | 1221.28 |
| 2011-05-01 00:00:00+00 | 931.50 |
| 2011-06-01 00:00:00+00 | 1045.41 |
| 2011-07-01 00:00:00+00 | 863.42 |
| 2011-08-01 00:00:00+00 | 629.56 |
| 2011-09-01 00:00:00+00 | 681.56 |
| 2011-10-01 00:00:00+00 | 827.51 |
| 2011-11-01 00:00:00+00 | 701.55 |
| 2011-12-01 00:00:00+00 | 771.57 |

### Gauge widget

The current item field expects numeric data from the column selected in _the field_. Based on all items in this column, minimum and maximum values are automatically calculated.

From the configuration menu in the widget, specify the following options:

- **URL:** The URL to your Heroku Dataclip, provided in the browser address field or from the **[share option](https://devcenter.heroku.com/articles/dataclips#sharing-dataclip-results)**.
- **Field:** You can choose which of the options returned from the Dataclip you want to display in the widget.
- **Current Item:** Specifies which data value in the field chosen to treat as the current item, the main white number in the picture above.

### Column chart widget

The x-axis takes alphanumeric data, and the y-axis takes just numeric data.

From the config menu in the widget, specify the following options:

- **URL:** The URL to your Heroku Dataclip, provided in the browser address field or from the **[share option](https://devcenter.heroku.com/articles/dataclips#sharing-dataclip-results)**.
- **X-Axis Field:** You can choose which of the options returned from the dataclip you want to display in the widget along the x-axis.
- **Y-Axis Field:** You can choose which of the options returned from the dataclip you want to display in the widget along the y-axis.

The example above uses the following SQL:

```
SELECT
details->'state' as state,
SUM(quantity * purchase_items.price) as total_sales
FROM
purchase_items,
purchases,
users
WHERE
users.id = purchases.user_id
AND purchases.id = purchase_items.purchase_id
AND details ? 'state'
GROUP BY 1
ORDER BY 1;
```

This produces the following data:

|     |     |
| --- | --- |
| **state** | **total_sales** |
| Florida | 10778.27 |
| Illinois | 7916.60 |
| New York | 6283.70 |
| South Carolina | 8769.53 |
| Virginia | 6566.08 |

### RAG (Red, Amber, Green) widget

The widget expects numeric data for the column specified in the config under _field_. It displays up to 3 values, with null values being included in that count but not being shown.

From the configuration menu in the widget, specify the following options:

- **URL:** The URL to your Heroku Dataclip, provided in the browser address field or from the **[share option](https://devcenter.heroku.com/articles/dataclips#sharing-dataclip-results)**.
- **Field:** You can choose which of the options returned from the dataclip you want to display in the widget.
- **Display:** Choose to display the first or last 3 entries from the column indicated by _field_.
- **State 1 label:** Optional label shown against the first state, indicated in red in the above picture.
- **State 2 label:** Optional label shown against the first state, indicated in amber in the above picture.
- **State 3 label:** Optional label shown against the second state, indicated in green in the above picture.
- **Reverse colors:** Show the colors in the reverse order, so GAR (Green, Amber, Red).

The example above uses the following SQL:

```
SELECT
coalesce(details->'sex', 'unknown') as gender,
SUM(quantity * purchase_items.price) as total_sales
FROM
purchase_items,
purchases,
users
WHERE
users.id = purchases.user_id
AND purchases.id = purchase_items.purchase_id
GROUP BY 1;
```

This produces the following data:

|     |     |
| --- | --- |
| **gender** | **total_sales** |
| Unknown | 105298.68 |
| M | 109714.74 |
| F | 104051.56 |

### Funnel widget

The widget expects numeric data for the column specified in the config under _field_. It displays up to 8 values, with null values being included in that count but not being shown.

From the configuration menu in the widget, specify the following options:

- **URL:** The URL to your Heroku Dataclip, provided in the browser address field or from the **[share option](https://devcenter.heroku.com/articles/dataclips#sharing-dataclip-results)**.
- **Field:** You can choose which of the options returned from the dataclip you want to display in the widget.
- **Display:** Choose to display the first or last 8 entries from the column indicated by 'field'.
- **Funnel 1 label:** Optional label shown against the first funnel.
- **Reverse colors:** Show the colors in the reverse order, so larger numbers are red instead of green, and smaller ones are green instead of red.
- **Hide percentages:** Percentages are shown as conversions between stages in the funnel.

### Line chart widget

The x-axis takes alpha-numeric data, and the y-axis takes just numeric data. Date/time values used in the x-axis are automatically detected and are automatically formatted for you in the line chart. Non-date/time data can also be used but isn't re-formatted in any way.

From the configuration menu in the widget, specify the following options: