# Drill down on a table

This walkthrough tutorial will help you drill down on a table and present the results in a chart. The chart will update based on which row is clicked on the table.&#x20;

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F50hn0N6dpTmHes2piMGe%2Fdrill-down.gif?alt=media&#x26;token=c21bcf37-df38-49b2-b90c-7b2418472dd2" alt=""><figcaption></figcaption></figure>

## Set up query nodes for chart

1. Create query node(s) to use for a table and chart. These are likely to be different nodes, which will allow you filter data for a chart without changing the table.
2. On the data node for the chart, write a query with a SQL parameter you'd like to filter by. See [query](https://docs.acho.io/app-builder/app-construction/query "mention") for more information on parameter syntax and examples. This example in a transformation node will filter based on a ticker value.<br>

   <figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2Ft48tudEmpHgE8oeMYVjW%2Fdrill-down-chart-table.jpg?alt=media&#x26;token=5121e999-13bb-4d9d-91f5-c6d5ffcc1444" alt=""><figcaption></figcaption></figure>

Query:

```sql
SELECT date, ticker, name, close as stock_price
FROM company_daily_stock_price
WHERE ticker = '{{ticker}}'
ORDER BY date
```

Parameter Initialization(Add a parameter named <mark style="color:red;">`ticker`</mark> with default value of <mark style="color:red;">`ORCL`</mark>):

```sql
{
  "ticker": "ORCL"
}
```

## Create your table

Create the table that the drill down will be connected to. See [create-a-table](https://docs.acho.io/app-builder/popular-use-cases/create-a-table "mention"). For the table, create another query node for table data. Use this query node as the **Data source** of the table.

Query:<br>

```sql
WITH RankedObservations AS (
    SELECT 
        *,
        ROW_NUMBER() OVER (PARTITION BY ticker ORDER BY date DESC) AS row_number
    FROM company_daily_stock_price
)

SELECT ticker, name, close as stock_price, volume, website, industry, subindustry
FROM RankedObservations
WHERE row_number = 1
```

## Create your chart

On the same page, drag a [chart](https://docs.acho.io/app-builder/app-construction/elements/table-and-chart/chart "mention") element. As the chart's data source, select the query node with the SQL parameters. Then configure the chart as desired. For example, set `date` for x dimension and `stock_price` for y metric.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FUiVvkjJGBmZn71PoNjAN%2Fimage.png?alt=media&#x26;token=52397ec9-8909-428e-a8c5-f31c91310623" alt=""><figcaption></figcaption></figure>

## Create the interaction

To perform a drill down, a click event on the table is used to trigger the change of query node's SQL parameter so only the data for the selected ticker is shown on the chart. For example, if we're filtering by ticker, we'll pass in `${event.rowData.ticker}` as the action parameter.

The chart will now show data for only that ticker after click on a certain row.<br>

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FbEGCAtyepr2y3wkIQgLC%2Fimage.png?alt=media&#x26;token=c0e17846-144f-4531-8aa0-ade2759b42a3" alt=""><figcaption></figcaption></figure>

You can also create additional tables, or other elements, that will present your drilled-down data. For example, add a text to display the company's name. Add one more **Action - Element - Set text** after **Row Click**, then set the text to `${event.rowData.name}`

[Preview](https://docs.acho.io/app-builder/preview) or [publish](https://docs.acho.io/app-builder/publish) your app to see the result.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F50hn0N6dpTmHes2piMGe%2Fdrill-down.gif?alt=media&#x26;token=c21bcf37-df38-49b2-b90c-7b2418472dd2" alt=""><figcaption></figcaption></figure>
