Skip to main content

Introduction to components in Klips

Updated

Components are the building blocks for Klips and determine the way your Klips look and behave. Choosing the right components helps you represent and interpret your data effectively. Klipfolio includes many components for you to choose from.

Klips can be built using a single component:

Or built using multiple components:

Read this article to learn the basics about each component type, then dive in and start experimenting. Keep in mind that the best Klips don’t have to be complicated - in fact, simplicity rules! If you’re unsure of what you want, sketch it out first on paper and then start building.

There’s a lot of information here so, if you are interested in a specific component, click it in the list below to be taken to that section of the article:

Presentation components

Before we begin, let’s take a minute to talk about the unsung, but often necessary, presentation components: the Layout Grid, Label, and Separator components. These components provide structure and context for the components you add when building a Klip.

The Layout Grid is divided into cells by horizontal and vertical grid lines. You drag a Layout Grid into the Klip workspace and then insert components into its cells, for example, you could insert a table in one and an image in another. You can add and remove or adjust the width and height of each cell. For optimum Klip performance, avoid nesting a Layout Grid within another Layout Grid. If you want to increase the capacity of your Layout Grid, add rows and columns.

The Label component is ideal for creating section headers and adding descriptions to Klips. It can also be used to display a single value. Labels are versatile - they can include text, numbers, image URLs, hyperlinks, and mini charts.

The Separator component is a line that’s used to create visual separation between components in a Klip. It can be positioned vertically or horizontally and helps to organize content, differentiate between components, control white space around components, and add visual impact to the overall appearance of a Klip.

Bar/Line Chart

The Bar/Line Chart component displays a comparison of values in either a bar or line chart form (or a combination of the two). It’s great for comparing metrics as well as showing trends over time.

This horizontal Bar Chart uses an inverted Bar Chart to show zero as a reference point between positive and negative numbers:

This stacked Bar Chart visually aggregates all of your categories into groups:

This Line Chart incorporates multiple series for comparison between related data over a period of time:

For a more detailed description of the Bar/Line component, see this article.

Table

The Table component displays information in columns and rows, so it’s ideal for showing tabular data, such as regional sales figures. It’s also a great way to display a lot of related data - an important factor in effectively utilizing dashboard space. Keep in mind, however, that clarity comes with simplicity - you don’t want to overload your table component with excessive information. The Table component’s versatility really shines through when you diverge from simple text and numbers and add things like mini-charts, links, results rows, and images. You can also enable drill-down functionality.

See the following example that uses indicators, results rows (in this case, an average of each column’s values), and URL links:

And this example, that uses drill-down functionality - clicking on the country name displays the specific data for that country that is summarized in this consolidated table:

For a more detailed description of the Table component, see this article.

Value Pair

The Value Pair component includes a primary and secondary value and is ideal for monitoring a single KPI (primary value), such as a stock price or a ratio, alongside a label or comparison value (secondary value). You can also set indicator thresholds to show progress (see the following example):

For a more detailed description of the Value Pair component, see this article.

Sparkline

The Sparkline component includes a line or bar graph that displays trends over time and/or the current value of a KPI. This component includes three chart types: Sparkline, Spark Bar, and Win/Loss.

Following is an example of a Sparkline Chart that shows the historical trend behind the current value of 3:

Following is an example of a Spark Bar Chart that shows the lead up to a current value of $7,525:

Following is an example of a Win/Loss Chart that highlights two series - using a Win/Loss Chart and a Line Chart, to show trends from a single data set:

For a more detailed description of the Sparkline component, see this article.

Pie Chart

The Pie Chart component displays categorical data divided into sections, so you can see each section’s value in comparison to the whole. It’s ideal for monitoring KPIs such as survey results or for a regional breakdown of revenue. Available as a pie or donut style, you can add information with tooltips and a legend, and click on each piece to see its unique data. You can also use colours and labels to add context and detail to your Pie Chart.

See the following example of a Pie Chart:

For a more detailed description of the Pie Chart component, see this article.

Scatter Chart

The Scatter Chart component shows a visual comparison of two sets of values in a chart. It’s best for data like survey results, test results, and demographics.

Here is an example of a Scatter Chart that compares GDP and population:

For a more detailed description of the Scatter Chart component, see this article.

Bubble Chart

The Bubble Chart component shows the correlation between three sets of data and, like the Scatter Chart, is ideal for data like survey results, test results, and demographics.

Bubble Charts can be simplistic, like the following example:

Or, more detailed, as in this example:

For a more detailed description of the Bubble Chart component, see this article.

Gauge

The Gauge component displays a value that’s relative to a predetermined target and is ideal for monitoring KPIs with set goals or benchmarks. They are best for tracking a single metric with a clear objective, for example, sales or revenue performance.

The following examples of the Gauge component use indicators to demonstrate progress toward a goal:

For a more detailed description of the Gauge component, see this article.

Map

The Map component enables you to display values for regions on a map. This component provides insight into regional and global data and performance. Its interactivity means you can hover over a region to see its associated value. Using map markers, you can specify locations by latitude and longitude. You can also create custom maps.

The following example is a Map component using map markers to show population density:

For a more detailed description of the Map component, see this article.

Image

The Image component displays an image that you specify by URL. This component works well for monitoring webcam outputs and is also a great way to add individual character, visual detail, and some flare to a Klip. You can use the Layout Grid to arrange multiple Image components in a single Klip, as shown in the following example:

For a more detailed description of the Image component, see this article.

Inline Frame

The Inline Frame component enables you to display content within an IFrame and is ideal for showing web content, such as widgets, flash, web pages, or videos.

Following is an example of using the Inline Frame component to display content from the Weather Channel:

For a more detailed description of the Inline Frame component, see this article.

User Input Control

The User Input Control component works with variables (that you create) and enables you to: search for values using a text field, select values to display from a drop-down list, or select a date range using a date picker. You can set its scope to apply to a Klip, a dashboard, or to all dashboards.

In the following example, entering ‘Apples’ in the text field, displays the sales data for apples only (even though the data source includes sales for all fruit types):

This example demonstrates the drop-down list functionality:

For a more detailed description of the User Input Control component, see this article.

Funnel Chart

The Funnel Chart component enables you to track your data as it moves through a process, for example, leads to sales and leads to sales conversions.You can use colour to highlight each stage in the process, include labels to add detail, and show conversions as a percentage from any stage in the process.

The following example uses indicators to demonstrate which stages in the process are falling behind (not meeting a predetermined target):

For a more detailed description of the Funnel component, see this article.

Button

The Button component is used to control the action of variables. For example, you can set a variable’s properties to toggle between dates for values when the button is clicked. The Button component can also be used to coordinate multiple User Input Control components, which is particularly useful when dealing with dynamic data sources.

For a more detailed description of the Button component, see this article.

Pictograph

The Pictograph component tells a story about your data using images or symbols, displaying data in a visual way. You can select from a library of images or upload your own.

Here is an example of how a Pictograph can display rating results, based on percentage values:

For a more detailed description of the Pictograph component, see this article.

HTML Template

The HTML Template component enables you to create a custom Klip using any combination of HTML, Javascript, and CSS.

The following Klip was built using the HTML Template component:

For a more detailed description of the HTML Template component, see this article.

News

The News component displays a stream of headlines from an online news source and is ideal for monitoring RSS feeds.

Here is an example of a News component that is connected to Google News Feed:

For a more detailed description of the News component, see this article.

Related articles

Related articles