Vizlib Home Try Vizlib
Welcome
Login

Vizlib Tiles Properties - Data - Dimensions and Measures

The Data section of the property panel helps you to create and manage settings for the data used in Vizlib Tiles


You can use 1 dimension to define your tile object and then use measures to layer properties on the tile. Layering is a method of organizing the tile elements, where you can move individual measures to the front or back of the tile, and also customize settings for each measure, like font size or background color. You can see an example in Figure 1, where changes are made to the Title measure layout. 


Figure 1: Customize Measure Example


TABLE OF CONTENTS


Dimensions


Figure 2 shows a dimension used in Vizlib Tiles. You can customize the Field and Label, and allow null values to be used. The Limitation dropdown controls the number of tiles in the display. 

  • No limitation - every tile object is displayed. 
  • Fixed number - display a fixed number of tiles, choosing either from the top or bottom of the range. 
  • Exact value - display an exact value.
  • Relative value - display a percentage. 


Figure 2: Dimension


Back to Contents


Measures 


Measures in Vizlib Tiles control the tile Elements and up to 50 can be used in a single sheet. Figure 3 shows the main settings for a Title measure, the Expression used to define the title, the Label for the title display, the Number formatting option (choose from Auto, Number, Money, Date, Duration, Custom and Expression), and the Layer Type (Text, Image, Line, Icon, Icon bar, Bullet and Gauge). Because the title is a text value, Text is selected here, although HTML can be also added in the Expression field.


Figure 3: Measures - Title


Note on Calculation Gauge: A gauge has been introduced for some measure settings which use an expression editor (Figure 4) with 2 options - Green or Red.


Figure 4: Calculation Gauge


  • Green - the expression is evaluated once for the entire extension. Please use this setting whenever possible
  • Red - the expression evaluates once per tile. Please use this setting only when necessary as this can negatively impact on performance. 


Back to Contents


Text


Text layer types (Figure 5) display text in the footer, and you can enable an Indicators setting which lets you display icons which rank the element values against a Threshold. There are 3 icons to choose from - Greater ThanLess Than and Equal to. You can choose the Icon symbol and Icon Color by clicking the icon symbol or color palette, or by entering an expression, as well as set the Icon Position and the Space between icon and text. Selecting a Horizontal Alignment (left, centre or right) or Vertical Align (Top, Middle or Bottom) lets you set the element position within the cell. You can set a level of Text Padding around the title label, and choose a Font ColorFont FamilyFont StyleFont Unit Type and Font Size. There is also a setting to choose the Line Truncating Mode.


Figure 5: Text Layer


Back to Contents


Image


Image layers (Figure 6) display an image, and can be customized using Stretch Image settings and the Image Alignment. 


Figure 6: Image Layer


Back to Contents


Line


Line layers (Figure 7) display a line, and have settings controlling the line orientation, select the Line Color, Line Size, Line Style, the Corners Radius, Margin Size, vary the line visibility with Line Opacity, and set the Vertical Align.


Figure 7: Line Layer


Back to Contents


Icon


Icon layers (Figure 8) display an icon, with settings to select the Icon, the Icon Color, the Font Unit Type, and the Font SizeSelecting a Horizontal Alignment (left, centre or right) or Vertical Align (Top, Middle or Bottom) lets you set the element position within the cell.



Figure 8: Icon Layer


Back to Contents


Icon Bar


Icon Bar layers (Figure 9) display an icon bar (a collection of icons) which can be used to display results on a scale (e.g. number of stars out of 5). There are settings to select the Icon, the Number of Icons, the icon bar Mininum Value and Maximum Value, the Progress Direction, the Font Unit Type, Font Size, choosing to Wrap Icons Color, the Font Unit Type, and the Font Size. Selecting a Horizontal Alignment (left, centre or right) or Vertical Align (Top, Middle or Bottom) lets you set the element position within the cell, and you also choose a Progress Color, a Base Color and even Swap Colors if you want.


Figure 9: Icon Bar Layer


Back to Contents


Bullet


Bullet layers (Figure 10) display a bar with bullets (markers) showing progress towards a goal. You can choose to show a Comparative Indicator, setting the Comparative value, Comparative Indicator Width, Comparative Indicator Height, and Comparative Color. Enabling a bullet Value allows you to set the Value Color, Value Bar Width, Min. Value and Max. Value. Bullet Background settings let you set the Background Width and Background Color. Displaying an Axis for the bullet layer lets you set the Axis Font Color, Axis Font Size, Axis Font Family, and Axis Position. Enabling Custom Ranges and clicking Add Range lets you add a range, with settings for a Value, Background Color and Width


Figure 10: Bullet Layer


Back to Contents


Gauge


Gauge layers (Figure 11) display a gauge view for results. You can set the Min and Max values for the Gauge Range, as well as a Start Degree and End Degree, setting the gauge progression as Clockwise, choosing a Num. Format, showing a Currency Format, and a number Position. Settings for Gauge Limits include a Default Color, a limit label, Value and Limit Color. You can enter a Name and show a Label for the Gauge Needle, setting a Reference Type, Size, Color and Opacity. You can also display Gauge Ticks showing Ticks and Numbers, and choose the Tick Font Color, and Tick Font Size.


Figure 11: Gauge Layer


Back to Contents



Background Color


Background Color settings apply to all layer types (Figure 12), you can select one from the color palette or entering an expression. You can also select a level of Background Color Opacity.


Figure 12: Background Color


Back to Contents


Layer Border


Layer Border settings (Figure 13) apply to all layer types. You can set up the border location with the Border Selector, choose a Border Style, and select a Layer Border Color, Layer Border Width, and Layer Corner Radius


Figure 13: Measures - Layer Border


Back to Contents


Enable Tooltip


If you choose to Enable Tooltip (Figure 14), you can enter a Tooltip Text string, and set a Background Color, Font Size, Font Family, Font Style, Font Color and Tooltip Position


Figure 14: Measures - Enable Tooltip


Back to Contents


Position


You can choose between 2 modes to set the layer Position and Size.

  • Dynamic - size and position stay proportionate to the tile size e.g. if the tile width increases, the layer width also increases. 
  • Static - size and position are fixed, and do not change if the tile is re-sized (Figure 15) e.g. an object placed in a particular corner will keep that position. 

Display out of bounds lets you display the layer outside of the tile border. You can also set the Layer opacity using the slider.


Figure 15: Measures - Tooltip Position 


Back to Contents


Visibility / Actions 


You can choose to make the layer Visibility dependent on a condition with Show/Hide Layer, use Open URL to link an individual tile to a distinct URL, and integrate the layer with Vizlib Actions by clicking Add Action (Figure 16). You can read more about Vizlib Actions here.


Figure 16: Measures - Actions / Master Items


Back to Contents

K
Kenneth is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.