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
• Measures 
• Text
• Image
• Line
• Icon
• Icon Bar
• Bullet
• Gauge
• Background Color
• Layer Border
• Enable Tooltip
• Position
• Visibility / Actions 

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 Than, Less 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 Color, Font Family, Font Style, Font 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 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.

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. 

You can set the Layer opacity using the slider, and also select Flip Tile on Click, which you use when you enable Viztips for the extension and select Flip on Object Click as the Viztips Visibility Type.

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