Version

Configuring Comparative Ranges

Purpose

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.

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 Xamarin.Forms application.

In this topic

This topic contains the following sections:

Configuring Comparative Ranges

Comparative ranges configuration summary

The XamBulletGraph control supports multiple comparative ranges through populating its Ranges collection.

BulletGraph Configuring Comparative Ranges 1.png

Each range can be configured individually by specifying its starting and ending value (in the measures of the scale), fill color, and border thickness and color. The size of a comparative range in the across-the-scale is configurable by adjusting its inner and outer margins.

Comparative ranges configuration summary chart

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

Configurable aspects Property Default value

Length, width, and position

Not set

Not set

Not set

Not set

Not set

Not set

Fill color

Defined in the default theme

Border color

Defined in the default theme

Border thickness

1.0
Note
Note:

If you do not explicitly provide values for the Brush and Outline properties for each range, the values are retrieved from the values of XamBulletGraph ’s RangeBrushes and RangeOutlines collections. They can also be used to predefine a set of brushes to be used consecutively for setting each range’s color or outline fill.

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:

Range start

Position on the scale at which the range begins

The desired value (in the measures of the scale)

Range end

Position on the scale at which the range ends

The desired value (in the measures of the scale)

Inner vertex of the starting edge of the range

The position of the inner vertex of the starting edge across the scale relative to the edge of the Reserved area.

(Inner vertex is the point of the starting edge that is the closest to the edge of the Reserved area.)

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

Inner vertex of the ending edge of the range

The position of the inner vertex of the ending edge across the scale relative to the edge of the Reserved area

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

Outer vertex of the starting edge of the range

The position of the outer vertex of the starting edge across the scale relative to the edge of the Reserved area.

(Outer vertex is the point of the starting edge that is the closest to the edge of the Reserved area)

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

Outer vertex of the ending edge of the range

The position of the outer vertex of the ending edge across the scale relative to the edge of the Reserved area

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

Fill color

Fill color of the range

The desired color

Border thickness

Thickness of the range’s border

The desired value in pixels

Border color

Color of the range’s border

The desired color

Example

The screenshot below demonstrates how a comparative range added to the XamBulletGraph looks as a result of the following settings:

Property Value

“Green”

“6”

“89”

“0.5”

“0.5”

“0.8”

“0.8”

“Black”
BulletGraph Configuring Comparative Ranges 2.png

Following is the code that implements this example.

In XAML:

<ig:XamBulletGraph x:Name="bulletGraph">
      <ig:XamBulletGraph.Ranges>
            <ig:LinearGraphRange Brush="Green"
                                       StartValue="6"
                                       EndValue="89"
                                       InnerEndExtent="0.5"
                                       InnerStartExtent="0.5"
                                       OuterEndExtent="0.8"
                                       OuterStartExtent="0.8"
                                       Outline="Black"
                                       />
      </ig:XamBulletGraph.Ranges>
</ig:XamBulletGraph>

In C#:

LinearGraphRange range = new LinearGraphRange();
range.Brush = new SolidColorBrush(Color.Green);
range.StartValue = 6;
range.EndValue = 89;
range.InnerEndExtent = .5;
range.InnerStartExtent = .5;
range.OuterEndExtent = .8;
range.OuterStartExtent = .8;
range.Outline = new SolidColorBrush(Color.Black);

Related Content

Topics

The following topics provide additional information related to this topic.

Topic Purpose

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 the comparative measure marker of the XamBulletGraph control. This includes the marker’s value, width, 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.