Cell Bar Gauge/Color Slider

Using Cell Bar Gauges and Color Sliders

Available in Logi 8 Info
1/23/2007

This document introduces developers to the Cell Bar gauge and the Cell Color Slider elements. As child elements of the DataTableColumn, both provide new methods of depicting data values using color. These elements only appear in the licensed (purchased) version of Logi Info.

Cell Bar Gauge
Cell Color Slider

This document assumes the reader is familiar with DataTables and DataTableColumns and the retrieval of data.

Cell Bar Gauge

The Cell Bar element creates an in-cell, horizontal bar gauge which allows easy visual comparison of relative values in a single column. It looks like this:

The example above shows part of a table with three data columns using the Cell Bar gauge element. The first column, Sequence, is configured to display a plain horizontal bar who's length is based on the column's data value. The second column, Unit Price, is configured similarly but adds a background color for greater visual contrast. And the last column is configured to display both the bar and a label with the actual data value.

Here are the report definition elements for the first part of the above example:

Notice that, in the image above, the Cell Bar element is the child of a DataTableColumn element, which is in turn the child of the DataTable element. Caveat: you cannot use the Cell Bar element in a SubDataTable.

When a DataTableColumn is selected, the Cell Bar child element can be found in the Charts and Gauges folder in the Suggestions panel, as shown here:

Setting Cell Bar Attributes

The attributes associated with the Cell Bar element are shown below:

The Data Column attribute is the name of the data column retrieved in your DataLayer element (the actual column name, not the @Data.ColumnName~ token).
The Alternate Text attribute is the text to be displayed if the bar gauge can't be rendered for some reason.
The Background Color attribute indicates the background color and can be left blank.
The Color attribute sets the color of the bar representing the data. If left blank, the default color is Blue.
Height and Width determine the physical size of the bar - note that it can be smaller than the cell itself; allowing you to put both a Cell Bar and a label in a column.
ID and ToolTip are the usual identifier and "hover text" attributes.

What About the Data?

You don't need to do anything other than identify the Data Column. The Cell Bar element automatically evaluates all of the values for its column and adjusts the graphics segments that make up the bar accordingly, sizing them to provide a meaningful visual range of bar lengths.

Cell Bars Can Be Links

Cell Bar elements, like Labels, can be hyperlinks. The Cell Bar element can be a parent to any of the Action elements; the report definition for this arrangement looks like this:

Here's a final image of a complete table using Cell Bar gauges:

Cell Color Slider

The Cell Color Slider element is similar to the Cell Bar element in that it generates a graphic depiction of the data within its column on the output. A sample looks like this:

The Cell Color Slider element shows a column's numeric values with a colored indicator or background. The color for a particular column varies depending on where its value fits into the overall population of values for that column in the table. Low values are one color, middle values a second, and a third color for high values. The Cell Color Slider element makes it easy to visualize how values in a column relate to each other.

The user can manipulate a slider control at the top of the column to adjust the "center value" color and the color indicator can be a square, a circle or the entire cell background.

Cell Color Slider elements are not appropriate for reports that will be exported, for example, to PDF or Excel formats.

Here are the report definition elements for the first part of the above example:

Notice that, in the image above, the Cell Color Slider element is the child of a DataTableColumn element, which is in turn the child of the DataTable element. Caveat: you cannot use the Cell Color Slider element in a SubDataTable.

When a DataTableColumn is selected, the Cell Color Slider child element can be found in the Charts and Gauges folder in the Suggestions panel, as shown here:

Setting Cell Color Slider Attributes

The attributes associated with the Cell Color Slider element are shown below:

The Data Column attribute is the name of the data column retrieved in your DataLayer element (the actual column name, not the @Data.ColumnName~ token).
The Color Indicator allows you to choose between Square, Circle, or Background indicators.
The Foreground Black and White attribute, when set to True, automatically sets the foreground color of text in each cell depending on the background color. If the background color is dark, the foreground font is set to white; if the background is light, the font becomes black.
The High Value Color attribute sets the "high" end of the color scale; representing the highest data values. If left blank, the default color is Green.
The Middle and Low Value Color attributes set the "middle" and "low end" of the color scale; representing the median and low data values. If left blank, the default Middle color is Yellow; the default Low color, Red .
The Show Slider attribute determines whether a slider appears below the column header caption; when visible, the slider can be moved by users to fine tune the Middle value color.
Height and Width determine the physical size of the bar - note that it can be smaller than the cell itself; allowing you to put both a Cell Color Slider and a label in a column.
ID and ToolTip are the usual identifier and "hover text" attributes.

What About the Data?

You don't need to do anything other than identify the Data Column. The Cell Color Slider element automatically evaluates all of the values for its column and adjusts the colors accordingly.

Cell Color Sliders Can Be Links

Cell Color Sliders elements, like Labels, can be hyperlinks. The Cell Color Slider element can be a parent to any of the Action elements; the report definition for this arrangement looks like this:

Here's a final image of a complete table using Cell Color Slider elements: