Example - Bookings QTD Klip

Overview of the Example - Bookings QTD Klip

This Klip uses a Bar/Line Chart Klip to display financial values captured over two quarters using bars, and an average of yearly values using a line. This Klip uses a nested formula, a feature that is important for manipulating and formatting data. 


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 URL to download the example data source and upload it as a web accessible resource to Klipfolio.

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

How to build the Example - Bookings QTD Klip

Note: Start these procedures on your Dashboard.

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 Bar/Line Chart Klip type.
 
  1. Select the Use an existing data source from the library option.
  2. Select the Example – Sales Data data source from the list of existing data sources.
You are brought to Klip Editor.

Assigning data to the first and second Series (the bars)

  1. Click the Klip node on the Component Tree.
  2. Type Bookings QTD in the Klip Title field.
  3. Click the first Series node on the Component Tree.
  4. Open the Data tab in the Properties Editor.
  5. Select the bookings_q4 scalar in the data source.
  6. Click the ellipsis (...) in the formula editor.
  7. Select the division (/) operator from the operators' menu.

  1. Click the Insert literal string or number button from the formula editing toolbar.
  2. Type 1000 in the text field.
  3. Click the Apply button.

  1. Open the Properties tab in the Properties Editor.
  2. Type CY Q4 in the Series Name field.

  1. Click the + Series button beside the chart preview.
  2. Click the second Series node on the Component Tree.
  3. Open the Data tab in the Properties Editor.
  4. Select the bookings_q3 scalar in the data source
.
  1. Click the ellipsis (...) in the formula editor.
  2. Select the division (/) operator from the operators' menu.
  3. Click the Insert literal string or number button on the formula editing toolbar.
  4. Type 1000 in the text field.
  5. Click the Apply button.
  6. Open the Properties tab in the Properties Editor.
  7. Type CY Q3 in the Series Name field.
  

Assigning data to the third Series (the line)

  1. Click the + Series button beside the chart preview. 
  2. Click the third Series 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 AVERAGE from the Function's menu.
Tip! Check out this article to learn more about the AVERAGE function.
  1. Select the bookings_q1 scalar from the data source.

  1. Select the AVERAGE function by clicking on its title.
  2. Click the data link.
  3. Select the bookings_q2 scalar from the data source.
  4. Select the AVERAGE function by clicking on its name.
  5. Click the data link.
  6. Select the bookings_q3 scalar from the data source
  7. Select the AVERAGE function by clicking on its name.
  8. Click the data link.
  9. Select the bookings_q4 scalar from the data source.
  10. Click the ellipsis (...) in the formula editor.
  11. Select the division (/) operator from the operators' menu.
  12. Click the ellipsis (...) in the formula editor.
  13. Click the Insert literal string or number button on the formula editing toolbar.
  14. Type 1000 in the text field.
  15. Click the Apply button.

  1. Open the Properties tab in the Properties Editor.
  2. Type Regional Avg. into the Series Name field.
  3. Select Line from the Display as menu.
  4. Click the X Axis node on the Component Tree.
  5. Open the Data tab in the Properties Editor.
  6. Select the name scalar from the data source.

  1. Click the Y Axis node on the Component Tree.
  2. Select the Show axis label option.
  3. Type Bookings $Thousands (K) in the Axis Label field.
  4. Select Currency 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