Working with the data elements

Data elements give you the option to visually represent data 📊. These include a counter element that counts up to a specified value, a bar element that progresses to a given value, and a circle element in the form of a donut chart

Using data elements

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

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

⚠️ If you're working with the Content Builder, you cannot add data elements. They are only available if included in the block templates.

Screenshot 2023-05-12 at 10.07.21

The progress bar and circle element

The progress bar and circle elements help visualize progress. You can add multiple bars to your block and style them individually.

💡 Set default styles for the bar or circle element in your Brand Kit or Doc brand settings.

The bar and circle elements include an animation effect that counts up to their configured values. To visualize this progress optimally, you can style the following options:

Data value

  • Add max value to indicate the maximum value on your data element. You can add up to 2 decimal places.
  • Add the shown value to represent the current progress. You can add up to 2 decimal places.
  • Toggle on the thousands separator to add punctuation (e.g., 1,000 vs 1000).

⚠️ The browser language setting of the viewer's device determines if a comma or period is used for the thousands separator and decimal.

For example, if your browser is set to the US, it will automatically set a comma for the thousands separator. However, if your viewer's device is set in Europe, they will see a period for the thousands separator.

  • 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.
  • Add an aria-label so when a screen read encounters this data element, the aria label informs the visitor what kind of data it is. This is optional.

Styling of the Bar or Circle

  • Customize the colors for the max and shown value
  • For progress bar elements, adjust the corners to rounded or square
  • For circle elements, adjust the size of the circle
  • Adjust the weight. This changes the thickness of the bar or circle

Background

  • Set the background color

Spacing/Alignment

  • Set how much spacing there should be on the bottom of your bar or circle
  • For circle elements, set the alignment to left, center, or right

Animation

  • Set the entrance animation and duration

💡 If you do not want any animation on your data element, set the data animation duration to 0.

⚠️ If you're working with the Content Builder,  you'll have limited element settings. 

Example of a progress bar data element:
Screenshot 2023-05-12 at 10.08.07

Example of a circle data element:

Screenshot 2023-05-12 at 10.08.47

Counter element

The counter element works similarly to the progress bar and circle, allowing you to visualize numerical data with an animated count-up effect.

General settings

  • Add the value. This is the final number that will be shown. You can add up to 2 decimal places.
  • Toggle on the thousands separator to add punctuation (e.g., 1,000 vs 1000).

⚠️ The browser language setting of the viewer's device determines if a comma or period is used for the thousands separator and decimal.

For example, if your browser is set in the US, it will automatically set a comma for the thousands separator. However, if your viewer is based in Europe, they will see a period for the thousands separator.

  • 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.

Background

  • Set the background color

Spacing

  • Set how much spacing there should be on the bottom of your counter

Animation

  • Set the entrance animation and duration

💡 If you do not want any animation on your data element, set the data animation duration to 0.

⚠️ If you're working with the Content Builder,  you'll have limited element settings. 

Data Counter

Styling data elements

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

Screenshot 2023-05-30 at 10.01.06 (1)

 

Compatible with PDF

Data elements are fully compatible with the Export to PDF feature. Your Foleon Doc will show all data elements with their configured values in the exported PDF.

6397006c4c2ff