Example - Financial Performance YTD Klip

Overview of the Example - Financial Performance YTD Klip

This Klip uses a Table Klip to track the performance of key financial metrics and provide insight into the status of each metric. Table Klips let you format each Column component separately so that you can create reports that visualize your data virtually any way you want. 


Core concepts

This Klip will cover the following concepts:

Data source

If you don't have access to the data source backing this Klip, then you can use this link to download the example data source and upload it to Klipfolio Dashboard.

Tip! If you need help getting this data into Klipfolio Dashboard, then check out this article. 

To build the Example - Financial Performance YTD Klip

Note: Start this tutorial on your Dashboard page.

Select the Klip type and data source

  1. Click the Add a Klip button.
  2. Click the Build a New Klip button.
  3. Select the Table Klip type.

  1. Select the Use an existing data source from the library option.
  2. Select Example – Executive Data from the list of existing data sources.
You are brought to the Klip Editor.

Working with the first and second Column components

  1. Click the Klip node on the Component Tree.
  2. Type Financial Performance YTD in the Klip Title field.
  3. Click the first Column node on the Component Tree.
  4. Open the Data tab in the Properties Editor.
  5. Select cells A2:A5 from the data source.

The values are added to your Klip.


  1. Open the Properties tab in the Properties Editor.
  2. Type Metric in the Column Header field.
  3. Click the second Column node on the Component Tree.
  4. Open the Data tab in the Properties Editor.
  5. Select cells B2:B5 from the data source.
  6. Click the ellipsis (...)in the formula editor.
  7. Select the greater than (>) operator from the operator's menu.

  1. Click the ellipsis (...) in the formula editor.
  2. Select cells C2:C5 from the data source.

The values returned are either true or false based on the results of the formula.


  1. Open the Properties tab in the Properties Editor.
  2. Type [space]vs. PY in the Column Header field.
  3. Select the Fix column to a specified width option.
  4. Type 55 in the Width field.
  5. Select Number from the Format as menu.

  1. Open the Indicators tab.
  2. Click the Add button in the top right corner of the Indicators tab.
  3. Select Contains from the operators menu in the If statement.
  4. Type true in the comparison field.
  5. Select display icon from the results menu.
  6. Click the Select icon link.
  7. Select the green triangle facing upwards from the menu.
  8. Select Replace from the placement menu.
  9. Click the Finished button.

  1. Click the Add button in the top right corner of the Indicators tab.
  2. Select Contains from the operators menu in the If statement.
  3. Type false in the comparison field.
  4. Select display icon from the results menu.
  5. Click the Select icon link.
  6. Select the red triangle facing downwards from the menu.
  7. Select Replace from the placement menu.
  8. Click the Finished button.

Working with the third Column component

  1. Click the third Column node on the Component Tree.
  2. Open the Data tab in the Properties Editor.
  3. Select cells B2:B5 from the data source.
  4. Click the ellipsis (...) in the formula editor.
  5. Select the division (/) operator from the operator's menu.
  
  1. Select cells D2:D5 from the data source.
 
  1. Open the Properties tab.
  2. Type On Target in the Column Header text field.
  3. Select the Fix column to a specified width option.
  4. Type 80 in the Width field.
  5. Select Percentage from the Format as menu.

  1. Open the Indicators tab in the Properties Editor.
  2. Click the Add button.
  3. Select is greater than from the operator's menu.
  4. Type 1 in the comparison field.

This indicator statement uses the default colour change (green).


  1. Click the Add button.
  2. Select greater than from the operator's menu.
  3. Type 1.5 in the comparison field.
  4. Select display icon from the results menu.
  5. Click the Select Icon link.
  6. Select the green star from the menu.
  7. Click the Finished button.

  1. Click the Add button.
  2. Select less than from the operator's menu.
  3. Type 1 in the comparison field.
  4. Click the Select color link.
  5. Select Red from the menu.
  6. Click the Finished button.

Working with the fourth Column component

  1. Click the fourth Column node from the Component Tree.
  2. Open the Data tab in the Properties Editor.
  3. Click on the Select data or start formula link in the formula editor.
  4. Click the Insert function button on the formula editing toolbar.

  1. Select the ARRAY function from the Function's menu.
Tip! Check out this article to learn more about the ARRAY function.
  1. Click the data link in the ARRAY function.
  2. Click the Insert function button on the formula editing toolbar.
 
  1. Select Text>JOIN from the function's menu.
Tip! Check out this article to learn more about the JOIN function.
  1. Click the data link in the JOIN function.
  2. Select cells E2:O2 from the data source.

  1. Select the ARRAY function by clicking on its name.
  2. Click the data link in the ARRAY function.
  3. Click the Insert function button on the formula editing toolbar.

  1. Select Text>JOIN from the Function's menu.
  2. Select cells E3:O3 from the data source.

  1. Select the ARRAY function by clicking on its name.
  2. Click the data link in the ARRAY function.
  3. Click the Insert function button on the formula editing toolbar.
 
  1. Select Text>JOIN from the Function's menu.
  2. Select cells E4:O4 from the data source.
  
  1. Select the ARRAY function by clicking on its name.
  2. Click the data link in the ARRAY function.
  3. Click the Insert function button on the formula editing toolbar.

  1. Select Text>JOIN from the Function's menu.
  2. Select cells E5:O5 from the data source.

  1. Open the Properties tab of the Properties Editor.
  2. Type Past 12 Mths in the Column Header field.
  3. Select Mini Chart: Spark Bar from the format as menu.
 

Saving the Klip and adding it to the Dashboard

  1. Click the Save button.
  2. Provide a name for the Klip.

Note: By default, your Klip will use the Klip title you have provided. 

  1. Provide a description for the Klip.
  2. Select Trial Users to share the Klip.
  3. Click the Finished button.

Start building the next Klip in this guide...

Klip Tutorials

  1. Introduction
  2. Introduction to the Build-a-Klip Tutorial
  3. Build-a-Klip Tutorial: Phase One
  4. Build-a-Klip Tutorial: Phase Two
  5. Build-a-Klip Tutorial: Phase Three
  6. Build-a-Klip Tutorial: Phase Four
  7. Build-a-Klip Tutorial: Phase Five
  8. Example - Revenue YTD Klip
  9. Example - Financial Performance YTD Klip
  10. Example - World News Klip
  11. Example - Bookings by Country Klip
  12. Example - Bookings QTD Klip
  13. Example - Stock Quotes Klip
  14. Example - Marketing Traffic Sources Klip
  15. Example - 75/20 Service Level - Today Klip
  16. Training Klip - Array, Slice, Reverse, If, and Trim Functions
  17. Training Klip - Sum, Average, and Count Functions
  18. Training Klip - Group and Groupby Functions
  19. Training Klip - Date, Datevalue, and Today Functions
  20. Training Klip - Replace function and image URLs
  21. Training Klip - Concat and Join Functions
  22. Common Bar/Line Chart scenarios: Example of using the LOOKUP function with a condition to align data
  23. Common Bar/Line Chart scenarios: Example of using the LOOKUP function to align data
  24. Common User Input Control scenarios: Displaying total boxes of fruit sold in the last three months
  25. Common User Input Control scenarios: Counting all tickets by quarter, by month, by weekday
  26. Common Table scenarios: Selecting start and end dates to display number of boxes sold by country
  27. Common Table scenarios: Sorting data to display the video with the highest number of views
  28. Common Pie Chart scenarios: Displaying total number of surveys as a percentage by country
  29. Common Pie Chart scenarios: Displaying numbers and percentages in a pie chart legend

Feedback and Knowledge Base