Formatting a gadget
Like the standard chart builders the gadget builder provides a separate page for formatting tasks. Figure 18‑18 shows an example of the Format Gadget page displaying the general properties for a linear gauge.
Figure 18‑18 A linear gauge and its general formatting properties
Format Gadget lists formatting properties of each visual part of a gadget. As Figure 18‑18 shows, for a linear gauge, you can format its scale, needle, numbers, regions, ticks, thresholds, and so on. Each gadget has a different set of formatting properties, which change specific aspects of the gadget’s appearance.
General properties
The general properties of a gadget control overall appearance, such as color scheme, background and border style, and whether animation is enabled. General properties can also define the radius of a cylinder, the needle position of a linear gauge, or the start and end angles of a meter gauge. For example, Figure 18‑19 shows how changing the Radius, Height, and Viewing Angle properties affects the view of a cylinder gadget. Radius and Height values are expressed as percentages of the gadget area.
Figure 18‑19 Examining results of setting properties for a cylinder
Figure 18‑20 shows examples of setting the Start Angle and End Angle properties to change the shape and orientation of a meter. The examples also show how to use the Outer Radius and Inner Radius properties to set the thickness of the arc in the gauge.
Figure 18‑20 Examining results of setting properties for a meter gadget
Table 18‑4 shows all the general properties and lists the gadgets to which they apply. Some properties appear for only one type of gadget. Other properties are common to multiple types of gadgets.
Table 18‑4 General properties
Property
Gadget
Usage
Background Color
All
Sets the background color of the gadget.
Base Color
All
Sets the color scheme of the gauge. You can use either a base color or a preset color scheme. All other selections derive from this selection.
Center X Coordinate
Meter
Specifies the x coordinate of the gauge center.
Center Y Coordinate
Meter
Specifies the y coordinate of the gauge center.
Color
All
Specifies the color of the border around the gadget.
Connect Missing Data
Sparkline
Connects a line between missing points of data.
End Angle
Meter
Specifies the angle where the gauge ends drawing.
Fill color
Cylinder, thermometer
Specifies the internal color of a gadget, such as a cylinder or thermometer.
Height
Cylinder, thermometer
Specifies the percentage of the gadget area that the gadget image height occupies.
Inner Radius
Meter
Specifies the radius of the inner portion of the gauge.
Outer Radius
Meter
Specifies the radius of the outer portion of the gauge.
Preset Scheme
All
Selects a preset color scheme for the gauge. You can use either a base color or a preset color scheme. All other selections derive from this selection.
Radius
(or Bulb Radius)
Cylinder, thermometer
Species the percentage of the gadget area that the gadget image radius occupies.
Show Border
All
Enables or disables the border around the gadget.
Show Dial Values
Meter
Enables or disables the value display on the dial. Set dial position above or below the dial.
Show Needle On
Linear gauge
Set to top to have needles appear on top of the gadget, set to bottom to have them appear on the bottom.
Show Needle Value
Linear gauge
Enables or disables the display of the value at the needle. If enabled, set to Above Needle to display the value above the needle, or set to Below Needle to display the value below the needle.
Show Value
Cylinder, thermometer
Enables or disables the display of the value the gadget is illustrating.
Start Angle
Meter
Specifies the angle where the gauge begins drawing.
Start X Coordinate
Cylinder
Chooses a starting x coordinate percentage that positions the image in the gadget. Selecting 0 starts the image at the left side of the gadget.
Start Y Coordinate
Cylinder
Chooses a starting y coordinate percentage that positions the image in the gadget. Selecting 0 places the starting y coordinate at the top of the gadget, selecting 100 places it at the bottom.
Style
All
Supports adding a style to the gadget.
Sub-Title
All
Adds a subtitle to the gadget.
Title
All
Adds a title to the gadget.
Turn Off All Animation
All
Enables or disables all animation effects.
Turn Off Default Animation
All
Enables or disables default animation.
Viewing angle
Cylinder
Specifies the angle at which the gadget is viewed. Valid values are 0 through 50. 0 appears flat, 50 is tilted toward the viewer.
Width
All
Specifies the thickness of the border around the gadget.
Scale properties
Scale properties define the range of values and the number of tick marks that a gadget displays. The scale properties affect the numbers displayed on the gadget, not its size. Minimum Value and Maximum Value specify the lowest and highest numbers, respectively. If the data set value (represented by the needle value) is lower than the minimum value or higher than the maximum value, the minimum or maximum value is ignored.
Figure 18‑21 shows scale properties set for a linear gauge.
Figure 18‑21 A linear gauge and its scale formatting properties
Table 18‑5 shows all the scale properties and lists the gadgets to which they apply.
Table 18‑5 Scale properties
Property
Gadget
Usage
Auto Adjust Tickmarks
All but sparkline
Enables or disables tick marks created evenly across the scale
Major Tickmarks Count
All but sparkline
Specifies the number of major tick marks to display on the scale
Maximum Value
All
Sets the highest value of the scale
Minimum Value
All
Sets the lowest value of the scale
Minor Tickmarks Count
All but sparkline
Specifies the number of minor tick marks to display between major tick marks
Needle properties
Needle properties define the shape, size, and color of a needle. A needle points to a data value and appears only in a linear gauge and in a meter gauge. Figure 18‑22 shows the needle properties set for a meter gauge.
Figure 18‑22 Selecting options for the needle of a meter gauge gadget
For a meter gauge, the needles properties apply only to the pointer part of the needle. To format the base, or pivot, of the needle (represented by the circle), choose Needle Base/Pivot.
Table 18‑6 shows all the needle properties and lists the gadgets to which they apply.
Table 18‑6 Needle properties
Property
Gadget
Usage
Base Width
Meter
Sets the size of the bottom part of the needle, as a percent of the size of the gadget.
Border Color
Linear gauge, meter
Sets the border color of the needle.
Border Width
Linear gauge, meter
Sets the thickness of the needle border.
Fill Background Color
Meter
Sets the background color of needle.
Fill Color
Linear gauge
Sets the interior color of the needle.
Rear Extension
Meter
Sets the size of the portion of the needle behind the pivot as a percent of the size of the gadget.
Shape
Linear gauge
Sets the shape of the needle.
Show Value
Meter
Enables or disables the display of the value to which the needle points.
Size
Linear gauge, meter
Sets the size in pixels, or in percent of gadget width, of the needle.
Tooltip
Linear gauge, meter
Specifies text for the tooltip.
Top Width
Meter
Sets the size of the tip of the needle as a percent of the size of the gadget.
Value
Linear gauge, meter
Sets which needle to format. Several needles can co-exist, based on the data used to create the gadget.
Value Textbox X Co-ordinate
Meter
Sets the x coordinate of the value text, as a percent of gadget width.
Value Textbox Y Co-ordinate
Meter
Sets the y coordinate of the value text, as a percent of gadget height.
Needle base or pivot properties
Needle base or pivot properties define the appearance of a needle base, or pivot. Drawn as a circle, the base is the point around which the needle rotates. A needle base appears only for a meter gauge. Figure 18‑23 shows the needle base properties set for a meter gauge. The size of the needle base is larger than the default size, and the fill color is set to a radial gradient.
Figure 18‑23 Selecting options for the needle base of a meter gauge
Table 18‑7 shows all the needle base or pivot properties. These properties are used only in a meter gauge.
Table 18‑7 Needle base/pivot properties
Property
Usage
Border Color
Sets the border color of the needle base.
Border Thickness
Sets the width of the needle base border.
End Color
Sets the ending color to use in a fill gradient.
Fill Color
Sets the interior color of the needle base to a solid color.
Fill Gradient
Sets the interior color of the needle base to a color gradient.
Pattern
Specifies the pattern of the fill gradient. Choose Radial or Linear.
Rotation
Sets the angle of a linear fill gradient.
Show Border
Displays or hides the border around the needle base.
Size
Sets the size of the needle base as a percent of the meter radius.
Start Color
Sets the starting color to use in a fill gradient.
Number formatting properties
Number formatting properties define how numbers are displayed in a gadget. Use these properties to abbreviate numbers, to add text before or after a number, or to specify the number of digits to display after a decimal point. Figure 18‑24 shows the number formatting properties set for a bullet gauge. Numbers display with the dollar symbol ($) before the number and they appear in abbreviated format, such as $30K instead of $30,000.
Figure 18‑24 Examining a bullet gadget and its number formatting properties
Table 18‑8 shows all the number formatting properties. These properties are used in all the gadgets.
Table 18‑8 Number formatting properties
Property
Usage
Auto Abbreviation
Abbreviates a number to an appropriate number factor. For example, 10,000 becomes 10K.
Force Trailing Zeros
Enables or disables the display of trailing zeros after the decimal point.
Format Numbers
Enables and disables number formatting.
Fraction Digits
Specifies the number of digits displayed after the decimal point.
Prefix
Specifies a text value to display before a number.
Suffix
Specifies a text value to display after a number.
Region properties
Region properties enable the division of the data plot into regions. Use regions to provide more information about values in a gadget. Compare the linear gauges in the following figures. The gauge in Figure 18‑25 does not show regions. The gauge in Figure 18‑26 displays three regions, labeled Fair, Good, and Excellent.
Figure 18‑25 Linear gauge without regions
Figure 18‑26 Linear gauge with three regions
Figure 18‑27 shows the properties set for the region labeled Fair in Figure 18‑26.
Figure 18‑27 Properties specified for a region labeled Fair
Table 18‑9 shows all region properties and lists the gadgets to which they apply.
Table 18‑9 Region properties
Property
Gadget
Usage
Color
Linear gauge, meter, bullet
Specifies the color of the region.
End Value
Linear gauge, meter, bullet
Specifies where the region ends.
Label
Linear gauge, meter, bullet
Specifies the name of the region.
Region
Linear gauge, meter, bullet
Chooses the region for which the settings apply. You can also add or remove a region from the list.
Show Labels
Linear gauge
Display or hide the region labels.
Start Value
Linear gauge, meter, bullet
Specifies where the region starts.
Tick properties
Tick properties define the size, color, and position of tick marks on a gadget. Figure 18‑28 shows the tick properties set for a linear gauge. Tick marks appear at the top and inside the gauge. The first and last tick values display Min and Max instead of numbers.
Figure 18‑28 Format Gadget displaying a linear gauge and its tick properties
Table 18‑10 shows all the tick properties and lists the gadgets to which they apply.
Table 18‑10 Tick properties
Property
Gadget
Usage
Major Tick Marks Color
Linear gauge, meter, bullet, cylinder, thermometer
Sets the color of major tick marks.
Major Tick Marks Height
Linear gauge, meter, bullet, cylinder, thermometer
Sets the height of major tick marks.
Major Tick Marks Width
Linear gauge, meter, bullet, cylinder, thermometer
Sets the width of major tick marks.
Maximum Label
Linear gauge, meter, bullet, cylinder, thermometer
Sets the highest tick mark value. Text replaces the numeric value.
Minimum Label
Linear gauge, meter, bullet, cylinder, thermometer
Sets the lowest tick mark value. Text replaces the numeric value.
Minor Tick Marks Color
Linear gauge, meter, bullet, cylinder, thermometer
Sets the color of minor tick marks.
Minor Tick Marks Height
Linear gauge, meter, bullet, cylinder, thermometer
Sets the height of minor tick marks.
Minor Tick Marks Width
Linear gauge, meter, bullet, cylinder, thermometer
Sets the width of minor tick marks.
Position Above
Linear gauge, bullet
Sets tick marks to appear above the gadget.
Position Below
Linear gauge, bullet
Sets tick marks to appear below the gadget.
Position Left
Cylinder, thermometer
Positions tick marks on the left side of the gadget.
Position Right
Cylinder, thermometer
Positions tick marks on the right side of the gadget.
Show Limits Value
Linear gauge, meter, bullet, cylinder, thermometer
Enables or disables the display of the first and last values.
Show Tick Marks
Linear gauge, meter, bullet, cylinder, thermometer
Enables or disables the display of tick marks on the gadget.
Show Tick Values
Linear gauge, meter, bullet, cylinder, thermometer
Enables or disables the display of values on tick marks.
Ticks Inside
Linear gauge, meter
Sets tick marks to appear inside or outside of the gadget.
Values Inside
Linear gauge, meter
Sets tick mark values to appear inside or outside of the gadget.
Threshold properties
Threshold properties define thresholds, which you use to identify meaningful values. For example, in a linear gauge that displays a sales total, you can add a threshold that identifies the target sales amount, as shown in Figure 18‑29. By displaying this threshold value, the gauge shows whether the actual sales total is over or under the sales target.
Figure 18‑29 also shows the threshold properties set to create the threshold. You can specify a label, create a threshold line or a threshold zone, specify a threshold value or range of values, and format the line and marker. You can create multiple thresholds for a gadget.
Figure 18‑29 Examining a linear gauge and its threshold properties
Table 18‑11 shows all the threshold properties and lists the gadgets to which they apply.
Table 18‑11 Threshold properties
Property
Gadget
Usage
Arc Inner Radius
Meter
Specifies the inner radius of arc for the threshold area
Arc Outer Radius
Meter
Specifies the outer radius of arc for the threshold area
Border Color
Linear gauge, meter
Sets the border color of the threshold marker
Color
Linear gauge, meter, sparkline, bullet
Sets the color of the threshold area on the gadget
End Value
Linear gauge, meter, sparkline
Sets the end value of the threshold zone
Label
Linear gauge, meter
Specifies the text to apply to the threshold
Length
Bullet
Specifies the length of the threshold as a percent of gadget size
Line Style
Linear gauge, meter, sparkline
Sets the line style of the threshold
Marker Color
Linear gauge, meter
Sets the color of the threshold marker
Radius
Linear gauge
Sets the size of the threshold marker
Show as Zone
Sparkline
Enables or disables display of the threshold as a zone
Show Border
Meter
Enables or disables display of a border around the threshold
Show Marker
Linear gauge, meter
Enables or disables display of the marker on the threshold
Show Threshold
Sparkline, bullet
Enables or disables display of the threshold
Show Label
Meter
Enables or disables display of the threshold value
Show Label Inside
Meter
Displays value inside or outside of the arc on the gadget
Show Label on Top
Linear gauge
Enables or disables display of the threshold value
Size
Meter
Sets the size of the threshold marker
Start Value
Linear gauge, meter, sparkline
Sets start value of the threshold zone
Threshold
Linear gauge, meter
Sets which threshold the settings affect
Threshold Line/Threshold Zone
Linear gauge, meter
Sets whether the threshold is a single line or a zone
Tooltip
Linear gauge, meter
Sets tooltip text for the marker on the threshold
Width
Sparkline, bullet
Sets the width of the threshold
Anchor properties
Anchor properties control the shape, size, color, and visibility of markers, or anchors, in a sparkline gadget. Unlike other gadgets that display only one or two data values, a sparkline gadget plots multiple values and, by default, uses anchors to highlight the first, last, lowest, and highest values. Figure 18‑30 shows the anchor properties set for a sparkline gadget.
Figure 18‑30 Examining a sparkline gadget and its anchor properties
Table 18‑12 shows all the anchor properties. These properties are used only in a sparkline gadget.
Table 18‑12 Anchor properties
Setting
Usage
Shape
Sets the shape of the anchors.
Size
Sets the size of the anchor in pixels.
Visibilities
Sets the visibility and color of the anchors. Open, Close, High, and Low anchors are visible by default. To display anchors for all the other values, select Other Anchors.
Plot properties
Plot properties control the appearance of elements in the data plot area of bullet and sparkline gadgets. For a bullet gadget, you can add a border around the gadget or a shadow below it. You can also specify whether to display the value label and whether to display the value indicator as a line or as a dot.
For a sparkline gadget, you can specify whether to display the first, last, lowest, or highest values, change the color and width of the data line, and add bars in the background to represent period blocks. For example, if a sparkline displays daily stock quotes over a year, you can show period blocks that have a length of 3 to divide the stock values into quarters. The value of 3 assumes that each quarter has three months.
For example, Figure 18‑31 shows the preview of a sparkline gadget. The gadget displays period bars where each period contains three values. Alternate bars appear in color.
Figure 18‑31 Format Gadget displaying a sparkline gadget
Figure 18‑32 shows the plot properties specified for the plot that appears in the sparkline gadget example shown in Figure 18‑31.
Figure 18‑32 Examining the plot properties for a sparkline gadget
Table 18‑13 shows all the plot properties.
Table 18‑13 Plot properties
Property
Gadget
Usage
Border
Bullet
Enables or disables the border around the gadget.
Border Color
Bullet
Sets the color of the border around the gadget.
Border Width
Bullet
Sets the thickness of the border around the gadget.
Line Color
Sparkline
Sets the color of the plot line.
Line Width
Sparkline
Sets the thickness of the plot line.
Period Bars Color
Sparkline
Sets the color of the period bars. The color is applied to alternate bars.
Period Bars Length
Sparkline
Sets the number of values that each period bar highlights.
Show as Dot
Bullet
Enables or disables the display of the value indicator as a dot instead of a solid line.
Show Close Value
Sparkline
Enables and disables the display of the close value.
Show High and Low Values
Sparkline
Enables and disables the display of the high and low values.
Show Open Value
Sparkline
Enables and disables the display of the open value.
Show Period Bars
Sparkline
Enables and disables the display of period bars.
Show Shadow
Bullet
Enables or disables the appearance of a shadow below the gadget.
Show Value Label
Bullet
Enables or disables the display of the value on the gadget.
Value indicator properties
Value indicator properties control the size, color, and border of the value indicator in a bullet gadget, as shown in Figure 18‑33.
Figure 18‑33 Examining a bullet gadget and its value indicator properties
Table 18‑14 shows the value indicator properties. These properties are used only in a bullet gadget.
Table 18‑14 Value indicator properties
Property
Gadget
Usage
Border Color
Bullet
Sets the color of the border
Border Width
Bullet
Sets the thickness of the border
Color
Bullet
Sets the color of the value indicator
Show Border
Bullet
Enables or disables a border around the value indicator
Width
Bullet
Sets the value indicator width as a percent of the plot thickness
Tooltip properties
Tooltip properties control the visibility and appearance of tooltips in a gadget. A tooltip displays a data value when the mouse pointer is placed over a value marker. Figure 18‑34 shows a meter gadget that displays a tooltip and the properties set for the tooltip.
Figure 18‑34 Format Gadget displaying a meter gadget and its tooltip properties
Table 18‑15 shows the tooltip properties. These properties are available to all the gadgets.
Table 18‑15 Tooltip properties
Property
Usage
Show Tooltip
Enables and disables the display of a tooltip
Background
Sets the background color for the tooltip
Border
Sets the border color for the tooltip
Font properties
Font properties define the type, size, and color of the font used for any text in a gadget. Table 18‑16 shows the font properties. These properties are available to all the gadgets.
Table 18‑16 Font properties 
Property
Usage
Font
Specifies the name of the font
Size
Specifies the font size in points
Color
Specifies the color of the text
Padding and margin properties
Padding and margin properties support the addition of space on all sides of a gadget, between a title and the plot, and between a data value and the plot. Compare the sparkline gadgets in Figure 18‑35 and Figure 18‑36. The gadget in Figure 18‑35 uses default values for all the padding and margin properties.
Figure 18‑35 Format Gadget displaying a sparkline gadget and its default padding and margin property settings
The gadget in Figure 18‑36 uses the margin and padding properties to add extra space between the elements in the gadget.
Figure 18‑36 Format Gadget displaying a sparkline gadget that uses padding and margin properties to add extra space between elements
Table 18‑17 shows the padding and margin properties.
Table 18‑17 Padding and margin properties
Property
Gadget
Usage
Padding Title
All
Adds space, in pixels, between the title and the element next to it
Padding Value
All
Adds space, in pixels, between the data value and the element next to it
Margins Left, Right, Top, Bottom
All
Adds space, in pixels, around the entire gadget on the left, right, top, and bottom sides
AddOn properties
AddOn properties support the creation of custom objects, called AddOns, to add to a gadget. You can add rectangles, polygons, circles, arcs, lines, text, and images to any gadget to enhance its appearance. You can create any number of objects and arrange objects on top of or behind one another.
Figure 18‑37 shows an example of adding two rectangles with rounded corners behind a meter gauge. To create this image, create one rectangle with a white border, then create another rectangle that is slightly larger. Use the same fill color for both rectangles. Place the larger rectangle behind the smaller rectangle.
Figure 18‑37 AddOn objects used to enhance a meter gadget
Figure 18‑38 shows the AddOns page. AddOns lists the two rectangles added to the meter gauge. The objects are listed in z order, which is the order from front to back.
Figure 18‑38 Format Gadget displaying a meter gauge and its AddOn properties
Figure 18‑39 shows the properties set for the larger rectangle. Notice that the size of the rectangle is not fixed. Rather, the size is a percentage of the gadget’s size. You define an AddOn’s size by specifying values for these four properties: Start X coordinate, Start Y coordinate, End X coordinate, and End Y coordinate. By using a relative size, AddOns adjust to the size of the gadget area.
Figure 18‑39 Properties of an AddOn object
Table 18‑18 shows the properties for creating the different types of objects that you can add to a gadget.
Table 18‑18 AddOn properties
Property
Object Type
Usage
Center X coordinate
Polygon, Circle, Arc
Specifies the location, as a percentage of the size of the gadget, of the x coordinate of the object.
Center Y coordinate
Polygon, Circle, Arc
Specifies the location, as a percentage of the size of the gadget, of the y coordinate of the object.
Color
Line, Text
Specifies the color of the line.
Dash Gap
Line
Specifies the length of gaps between dashes, in pixels.
Dash Length
Line
Specifies the length of dashes, in pixels.
End Angle
Circle, Arc
Specifies the end angle of the object.
End Color
Rectangle, Polygon, Circle, Arc
Specifies the end color of the gradient fill.
End X coordinate
Rectangle, Line
Specifies the location, as a percentage of the size of the gadget, of the end x value of the object.
End Y coordinate
Rectangle, Line
Specifies the location, as a percentage of the size of the gadget, of the end y value of the object.
Fill Color
Rectangle, Polygon, Circle, Arc
Select to use a solid fill color for the object. Select a color from the associated drop-down list box.
Font
Text
Specifies the font for the object. You can also select Bold, Italic, or Underline.
Font Size
Text
Specifies the font size in points.
Horizontal
Text
Supports the selection of horizontal text alignment in the gadget.
Inner Radius
Arc
Specifies the radius of the inner portion of the object, as a percent of the size of the gadget.
Gradient
Rectangle, Polygon, Circle, Arc
Select to have a gradient type of fill. Choose a Radial or Linear pattern.
Label
Text
Specifies the text that appears on the object.
Name
All
Specifies the name of the object. This name appears in the list on AddOns options.
Outer Radius
Arc
Specifies the radius of the outer portion of the object, as a percent of the size of the gadget.
Radius
Circle
Specifies the radius, as a percent of the gadget, of the object.
Rotation
Rectangle, Polygon, Circle, Arc
Specifies the rotation angle for the fill in the object.
Rotation Angle
Polygon
Specifies the rotation angle of the object.
Scale Image
Image
Enables or disables image scaling. Adjust the height and width of the image by percent.
Show as Dashed
Line
Enables or disables dashed lines.
Show Border
Rectangle, Polygon, Circle, Arc
Enables or disables the drawing of a border line around the object. Select the color and thickness of the border with the Color and Thickness drop‑down menus.
Show Round Corners
Rectangle
Enables or disables rounded corners. Type the percent of a circle to round the corner.
Sides
Polygon
Specifies the number of sides on the object.
Size
Polygon
Specifies the size, as a percent of the gadget, of the object.
Start Angle
Circle, Arc
Specifies the beginning angle of the object.
Start Color
Rectangle, Polygon, Circle, Arc
Specifies the start color of the gradient fill.
Start X coordinate
Rectangle, Line, Text, Image
Specifies the location, as a percentage of the size of the gadget, of the beginning x value of the object.
Start Y coordinate
Rectangle, Line, Text, Image
Specifies the location, as a percentage of the size of the gadget, of the beginning y value of the object.
TextBox Background Color
Text
Specifies the background color of the text box.
TextBox Border Color
Text
Sets the border color of the text box.
Text Wrap
Text
Disables or enables text wrap. Choose, by percent of the gadget, the maximum height and width for the wrap.
Thickness
Line
Specifies the thickness of the line.
Tooltip
All
Specifies text for the tooltip.
Transparent
Image
Specifies the amount of transparency, in percent, of the image.
URL
Image
Specifies the location of the image for AddOn file types of .gif, .jpg, .png, or .swf.
Vertical
Text
Supports the selection of vertical text alignment in the gadget.