Example - Stock Quotes Klip

Overview of the Example - Stock Quotes Klip

This Klip uses a combination of two Table Klips to display stock quotes and return information such as the current trends, a image of a chart for each item, and a hyperlink for more information. This Klip combines two Table Klips by editing the Klip's Source Code, a unique feature that allows you to fully customize any Klip you assemble.


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

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

How to build the Example - Stock Quotes 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 Table Klip type.
 
  1. Select the Use an existing data source from the Library option.
  2. Select the Example – Yahoo Stock Quotes data source from list of existing data sources.
You will be brought to the Klip Editor.

Assigning data to the first, second, third, and fourth Columns

  1. Click the Klip node on the Component Tree.
  2. Type Stock Quotes in the Klip Title field.
  3. Click the + button beside the table until there are nine Column nodes in the Component Tree.
  4. Click the first Column node on the Component Tree.

  1. Open the Data tab in the Properties Editor.
  2. Select cells A:A from the data source.
  3. Open the Properties tab in the Properties Editor.
  4. Type Symbol in the Column Header field.
  5. Select the Hide this column option.

  1. Click the second Column node on the Component Tree.
  2. Open the Data tab in the Properties Editor.
  3. Select cells B:B from the data source.
 
  1. Open the Properties tab in the Properties Editor.
  2. Type Company in the Column Header field.
  3. Select the fix column to a specified width option.
  4. Type 150 in the Width field.
  
  1. Click the third Column node on the Component Tree.
  2. Open the Data tab in the Properties Editor.
  3. Select cells C:C from the data source.
 
  1. Open the Properties tab in the Properties Editor.
  2. Type Price in the Column Header field.
  3. Select Currency from the Format as menu.
  4. Select .##(2) from the Decimal Places menu.
   
  1. Click the fourth Column node on the Component Tree.
  2. Open the Data tab in the Properties Editor.
  3. Select cells F:F from the data source.
 
  1. Open the Properties tab in the Properties Editor.
  2. Type Change in the Column Header field.
  3. Select Currency from the Format as menu.
  4. Select .##(2) from the Decimal Places 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 0.01 in the comparison menu.
 
  1. Click the Add button.
  2. Select is less than from the operator's menu.
  3. Type -0.01 in the comparison menu.
  4. Click the Select colour link.
  5. Select the Red from color menu.
  6. Click the Finished button.

   

Assigning data to the fifth Column

  1. Click the fifth Column node on the Component Tree.
  2. Open the Data tab in the Properties Editor.
  3. Select cells F:F from the data source.
  4. Click the ellipsis (...) in the formula editor.
  5. Select the division (/) operator from the operator's menu.
  6. Click the Insert expression with parenthesis button on the formula editing toolbar.

  1. Select cell C:C from the data source.
  2. Click the ellipsis (...) in the expression.
 
  1. Select the subtraction (-) operator from the operator's menu.
  2. Select cells F:F from the data source.

  1. Open the Properties tab in the Properties Editor.
  2. Type % Chg in the Column Header field.
  3. Select Percentage from the Format as menu.
  4. Select .###(3) from the Decimal Place menu. 
  5. Select Average from the Results Row 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 0.001 in the comparison menu.
  5. Click the + button parallel then statement.
  6. Select Display icon from the and statement's operator menu.
  7. Click the Select icon link.
  8. Select the green triangle facing upwards.
  9. Click the Finished button.
 
  1. Click the Add button.
  2. Select is less than from the operator's menu.
  3. Type -0.001 in the comparison menu.
  4. Click the Select color link.
  5. Select Red from the list of colors.
  6. Click the + button parallel then statement.
  7. Select Display icon from the and statement's operator menu.
  8. Click the Select icon link.
  9. Select the red triangle facing downwards.
  10. Click the Finished button.  

