Build-a-Klip Tutorial: Phase Three

Let's add to our Klip with a Separator component and a Chart component underneath.


Phase Three: Charts and Series

You can follow along with our video as well as our step-by-step guide.

Location

Action

First, let’s get the Separator in place. Drag and drop a Separator component from the Components Palette into the Klip, below the Layout Grid component. Below that, drag a Bar/Line Chart component.
Your Klip should look like this:
Note that Series: Untitled is selected in the Component Tree. Let’s assign some data to that series on the Data Panel. Click and drag from B2 to B7.
Your Chart component should look like this:
Let’s name the series. Go to the Properties Panel and rename the Series Label from “Untitled” to “Users”.
Let’s define the series that will make up the X-axis labels along the bottom of the chart. Select X-Axis: Untitled from the Component Tree.
On its Data Panel, select from (not set) to Oceania.
Your chart should look like this:
  • As a best practice, let’s give the X-Axis a title. On its Properties Panel, change “Untitled” for X-Axis Title to “Region”.
  • Select the Y-Axis from the Component Tree and set the Axis Title for the Y-Axis to “Volume”.
  • Let’s now add a second series to the Bar/Line Chart component. Find and click on the Controls Palette to open it.
  • Click the + icon next to Series to add another series to the chart.
  • Note that the New Series is selected in the Component Tree.

  • On the Data Panel of the new series, select a new vector, from C2 to C7, and on its Properties Panel give it a Series Label called “Sessions”.
Click on the background of your Klip to deselect the Series. Your Klip should look like this:

Let’s make the Chart a little less tall. In the Component Tree, select Series Chart. On its Properties Panel, change Size from Medium to Small.
Save your work by using the Save command in the Save and Exit Menu.
Our Klip is developing nicely!

Let's move along to Phase Four.



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