Version

Configuring Comparative Marker

Purpose

This topic explains, with code examples, how to configure the comparative measure marker of the XamBulletGraph™ control. This includes the marker’s value, width, and formatting.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic provides conceptual information about the XamBulletGraph control including its main features, minimum requirements, and user functionality.

This topic explains how to add the XamBulletGraph control to a WPF application.

Configuring the Comparative Marker

Comparative marker configuration summary

The comparative marker indicates a mark on the scale against which the value denoted by the performance bar is compared. This comparative value can be some sort of a target to aim for (like target sales volume) or a limit that not to be exceeded (as the 98.6°F/37°C mark on a medical thermometer scale).

The value indicated by the comparative marker (and its position on the scale, respectively) is set by the TargetValue property. The comparative marker is customizable in terms of position and size across the scale ( TargetValueInnerExtent and TargetValueOuterExtent), breadth ( TargetValueBreadth) and look-and-feel (fill color – TargetValueBrush, border thickness – TargetValueStrokeThickness, border color – TargetValueOutline) using the respective properties.

BulletGraph Configuring the Comparative Marker 1.png

Comparative marker configuration summary chart

The following table explains briefly the configurable aspects of XamBulletGraph control’s comparative marker and maps them to properties that configure them.

Configurable aspects Property Default value

Name

Not set

Value indicated

Not set

Breadth

3.0

Inner edge

0.3

Outer edge

0.85

Fill color

Default color

Border thickness

1.0

Border color

Default color

Tooltip

The value indicated by the comparative marker

Property settings

The following table maps the desired behavior to its respective property settings.

In order to configure: Details Use this property: And set it to:

Name

A name for the comparative marker (for displaying in the tooltip)

A string expressing the name of the comparative marker

Value to indicate

The value to indicate

The desired value of the measures in the scale

Breadth

The breadth of the marker

The desired value in pixels

Inner edge

The position of the lower edge of the comparative marker at horizontal orientation or the left edge at vertical orientation.

The desired value as a relative part of the height/width of the Graph area (depending on the orientation) presented as a fraction of 1 (e.g. 0.2 )

Outer edge

The position of the top edge of the comparative marker at horizontal orientation or the right edge at vertical orientation.

The desired value as a relative part of the height/width of the Graph area (depending on the orientation) presented as a fraction of 1 (e.g. 0.2 )

Fill color

Fill color of the marker

The desired color

Border thickness

Thickness of the marker’s border

The desired value in pixels

Border color

Configure the color of the marker’s border

The desired color

2

Tooltip

Content of the comparative marker’s border

The desired string, UIElement, or DataTemplate (see Configuring the Tooltips topic).

Example

The screenshot below demonstrates how the XamBulletGraph looks as a result of the following settings:

Property Value

“70”

“10”

“Yellow”

“0.2”

“0.7”

"#ff006400"

“3”

BulletGraph Configuring the Comparative Marker 2.png

Following is the code that implements this example.

In XAML:

<ig:XamBulletGraph x:Name="bulletGraph"
                       TargetValue="70"
                       TargetValueBreadth="10"
                       TargetValueBrush="Yellow"
                       TargetValueOutline="#ff006400"
                       TargetValueStrokeThickness="2"
                       TargetValueInnerExtent="0.3"
                       TargetValueOuterExtent="0.8" />

In C#:

bulletGraph.TargetValue = 70;
bulletGraph.TargetValueBreadth = 10;
bulletGraph.TargetValueBrush = new SolidColorBrush(Color.Yellow);
bulletGraph.TargetValueOutline = new SolidColorBrush(Color.FromRgb(0, 64, 0));
bulletGraph.TargetValueStrokeThickness = 2;
bulletGraph.TargetValueInnerExtent = .3;
bulletGraph.TargetValueOuterExtent = .8;

In VB:

bulletGraph.TargetValue = 70
bulletGraph.TargetValueBreadth = 10
bulletGraph.TargetValueBrush = New SolidColorBrush(Color.FromRgb(0, 64, 0))
bulletGraph.TargetValueOutline = New SolidColorBrush(Color.Yellow)
bulletGraph.TargetValueStrokeThickness = 2
bulletGraph.TargetValueInnerExtent = .3
bulletGraph.TargetValueOuterExtent = .8

Related Content

Topics

The following topics provide additional information related to this topic.

Topic Purpose

This topic explains, with code examples, how to configure the title and subtitle of the XamBulletGraph control. This includes the title area width the start position of the text and the title/subtitle text itself.

This topic explains, with examples, how to configure the scale of the XamBulletGraph control. This includes positioning the scale inside the control and configuring the scale tick marks and labels.

This topic explains, with examples, how to configure the performance bar of the XamBulletGraph control. This includes the value indicated by the bar, its width, position, and formatting.

This topic explains, with code examples, how to configure ranges in the XamBulletGraph control. This includes the number of ranges and their positions, lengths, widths, and formatting.

This topic explains, with code examples, how to configure a background for the bullet graph. This includes setting the background’s size, position, color, and border.

This topic explains, with code examples, how to enable the tooltips in the XamBulletGraph control and configure the delay with which they are displayed.