Assigning data to the sixth and seventh Column

  1. Click the sixth Column node on the Component Tree.
  2. Open the Data tab in Properties Editor.
  3. Click the Select data or start formula link in the formula editor.
  4. Select cells H:H from the data source.
  5. Click the ellipsis (...) in the formula editor.
  6. Select the division (/) operator from the operator's menu.
 
  1. Click the Insert literal string or number button on the formula editing toolbar.
  2. Type 1000000 in the text field.
  3. Click the Apply button.
 
  1. Open the Properties tab in the Properties Editor.
  2. Type Volume in the Column Header field.
  3. Select Number from the Format as menu.
  4. Select .# (1) from the Decimal Places menu.
  5. Type [space] M in the Suffix text field.
  6. Select Sum from the Results Row menu.

  1. Click the seventh Column node on the Component Tree.
  2. Open the Data tab in the Properties Editor.
  3. Select cells G:G from the data source.
  4. Click the ellipsis (...) button in the formula editor.
  5. Select the division (/) operator from the operator's menu.
 
  1. Click the Insert literal string or number button on the formula editing toolbar.
  2. Type 100 in the text field.
  3. Click the Apply button.
 
  1. Open the Properties tab in the Properties Editor.
  2. Type % Chg 52w Avg in the Column Header field.
  3. Select Percentage from the Format as menu.
  4. Select the Hide this column option.

 

Apply Indicators to Columns

  1. Click the second Column node (Company) on the Component Tree.
  2. Open the Indicators tab in the Properties Editor.
  3. Click the Add button.
  4. Select % Chg 52w Avg component from the If menu.
  5. Select is greater than from the operator's menu.
  6. Type 0.15 in the comparison menu.
  7. Select display icon from the indicator style menu.
  8. Click the Select icon link.
  9. Select the yellow star from the list of icons.
  10. Click the Finished button.

  1. Click the Add button.
  2. Select % Chg 52w Avg from the If menu.
  3. Select is less than or equal to from the operator's menu.
  4. Type 0.15 in the comparison menu.
  5. Select display icon from the indicator style menu.
  6. Click the Select icon link.
  7. Select the Blank icon from the list of icons.
  8. Click the Finished button.


Assigning data to the eighth Column

  1. Click the eighth 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 Text>CONCAT from the Function's menu.
Tip! Check out this article to learn more about the CONCAT function. 
  1. Click the Insert literal string or number button on the formula editing toolbar.

  1. Type the following URL in the text field: http://chart.finance.yahoo.com/t?s=
  2. Click the Apply button.
 
  1. Click the data link in the CONCAT function
  2. Select cells A:A from the data source.
 
  1. Click the data link in the CONCAT function.
  2. Type the following URL in the text field: &lang=en-US&region=US&width=500&height=300
  3. Click the Apply button.
 
  1. Open the Properties tab in the Properties Editor.
  2. Type Chart in the Column Header field.
  3. Select the Fix column to a specified width option.
  4. Type 80 in the Width field.
  5. Select Image URL from the Format as menu.
  6. Select Resize to... from the Image Size menu.
  7. Type 60 in the Image Width field.
  8. Type 13 in the Image Height field.

  

Assigning data to the ninth Column

  1. Click the ninth Column node on the Component Tree.
  2. Click the Select data or start formula link in the formula editor.
  3. Click the Insert function button on the formula editing toolbar.
  4. Select Text>CONCAT from the Function's menu.
  5. Click the Insert literal string or number button on the formula editing toolbar.
  6. Type the following URL in the text field: http://www.finance.yahoo.com/q?s=
  7. Click the Apply button.

  1. Click the data link in the CONCAT function
  2. Select cells A:A from the data source.
  3. Click the data link in the CONCAT function.
  4. Type the following URL in the text field: &ql=1
  5. Click the Apply button.
 
  1. Open the Properties tab in the Properties Editor.
  2. Delete the text in the Column Header field, leaving it blank.
  3. Select the Fix column to a specified width option.
  4. Type 70 in the Width field.
  5. Select Hyperlink from the Format as menu.
  6. Type More… in the Fixed text field.
Tip! Check out this article to learn more about hyperlinks.

 

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. 

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