Trend Tiles

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

Updated for N4V 2025.2.10

• Display a trend between 2 indicators.
• Possibility to use the functionality of linked elements on this graph.

• Dimension 1 : Dimension to split the tiles
• Foot of tile : [optional] Dimension to display in the footer of the tile

• Measure 1 : Measure for the previous value (calculation of the trend is made by difference between measure 1 and 2)
• Measure 2 : Measure for the next value

• There is no specific animation on this tile

Use the Web Intelligence native element link function to make this widget interact with other elements of the same report (native Web Intelligence tables / charts 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 Trend 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 & darken footer 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 trend sign). You can also fix the top & bottom padding (spaces around text) of the main measure bloc (middle zone of the tile).

• Footer
  • Footer display : This setting allows you to choose the writing style of the foot dimension. Set the color of the footer (darken color and unique footer color for all tiles). You can also set the padding (spaces around text) and the global height of the footer. The height of line can also be changed here.
  • 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.
  • Block 'Previous' : This setting allows you to display or not the measure and the title of the variation. It also gives a title to the variation. You can choose to display the value or the delta.
  • Block 'Change' : This setting allows you to display or not the percentage and the title of the change. It also gives a title and a rounding of the percentage. You can choose to display the percentage or the delta.
  • Block 'Trend' : This setting allows you to display or not the trend and the title of the trend. It also allows you to choose the size, color and title of the icon. You can choose custom colors & shape for the icon (for positive/negative/null trend), notice that depending on the version of your browser (too older), custom colors & shapes icons may not display correctly, in this case, choose the green/red arrow standard color & shape.

• Measure
  • Unit and precision : This setting allows you to specify the unit to add as a measurement prefix or suffix as well as the measurement accuracy. 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.
  • Measure replacement : You can define here up to 5 text replacement for the measure value, depending on a threshold

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