Telerik UI for Windows Phone by Progress

QualitativeRanges

Since the bullet graph scale can have regions that signify quality the API that RadBulletGraph exposes for this consists of a single property called QualitativeRanges. It is a collection that accepts BarIndicatorSegment objects that have length and color. For example a bullet graph with three qualitative regions can be declared like in the example below.

CopyXAML
<telerikDataVisualization:RadBulletGraph>
    <telerikDataVisualization:RadBulletGraph.QualitativeRanges>
        <telerikDataVisualization:BarIndicatorSegment Stroke="{StaticResource PhoneInactiveBrush}" Thickness="23"/>
        <telerikDataVisualization:BarIndicatorSegment Stroke="{StaticResource PhoneSubtleBrush}" Thickness="23"/>
        <telerikDataVisualization:BarIndicatorSegment Stroke="{StaticResource PhoneBorderBrush}" Thickness="23" Length="2"/>
    </telerikDataVisualization:RadBulletGraph.QualitativeRanges>
</telerikDataVisualization:RadBulletGraph>

Qualitative Ranges

StartValue, EndValue and Orientation

RadBulletGraph has StartValue and EndValue properties that describe the quantitative scale. They are named like this because the end value can be less than the start value, that is, values can be displayed in both directions of the one dimensional number line. If the StartValue is greater than the EndValue the values decrease from start to end, otherwise they increase from start to end. For example:

CopyXAML
<telerikDataVisualization:RadBulletGraph StartValue="100" EndValue="0" />

Decreasing Values

CopyXAML
<telerikDataVisualization:RadBulletGraph StartValue="0" EndValue="100" />

Increasing Values

RadBulletGraph also has an Orientation property that determines whether the bullet graph will be displayed horizontally or vertically.

CopyXAML
<telerikDataVisualization:RadBulletGraph Orientation="Vertical"/>

orientation

Ticks and Labels

The ticks and labels on the bullet graph scale can be customized via the TickStep,LabelStep, TickTemplate, LabelTemplate and LabelOffset properties. The tick and label steps determine how many ticks and labels will be arranged between the start and end values. The tick and label templates determine how the ticks and labels will look and finally, the LabelOffset determines how far from the center of the bullet graph the scale labels will be. This may be necessary if a custom tick or label template is used and the ticks and labels must have some breathing room between them.

The Featured Measure

This is the main indicator on the bullet graph. It is the central datum that is being visualized. The featured measure can be manipulated via the FeaturedMeasure, FeaturedMeasureBrush, FeaturedMeasureThickness and FeaturedMeasureAlternativeTemplate properties.

The FeaturedMeasure property is of type double and represents the value of the main indicator. FeaturedMeasureBrush and FeaturedMeasureThickness determine the color and the width of the indicator in its usual form, the bar indicator.

On the other hand, the FeaturedMeasureAlternativeTemplate is used to define the look of the main indicator when the start value of the bullet graph scale is non-zero . When it is non-zero, the main indicator automatically changes its form and this form is determined by the FeaturedMeasureAlternativeTemplate. For example:

CopyXAML
<telerikDataVisualization:RadBulletGraph StartValue="20" FeaturedMeasure="50">
    <telerikDataVisualization:RadBulletGraph.FeaturedMeasureAlternativeTemplate>
        <DataTemplate>
            <Rectangle Width="15" Height="15" Fill="{StaticResource PhoneForegroundBrush}" />
        </DataTemplate>
    </telerikDataVisualization:RadBulletGraph.FeaturedMeasureAlternativeTemplate>
</telerikDataVisualization:RadBulletGraph>

Alternative Template

The featured measure can also start from an arbitrary value and end at an arbitrary value. This can be done with the FeaturedMeasure and FeaturedMeasureStartValue properties.

Below are two examples, the first one showing the featured measure starting at 50 and ending at 90 and the second one showing the featured measure starting at 50 and ending at 10:

CopyXAML
<telerikDataVisualization:RadBulletGraph FeaturedMeasureStartValue="50" FeaturedMeasure="90" FeaturedMeasureBrush="{StaticResource PhoneForegroundBrush}" />

Featured Measure Start Value 1

CopyXAML
<telerikDataVisualization:RadBulletGraph FeaturedMeasureStartValue="50" FeaturedMeasure="10" FeaturedMeasureBrush="{StaticResource PhoneForegroundBrush}" />

Featured Measure Start Value 2

The Comparative Measures

The comparative measures in RadBulletGraph are values with which the main indicator can be compared. By default there is one comparative measure and it cannot be removed, however, more comparative measures may be added. It is generally not recommended to use more than two comparative measures but the control has no built in restriction, so more may be used if absolutely necessary.

The default comparative measure can be manipulated by the ComparativeMeasure property, which represents the measure’s value and by the ComparativeMeasureTemplate property which defines the look of the default comparative measure.

More comparative measures may be added to the AdditionalComparativeMeasures property which is a collection and accepts objects of type BulletGraphComparativeMeasure. This object has two properties, Value and Template which should be self-explanatory. Here is an example of how to add more comparative measures:

CopyXAML
<telerikDataVisualization:RadBulletGraph ComparativeMeasure="75">
    <telerikDataVisualization:RadBulletGraph.QualitativeRanges>
        <telerikDataVisualization:BarIndicatorSegment Stroke="{StaticResource PhoneForegroundBrush}" Thickness="25" />
    </telerikDataVisualization:RadBulletGraph.QualitativeRanges>
    <telerikDataVisualization:RadBulletGraph.AdditionalComparativeMeasures>
        <telerikDataVisualization:BulletGraphComparativeMeasure Value="30" />
        <telerikDataVisualization:BulletGraphComparativeMeasure Value="50" />
        <telerikDataVisualization:BulletGraphComparativeMeasure Value="15" />
    </telerikDataVisualization:RadBulletGraph.AdditionalComparativeMeasures>
</telerikDataVisualization:RadBulletGraph>

Comparative Measures