Bullet chart possible?

[Erling Hagen]

Hey.

I've been asked to create a bullet chart on a project. We've used Telerik controls so far, and would like to continue using it, but we can't seem to find a suitable gauge control. The Dundas package has one exactly like the one we require, but if possible we'd like to continue using Telerik. So does anyone now if it's possible to create a bullet chart using this package?

[Andrey]

Hello Erling Hagen,

I would recommend you to use linear gauge control to create bullet chart.  For example:

<UserControl x:Class="Telerik.SL3.Gauge.Q2._2009.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
             xmlns:control="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Gauge"
             xmlns:gauges="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Gauge"
             Width="400"
             Height="300">
    <Grid x:Name="LayoutRoot"  Background="White">
        <Grid.Resources>
            <SolidColorBrush x:Key="PoorBrush" Color="Red" />
            <SolidColorBrush x:Key="AverageBrush" Color="Yellow" />
            <SolidColorBrush x:Key="GoodBrush" Color="Green" />
        </Grid.Resources>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <!-- Legend -->
        <Border BorderBrush="Gray"
                BorderThickness="2"
                HorizontalAlignment="Center">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Rectangle Width="16" Height="16" Fill="{StaticResource PoorBrush}" />
                <TextBlock Grid.Column="1" Margin="5,0,5,0" Text="Poor" />

                <Rectangle Grid.Column="2" Width="16" Height="16" Fill="{StaticResource AverageBrush}" />
                <TextBlock Grid.Column="3" Margin="5,0,5,0" Text="Average" />

                <Rectangle Grid.Column="4" Width="16" Height="16" Fill="{StaticResource GoodBrush}" />
                <TextBlock Grid.Column="5" Margin="5,0,5,0" Text="Good" />
            </Grid>
        </Border>

        <!-- Bullet chart -->
        <gauges:LinearScale Grid.Row="1"
                            Min="0"
                            Max="100"
                            Orientation="Horizontal"
                            Left="0.1" Top="0.2">
            <gauges:RangeList>
                <gauges:LinearRange Min="0" Max="30"
                                    Location="OverCenter"
                                    StartWidth="0.1"
                                    EndWidth="0.1"
                                    Background="{StaticResource PoorBrush}" />
                <gauges:LinearRange Min="30" Max="75"
                                    Location="OverCenter"
                                    StartWidth="0.1"
                                    EndWidth="0.1"
                                    Background="{StaticResource AverageBrush}" />
                <gauges:LinearRange Min="75" Max="100"
                                    Location="OverCenter"
                                    StartWidth="0.1"
                                    EndWidth="0.1"
                                    Background="{StaticResource GoodBrush}" />
            </gauges:RangeList>

            <gauges:IndicatorList>
                <gauges:LinearBar x:Name="linearBar"
                                  Background="Aqua"
                                  Value="60" />
            </gauges:IndicatorList>

        </gauges:LinearScale>

    </Grid>
</UserControl>

Regards,
Andrey Murzov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.