Example - Marketing Traffic Sources Klip

Overview of the Example - Marketing Traffic Sources Klip

This Klip uses a Table Klip to display values using indicators, bullet charts, and spark lines. This Klip relies on nested formulas to format the data in a comma separated list so it can be visualized using the mini chart format. This section also introduces an essential, time-saving feature: copying and pasting formula elements

 

Core concepts

This section covers 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.

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

To build the Example - Marketing Traffic Sources Klip

Note: Start these procedures 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 the Example – Marketing Data data source from list of existing data sources.
You are brought to the Klip Editor.

Assigning data to the first Column 

  1. Click the Klip node on the Component Tree.
  2. Type Marketing Traffic Sources 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 C1:E1 from the data source.
  
  1. Open the Properties tab in the Properties Editor.
  2. Type Traffic Source in the Column Header field.
  3. Select the Fix column to a specified width option.
  4. Type 160 in the Width field.
  5. Select Medium from the Font Size menu.
 

Assigning data to the second Column

Note: This Column will display a bullet chart and use nested formulas to build the chart. Make sure to follow each step carefully to correctly build the chart.

  1. Click the second Column node on the Component Tree.
  2. Open the Data tab in the Properties Editor.
  3. Click the Select data or start formula link in the formula editor.
  4. Click the Insert Function button on the formula editing toolbar.
  5. Select ARRAY 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.
  3. 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. Click the Insert Function button on the formula editing toolbar.
 
  1. Select ARRAY from the Function's menu.
  2. Click the data link in the nested ARRAY function.
  3. Click the Insert literal string or number button on the formula editing toolbar.
  4. Type 1500000 in the text field.
  5. Click the Apply button.
 
  1. Click the data link in the nested ARRAY function.
  2. Click the Insert Function button on the formula editing toolbar.

  1. Select SUM from the Function's menu.
  2. Click the data link in the nested SUM function.
  3. Click the Insert Function button on the formula editing toolbar.
 
  1. Select Data Manipulation>SLICE from the Function's menu.
Tip! Check out this article to learn more about the SLICE function
  1. Click the values link in the SLICE function.
  2. Select cells C:C from the data source.

  1. Click the start link in the SLICE function.
  2. Click the Insert literal string or number button on the formula editing toolbar.
  3. Type 1 in the text field.
  4. Click the Apply button.
  5. Click the end link in the SLICE function.
  6. Click the Insert literal string or number button on the formula editing toolbar.
  7. Type 30 in the text field.
  8. Click the Apply button.

This function specifies the first 30 day period in the data source.

 
  1. Select the nested SUM function by clicking on its title in the formula editor.
  2. Press CTRL+C with the SUM function selected.

  1. Select the nested ARRAY function by clicking on its title in the formula editor.
  2. Click the data link in the ARRAY function.
  3. Press CTRL+V with the data link selected.
 
  1. Click on the start value 1 in the SLICE function.
  2. Replace the 1 with a 29 in the text field.
  3. Click the Apply button.
  4. Click on the end value 30 in the SLICE function.
  5. Replace the 30 with a 60 in the text field.
  6. Click the Apply button.

This function specifies the second 30 day period in the data source.


  1. Select the JOIN function by clicking on its title in the formula editor.
  2. Press CTRL+C with the JOIN function selected.
 
  1. Select the first ARRAY function by clicking on its title.
  2. Click on the data link in the first ARRAY function.
  3. Press CTRL+V with the data link selected.
 
  1. Click on the value 1500000 in the second nested ARRAY function.
  2. Replace the value 1500000 with the value 900000 in the text field.
  3. Click the Apply button.
 
  1. Click on the values C:C in the first nested SUM function.
  2. Select cells D:D from the data source.
  3. Click on the values C:C in the second nested SUM function.
  4. Select cells D:D from the data source.
 
  1. Select the first ARRAY function by clicking on its title.
  2. Click on the data link in the first ARRAY function.
 
  1. Press CTRL+V with the data link selected.
  2. Click on the value 1500000 in the nested ARRAY function.
  3. Replace the value 1500000 with the value 700000 in the text field.
  4. Click the Apply button.
  5. Click on the values C:C in the first nested SUM function.
  6. Select cells E:E from the data source.
  7. Click on the values C:C in the second nested SUM function.
  8. Select cells E:E from the data source.
  9. Replace the 1 with a 29 in the text field.
  10. Click the Apply button.
  11. Click on the end value 30 in the SLICE function.
  12. Replace the 30 with a 60 in the text field.
  13. Click the Apply button.
 
  1. Open the Properties tab in the Properties Editor.
  2. Type Current Month / Target / Past Month in the Column Header field.
  3. Select Mini Chart: Bullet from the Format As menu.
  4. Select Medium from the Chart Size menu.

  Assigning data to the third Column

  1. Click the third Column component on the Component Tree.
  2. Open the Data tab in the Properties Editor.
  3. Click the Insert function button on the formula editing toolbar.
  4. Select ARRAY from the Function's menu.
  5. Click the data link in the ARRAY function.
  6. Click the Insert literal string or number button on the formula editing toolbar.
  7. Type 1500000 in the text field.
  8. Click the Apply button.
 
  1. Click the data link in the ARRAY function.
  2. Click the Insert literal string or number button on the formula editing toolbar.
  3. Type 900000 in the text field.
  4. Click the Apply button.
  
  1. Click the data link in the ARRAY function.
  2. Click the Insert literal string or number button on the formula editing toolbar.
  3. Type 700000 in the text field.
   
  1. Click the Apply button.
  2. Open the Properties tab in the Properties Editor.
  3. Type Target in the Column Header field.
  4. Select the Hide this column option.
 

