Example - 75/20 Service Level - Today Klip

Overview of the Example - 75/20 Service Level - Today Klip

This Klip uses a combination of three Table Klips to display call center data such as service level and call volume. This Klip combines three Klips to visualize three pieces of related information in a single Klip. This Klip uses Indicators, mini chart formats, and nested formulas to visualize the data source.


Core concepts

This section covers the following concepts:

  • Building a Table Klip
  • Using Indicators in a Klip
  • Using nested formulas to build a Klip
  • Creating a combination Klip
  • Data source

    If you don't have acess 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. 

    How to build the Example - 75/20 Service Level - Today 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 – Call Center Data data source from list of existing data sources.
    You will be brought to the Klip Editor.

    Assigning data to the first Table 

    1. Click the Klip node on the Component Tree.
    2. Type 75/20 Service Level – Today in the Klip Title field.
    3. Click on the Table node on the Component Tree.
    4. Deselect the Show all column headers option.
    5. Click on the first Column node on the Component Tree.
    6. Open the Data tab in the Properties Editor.
    7. Click the Select data or start formula link in the formula editor.
    8. Click the Insert function button on the formula editing toolbar.
    9. Select SUM from the Function's menu.
    10. Click the data link in the formula editor.
    11. Click the Insert function button on the formula editing toolbar.
     
    1. Select Logic>IF from the Function's menu.
    Tip! Check out this article to learn more about the IF function.
    1. Click the condition link in the IF function.
    2. Click the Insert expression in a parenthesis button on the formula editing toolbar.
     
    1. Select cells F:F from the data source.
    2. Click the ellipsis (...) in the parenthesis.
    3. Select the less than (<) operator from the operator's menu.
    4. Click the ellipsis (...) in the parenthesis.
    5. Click the Insert literal string or number button on the formula editing toolbar.
    6. Type 20 in the text field.
    7. Click the Apply button.

    1. Click the if true link in the IF function.
    2. Select cells C:C from the data source.
    3. Click the if false link in the IF function.
    4. Click the Insert literal string or number button on the formula editing toolbar.
    5. Type 0 in the text field.
    6. Click the Apply button.
     
    1. Click the ellipsis (...) after the SUM function in the Function's menu.
    2. Select the division (/) operator from the operator's menu.
     
    1. Click the ellipsis (...) after the division (/) operator.
    2. Click the Insert function from the Function's menu.
    3. Select SUM from the Function's menu.
    4. Click the data link in the second SUM function.
    5. Select cells C:C from the data source.
    6. Click the ellipsis (...) after the second SUM function.
    7. Select the multiplication (*) operator from the operator's menu.
    8. Click the ellipsis (...) after the multiplication (*) operator.
    9. Click the Insert literal string or number button on the formula editing toolbar.
    10. Type 100 in the text field.
    11. Click the Apply button.
      
    1. Open the Properties tab in the Properties Editor.
    2. Type % Answered within SLA in the Column Header field.
    3. Select Number from the Format as menu.
    4. Select Left from the Alignment menu.
    5. Select Very Large from the Font Size menu.
    6. Type [space] / 20 in the Suffix field.

     

    Applying Indicators to the first Table

    1. Open the Indicator's tab.
    2. Click the Add button.
    3. Select is greater than or equal to from the operator's menu.
    4. Type 80 in the comparison menu.
    5. Select display icon from the indicator's menu.

    1. Click the Add button.
    2. Select is less than from the operator's menu.
    3. Type 80 in the comparison menu.
    4. Click the + button that is parallel to the If statement.
    5. Select is greater than from the operator's menu.
    6. Type 60 in the comparison menu.
    7. Select display icon from the indicator's menu.
    8. Select the yellow warning triangle from the icon menu.
    9. Click the Add button.
      
    1. Select is less than or equal to from the operator's menu.
    2. Type 60 in the comparison menu.
    3. Click the display icon in the operator's menu.
    4. Select the red warning square.
    5. Click the Finished button.


    Removing 3 columns from the first Table

    1. Click the second Column node on the Component Tree.
    2. Click the – button beside the table to remove that column.
    3. Click the third Column node on the Component Tree.
    4. Click the – button beside the table to remove that column.
    5. Click the fourth Column node on the Component Tree.
    6. Click the – button beside the table to remove that column.

    Adding a second Table to the Klip

    Tip! Check out this article to learn more about creating combination Klips.

    1. Click the Source Code button at the top of the workspace.
    2. Navigate to the bottom of the Table Klips' source code.
    3. Find the bracket } after the "showHeader":True value.
    4. Type a comma (,) after the bracket.
      
    1. Hit the enter key once to create a space.
    2. Copy and paste the following text after the comma:
     {
             "type": "table",
             "displayName": "Table",
             "fmtArgs": {},
             "vis": true,
             "id": "",
             "components": [
                {
                   "type": "table_col",
                   "displayName": "Unnamed 1",
                   "size": 1,
                   "fmtArgs": {
                      "thresholdCondition": "gt_eq",
                      "thresholdcolour": "#70b27c",
                      "thresholdvalue": 0
                   },
                   "role": "tcol",
                   "vis": true,
                   "id": "",
                   "components": [
                      {
                         "type": "proxy",
                         "displayName": "Result",
                         "fmtArgs": {},
                         "role": "result",
                         "vis": true,
                         "id": "",
                         "formulas": [],
                         "data": []
                      }
                   ],
                   "formulas": [],
                   "data": [
                      []
                   ],
                   "resultFmt": "empty",
                   "index": 0,
                   "align": "left",
                   "name": "Unnamed 1",
                   "font_colour": "regular",
                   "font_style": "bold"
                },
                {
                   "type": "table_col",
                   "displayName": "Unnamed 2",
                   "size": 1,
                   "fmtArgs": {
                      "thresholdCondition": "gt_eq",
                      "thresholdcolour": "#70b27c",
                      "thresholdvalue": 0
                   },
                   "role": "tcol",
                   "vis": true,
                   "id": "",
                   "components": [
                      {
                         "type": "proxy",
                         "displayName": "Result",
                         "fmtArgs": {},
                         "role": "result",
                         "vis": true,
                         "id": "",
                         "formulas": [],
                         "data": []
                      }
                   ],
                   "formulas": [],
                   "data": [],
                   "resultFmt": "empty",
                   "index": 1,
                   "align": "left",
                   "name": "Unnamed 2",
                   "font_colour": "regular",
                   "font_style": "bold"
                },
                {
                   "type": "table_col",
                   "displayName": "Unnamed 3",
                   "size": 1,
                   "fmtArgs": {
                      "thresholdCondition": "gt_eq",
                      "thresholdcolour": "#70b27c",
                      "thresholdvalue": 0
                   },
                   "role": "tcol",
                   "vis": true,
                   "id": "",
                   "components": [
                      {
                         "type": "proxy",
                         "displayName": "Result",
                         "fmtArgs": {},
                         "role": "result",
                         "vis": true,
                         "id": "",
                         "formulas": [],
                         "data": []
                      }
                   ],
                   "formulas": [],
                   "data": [],
                   "resultFmt": "empty",
                   "index": 2,
                   "align": "left",
                   "name": "Unnamed 3",
                   "font_colour": "regular",
                   "font_style": "bold"
                },
                {
                   "type": "table_col",
                   "displayName": "Unnamed 4",
                   "size": 1,
                   "fmtArgs": {
                      "thresholdCondition": "gt_eq",
                      "thresholdcolour": "#70b27c",
                      "thresholdvalue": 0
                   },
                   "role": "tcol",
                   "vis": true,
                   "id": "",
                   "components": [
                      {
                         "type": "proxy",
                         "displayName": "Result",
                         "fmtArgs": {},
                         "role": "result",
                         "vis": true,
                         "id": "",
                         "formulas": [],
                         "data": []
                      }
                   ],
                   "formulas": [],
                   "data": [],
                   "resultFmt": "empty",
                   "index": 3,
                   "align": "left",
                   "name": "Unnamed 4",
                   "font_colour": "regular",
                   "font_style": "bold"
                }
             ],
             "showHeader": true
          }
    1. Click the Update Button.

    Assigning data to the second Table 

    1. Click the second Table node on the Component Tree.
    2. Deselect the Show all column headers option.
    3. Click the first Column node in the second table on the Component Tree.
    4. Open the Data tab in the Properties Editor.
    5. Click the Select data or start formula link.
    6. Click the Insert literal string or number button on the formula editing toolbar.
    7. Type Call Volume in the text field.
    8. Click the Apply button.
     
    1. Open the Properties tab in the Properties Editor.
    2. Type Title 1 in the Column Header field.
    3. Select Right – No Border from the Column Border menu.
    4. Select the Fix column to a specified width option.
    5. Type 102 in the Width field.
    6. Select the second Column node the second table on the Component Tree.
    7. Open the Data tab in the Properties Editor.
    8. Click the Select data or start formula link in the formula editor.
    9. Click the Insert function button on the formula editing toolbar.
    10. 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 Data Manipulation>SLICE from the Function's menu.
    Tip! Check out this article to learn more about the SLICE function.
    1. Select the values link in the SLICE function.
    2. Select cells C:C from the data source.
     
    1. Open the Properties tab in the Properties Editor.
    2. Type Call Volume in the Column Header field.
    3. Select Left – No Border from the Column Border menu.
    4. Select Mini Chart: Spark Line from the Format as menu.
    5. Click the third Column node in the second table on the Component Tree.
    6. Click the – button beside the Table preview to remove the column.
    7. Click the fourth Column node in the second table on the Component Tree.
    8. Click the – button beside the Table preview to remove the column.
     

    Adding a third Table to the Klip

    Tip! Check out this article to learn more about creating combination Klips.

    1. Click the Source Code button at the top of the workspace.
    2. Navigate to the bottom of the Table Klips' source code.
    3. Find the bracket } after the "showHeader":True value.
    4. Type a comma (,) after the bracket.
     
    1. Hit the enter key once to create a space.
    2. Copy and paste the following text after the comma:
     {
             "type": "table",
             "displayName": "Table",
             "fmtArgs": {},
             "vis": true,
             "id": "",
             "components": [
                {
                   "type": "table_col",
                   "displayName": "Unnamed 1",
                   "size": 1,
                   "fmtArgs": {
                      "thresholdCondition": "gt_eq",
                      "thresholdcolour": "#70b27c",
                      "thresholdvalue": 0
                   },
                   "role": "tcol",
                   "vis": true,
                   "id": "",
                   "components": [
                      {
                         "type": "proxy",
                         "displayName": "Result",
                         "fmtArgs": {},
                         "role": "result",
                         "vis": true,
                         "id": "",
                         "formulas": [],
                         "data": []
                      }
                   ],
                   "formulas": [],
                   "data": [
                      []
                   ],
                   "resultFmt": "empty",
                   "index": 0,
                   "align": "left",
                   "name": "Unnamed 1",
                   "font_colour": "regular",
                   "font_style": "bold"
                },
                {
                   "type": "table_col",
                   "displayName": "Unnamed 2",
                   "size": 1,
                   "fmtArgs": {
                      "thresholdCondition": "gt_eq",
                      "thresholdcolour": "#70b27c",
                      "thresholdvalue": 0
                   },
                   "role": "tcol",
                   "vis": true,
                   "id": "",
                   "components": [
                      {
                         "type": "proxy",
                         "displayName": "Result",
                         "fmtArgs": {},
                         "role": "result",
                         "vis": true,
                         "id": "",
                         "formulas": [],
                         "data": []
                      }
                   ],
                   "formulas": [],
                   "data": [],
                   "resultFmt": "empty",
                   "index": 1,
                   "align": "left",
                   "name": "Unnamed 2",
                   "font_colour": "regular",
                   "font_style": "bold"
                },
                {
                   "type": "table_col",
                   "displayName": "Unnamed 3",
                   "size": 1,
                   "fmtArgs": {
                      "thresholdCondition": "gt_eq",
                      "thresholdcolour": "#70b27c",
                      "thresholdvalue": 0
                   },
                   "role": "tcol",
                   "vis": true,
                   "id": "",
                   "components": [
                      {
                         "type": "proxy",
                         "displayName": "Result",
                         "fmtArgs": {},
                         "role": "result",
                         "vis": true,
                         "id": "",
                         "formulas": [],
                         "data": []
                      }
                   ],
                   "formulas": [],
                   "data": [],
                   "resultFmt": "empty",
                   "index": 2,
                   "align": "left",
                   "name": "Unnamed 3",
                   "font_colour": "regular",
                   "font_style": "bold"
                },
                {
                   "type": "table_col",
                   "displayName": "Unnamed 4",
                   "size": 1,
                   "fmtArgs": {
                      "thresholdCondition": "gt_eq",
                      "thresholdcolour": "#70b27c",
                      "thresholdvalue": 0
                   },
                   "role": "tcol",
                   "vis": true,
                   "id": "",
                   "components": [
                      {
                         "type": "proxy",
                         "displayName": "Result",
                         "fmtArgs": {},
                         "role": "result",
                         "vis": true,
                         "id": "",
                         "formulas": [],
                         "data": []
                      }
                   ],
                   "formulas": [],
                   "data": [],
                   "resultFmt": "empty",
                   "index": 3,
                   "align": "left",
                   "name": "Unnamed 4",
                   "font_colour": "regular",
                   "font_style": "bold"
                }
             ],
             "showHeader": true
          }
    1. Click the Update Button.
     

    Assigning data to the third Table

    1. Click the third Table node on the Component Tree.
    2. Deselect the Show all column headers option.
    3. Click the first Column node in the third Table on the Component Tree.
    4. Open the Data tab in the Properties Editor.
    5. Click the Select data or start formula link in the formula editor.
    6. Click the Insert literal string or number option.
    7. Type SLA Pass/Fail in the text field.
    8. Click the Apply button.
     
    1. Open the Properties tab in the Properties Editor.
    2. Type Title 2 in the Column Header field.
    3. Select Right – No Border from the Column Border menu.
    4. Select the Fix column to the specified width option.
    5. Type 102 in the Width field.
    6. Click the second Column node in the third Table on the Component Tree.
    7. Open the Data tab in the Properties Editor.
    8. Click the Select data or start formula link in the formula editor.
    9. Click the Insert function button on the Component Tree.
    10. Select Text> JOIN from the Function's menu.
    11. Click the data link in the JOIN function.
    12. Click the Insert expression in parenthesis button on the formula editing toolbar.

    1. Click the ellipsis (...) in the parenthesis.
    2. Click the Insert literal string or number button on the formula editing toolbar.
    3. Type 20 in the text field.
    4. Click the ellipsis (...) in the parenthesis.
    5. Select the subtraction (-) option from the operator's menu.
    6. Click the ellipsis (...) after the subtraction (-) operator.
    7. Click the Insert function button on the formula editing toolbar.
    8. Select Data Manipulation>SLICE from the Function's menu.
    9. Click the values link in the SLICE function.

    1. Select cells F:F from the Function's menu.
    2. Open the Properties tab in the Properties Editor.
    3. Type Ans. Calls within SLA in the Column Header field.
    4. Select Left – No Border from the Column Border menu.
    5. Select Mini Chart: Win / Loss from the Format as menu.

    1. Click the third Column node in the third Table on the Component Tree.
    2. Click the – button beside the Table preview to remove the column.
    3. Click the fourth Column node in the third Table on the Component Tree.
    4. Click the – button beside the Table preview to remove the column.

    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. 

    The Klip is saved and added to your dashboard.

    Check out these sections to learn even more about Klipfolio:

    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