Progression Tiles

This is the N4V FOR WEBI Wiki page for the Progression Tiles widget.

Updated for N4V 2025.2.10

• Display a progress indicator (percentage) in a series of tiles.
  
• Define the headers and feet (optional) of tiles in raw or HTML format.
  
• Hyperlink (or opendocument) possible on each tile.
• Indicate the measurement and the objective (for percentage calculation)
• Possibility to use the functionality of linked elements on this graph.

• Header : Dimension for the header of the tile
• Foot of tile : [optional] Dimension to display in the footer of the tile

• Progress measure : Measure representing the progression
• Objective : Measure representing the objective (used to calculate the percentage of progress). If the progress measure is already a calculated percentage, just fill the objective with the fixed value “=100”

• No specific animation except if HTML functions are used in header/footer (opendoc, hyperlink…)

Use the Web Intelligence native element link function to make this graph interact with other elements of the same report (native Web Intelligence tables / graphs and / or N4V FOR WEBI custom elements). Element binding can be defined on all objects or individually on one of the dimensions of the graph.

You can find instructions for accessing settings for Need4viz graphics: Format Custom Element.

For the Progress tiles, the available parameters are:

Global

• Palette and Style
  • General : You can use the palette tool to define the colors used to build the graph.

Extended parameters

• Global → See the user guide for the “Global” section here

• Menu → See the user guide for the “Menu” section here

• Options
  • Global : This setting allows you to define the number of tiles per line (between 1 and 10).
  • Color : This setting allows you to use or not the gradient in the tile. You can also specify to use a unique color for the tiles (instead of assigning a color from the palette for each tile)
  • Corners : This setting allows you to define a corner radius for the tiles.
  • Margins : This setting allows you to display or not the borders of the tiles.
  • Hover: Parameters allowing to display a halo when hovering over the tile and to change the shape of the cursor (to indicate that the tile is clickable)
  • Scrollbar : This parameter allows to display or not the scrollbar.
  • Background image inside the tile : You can define an optional image to display on each tile. The SVG image can be choose in the dropdown list (same list used for the picturals gauges). The image can also be stored locally on the Need4Viz server (in the N4VCustomElements webapp folder : N4VCustomElements\res\images) or it can be a URL, in this case, define it as URL(“http://your_url/your_image”). Format of image can be SVG, PNG, JPG… Use settings to place and size the image as you want on the tile. You can also set your own SVG path. In case of SVG (custom or in the list), you can change the color of it and apply a gradient.

• Selection → See the user guide for the “Selection” section here

• Controls → See the user guide for the “Selection” section here

• Header
  • Display of header label : This setting allows you to define the position and font of the title in the header of the tile. You can also fix the height and the padding (spaces around text) of the header bloc (title of the tile). The height of line can also be changed here.
  • Display of main measure : This setting allows you to choose which measure to display (original measure value or calculated percentage progression). You can also set the position and font of the measure and choose to fix or not the color of the measure (accordingly to the progress bar color). You can also fix the top & bottom padding (spaces around text) of the main measure bloc (middle zone of the tile).

• Gauge
  • Gauge thickness : This setting allows you to choose the size of the gauge.
  • Colored zones : This setting allows you to define the min and max interval for each zone as well as its color.

• Footer
  • Footer display : Define here the height of the footer bloc. Set the color of the footer (darken color and unique footer color for all tiles). You can also choose the writing style of the measures in the foot (progress mesure and objective).
  • Block 'Measure' : You can set here the display or not of the measure block. If the original value is chosen to be displayed as main measure, the percentage is displayed here, else it is the original measure. You can define a label to display on top of the measure.
  • Block 'Target' : You can set here the display or not of the target block (objective measure). You can define a label to display on top of the measure.
  • Block 'Dimension footer' : This setting allows you to choose the writing style of the footer dimension (optional input assignment) and its position in the footer (left or right). You can also define a label to display on top of the footer dimension.

• Measures
  • Measures display : This setting allows you to choose the unit and precision of the measures. The measurement display format (standard - e.g.: 2,345.67, compact - e.g.: 2.3K or compact long - e.g.: 2.3 thousand) can also be defined.

Export Server → See the user guide for the “Export Server” section here

Export FTP → See the user guide for the “Export FTP” section here

Export SharePoint → See the user guide for the “Export SharePoint” section here

KB articles to get more information :

• How to use a custom picture in trend or a progress tile : Here