Indicators are a great way to see what matters at a glance. In this example, two indicator rules change the background color based on whether the column values are greater than or less than the total average value. That is, if the value is greater than the total average value the background color for each cell displays as orange, if it is less than the cells display as green.
To demonstrate these indicator rules we use a Google Analytics query: a dimension called ga:pageTitle, and a metric called ga:pageLoadtime. The time-frame is today.
Let's use the Table component to visualize this data.
For the first column called Page Title, (you can name a column in the Properties panel) point to the ga:PageTitle column of your data source.
This column is formatted as Text
Use the three vertical dots to apply a Group filter to this column which will return one name for each page title.
Use the three vertical dots to add a filter to exclude the column header, ie ga:pageTitle. This filter will be applied to all column headers.
For the second column called Page Load Time point to the ga:pageLoadtime column of your data source.
This column is formatted as Number.
Note: As we have grouped our first column, this column is automatically grouped as well. By default, the column also has an aggregation of sum.
Select the Properties panel and for the field called Results Row, select Average.
This adds a custom results row to the bottom of the Page Load Time column and displays the average total of column values.
To set up the indicators using a hidden data sub-component
Select Table, Properties, and at the field called Hidden Data, select Add Hidden Data
(This adds a Data sub-component to the Table hierarchy)
Select the Data sub-component, and type AVERAGE, and point to the ga:pageLoadtime column from your data source.
Select the Properties panel and select Treat as independent data.
This tells Klipfolio the formula in this sub-component should NOT be applied to the other columns in our Table.
This formula gives us the same result as our average custom results row. The difference is our hidden data sub-component can be referenced in our Indicators panel, but our results row cannot.
Select the column where you want the cells to be colored based on the condition, ie Page Load Time column.
Select the Indicators panel
Click the Add button
Click the drop down arrow and select greater than or equal to as the condition that must be met.
Click the Text icon, the drop-down arrow, to select the name of the hidden data component called Data: Average.
Select the action you want to happen when the condition is met, ie change background color to Orange.
To add another rule for when the condition is less than the average, click the Add button.
The final Klip might look similar to this one.