Assigning data to the fourth Column

  1. Click the fourth Column node on the Component Tree.
  2. Open the Data tab in the Properties Editor.
  3. Click the Select data or start formula link in the formula editor.
  4. Click the Insert function button on the formula editing toolbar.
  5. Select ARRAY from the Function's menu.
  6. Click the data link in the ARRAY function.
  7. Click the Insert function button on the formula editing toolbar.
  8. Select SUM from the Function's menu.
  9. Click the data link in the nested SUM function.
  10. Click the Insert function button on the formula editing toolbar.
 
  1. Select Data Manipulation>SLICE from the Function's menu.
  2. Click the values link in the nested SLICE function.
  3. Select cells C:C from the data source.
  
  1. Click the start link in the nested SLICE function.
  2. Click the Insert literal string or number button on the formula editing toolbar.
  3. Type 1 in the text field.
  4. Click the Apply button.
  5. Click the end link in the nested SLICE function.
  6. Click the Insert literal string or number button on the formula editing toolbar.
  7. Type in 30 in the text field.
  8. Click the Apply button.
  9. Select the nested SUM function by clicking on its title.
  10. Press CTRL+C with the SUM function selected.
 
  1. Select the ARRAY function by clicking on its title.
  2. Click the data link in the ARRAY function.
  3. Press CTRL+V with the data link selected.

  1. Click the values C:C from the second SUM function.
  2. Select cells D:D from the data source.
  
  1. Select the ARRAY function by clicking on its title.
  2. Click the data link in the ARRAY function.
  3. Press CTRL+V with the data link selected.
 
  1. Click the values C:C from the third SUM function.
  2. Select cells E:E from the data source.
 
  1. Open the Properties tab in the Properties Editor.
  2. Type Current Month in the Column Header field.
  3. Select the Fix column to a specified width option.
  4. Type 150 in the Width field.
  5. Select Number from the Format as menu.
  6. Select Medium from the Font Size menu.
 

Assigning data to the fifth Column

  1. Click the + button beside the table preview to add a Column.
  2. Click the fifth Column node on the Component Tree.
  3. Open the Data tab in the Properties Editor.
  4. Click the Select data or start formula link in the formula editor. 
  5. Click the Insert function button on the formula editing toolbar.
  6. Select ARRAY from the Function's menu.
  7. Click the data link in the ARRAY function.
  8. Click the Insert function button on the formula editing toolbar.
  9. Select Text>JOIN from the Function's menu.
  10. Click the data link in the JOIN function.
  11. Click the Insert function button on the formula editing toolbar.
  
  1. Select Data Manipulation>SLICE from the Function's menu.
  2. Click the values link in the SLICE function.
  3. Click the Insert function button on the formula editing toolbar.
  4. Select Data Manipulation>REVERSE from the Function's menu.
Tip! Check out this article to learn more about the REVERSE function.
  1. Click the data link in the REVERSE function.
  2. Select cells C:C from the data source.
  
  1. Select the SLICE function by clicking on its title.
  2. Click on the start link in the SLICE function.
  3. Click the Insert literal string or number button on the formula editing toolbar.
  4. Type 0 in the text field.
  5. Click the Apply button.
  6. Click on the end link in the SLICE function.
  7. Click the Insert literal string or number button on the formula editing toolbar.
  8. Type 60 in the text field.
   
  1. Select the nested JOIN function by clicking on its title.
  2. Press CTRL+C with the JOIN function selected.
  
  1. Select the ARRAY function by clicking on its title.
  2. Click on the data link in the ARRAY function.
  3. Press CTRL+V with the ARRAY function selected.

  1. Select the value C:C in the second REVERSE function.
  2. Select cells D:D from the data source.
  3. Select the ARRAY function by clicking on its title.
  4. Click on the data link in the ARRAY function.
  5. Press CTRL+V with the ARRAY function selected.
  6. Select the value C:C in the second REVERSE function.
  7. Select cells E:E from the data source.
 
  1. Open the Properties tab in the Properties Editor.
  2. Type 60 Day Trend in the Column Header field.
  3. Select Mini Chart: Spark Line from the Format as menu.

 

Applying Indicators to Columns

  1. Click the first Column node on the Component Tree.
  2. Open the Indicators tab in the Properties Editor.
  3. Click the Add button.
  4. Select Current Month from the If menu.
  5. Select is greater than from the operator's menu.
  6. Select Target from the comparison menu.
  7. Select display icon from the indicator style menu.
  8. Click the Select icon link.
  9. Select the green circle from the icon menu.
  10. Click the Finished button.
  
  1. Click the Add button.
  2. Select Current Month from the If menu.
  3. Select is less than or equal to from the operator's menu.
  4. Select Target from the comparison menu.
  5. Select display icon from the indicator style menu.
  6. Click the Select icon link.
  7. Select the red square from the icon menu.
  8. Click the Finished button.
 
  1. Click the second Column node on the Component Tree.
  2. Open the Indicators tab in the Properties Editor.
  3. Click the Add button.
  4. Select Current Month from the If menu.
  5. Select is greater than from the operator's menu.
  6. Select Target from the comparison menu.
  
  1. Click the Add button.
  2. Select Current Month from the If menu.
  3. Select is less than from the operator's menu.
  4. Select Target from the comparison menu.
  5. Click the Select color link.
  6. Select the red from the color menu.
  7. Click the Finished button.

 

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 build 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