Working with the data elements

The data elements give you the option to visualize data. This includes a counter element that counts up to a given value, a bar element that progresses to a given value, and an animated circle element.

Using the data elements

You can find the three elements at the bottom of the elements tab.

Drag the element into a column on the page. Once dropped, the canvas will show the default settings, which you can easily adjust within the element settings.

The bar and circle element

You can use the bar and circle element to show how much progress you have made and how much left you’ve got to make. You can use multiple bars in a single column and style them separately.

The bar will start animating and counting up once it is visual to the reader and according to the entered max and shown value. To visualize this progress optimally, we provide you with the following options:

Data value

• Add max value to indicate the maximum value that can be hit
• Add the shown value to indicate the current state
• Enter a prefix to indicate what kind of data is displayed (for instance, $). This is optional.
• Enter a suffix to indicate what kind of data is displayed (for instance, %). This is optional.

Styling of the Bar

• Style the color of the max value, the shown value in the settings
• Style the color of the prefix and suffix through the rich text editor
• Adjust the corners to rounded or square
• Adjust the weight

Spacing

• Spacing bottom

Animation

• Default entrance animation and duration, similar to any other element

In the example below, you can see what the bar element looks like in your content editor. 

In the example below, you can see what the circle element looks like in your content editor.

You can set default styling for the circle element in your Brand Kit and brand settings.

• To prevent your data element from auto-playing, go to Data settings > Animation > Data animation duration and set the value to 0.

Counter element

The counter element is similar to the progress bar and circle. It allows you to visualize data in an easy way, and its counting up is based on the configured settings. As the counter is always a number, the styling is done through the rich text editor.

In the example below, you can see what the counter element looks like in your content editor.

Style the data elements

In your Brand Kit and brand settings, you can decide on global styling for the data elements. When you've set these up, you ensure the data elements are automatically on-brand.

Compatible with PDF

With the use of our native data elements, the Foleon Doc is compatible with our “export to PDF” option. The PDF will display all your visualizations with the selected value.

In the example below, you can see what the data elements look like in an exported PDF.