Links

Drill down on a table

This walkthrough 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.
For reference, this searchable database app has a linked table and chart that will display more information about a company based on a chart

Set up data nodes

  1. 1.
    Create data 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. 2.
    On the data node for the chart, write a query with a SQL parameter you'd like to filter by. See Data Nodes for more information on parameter syntax and examples. This example in a transformation node will filter based on a ticker value.
Query:
SELECT ticker, company_name, exchange_short, total_volume, end_price, price_change
FROM {{{stock_prices}}}
WHERE ticker LIKE CONCAT('%', '{{ticker}}', '%');
Parameter Initialization:
{
"ticker": ""
}

Create your table

Create the table that the drill down will be connected to. See Create a table.

Create your chart

On the same page, add a Chart. As the chart's data source, select the data node with the SQL parameters. Then configure the chart as desired.
​
You can also create additional tables, or other elements, that will present your drilled-down data.

Create the interaction

To perform a drill down, a click event on the table will trigger the SQL parameter to change 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.