Selection and chart

[Kevin Kutlesa]

Hello good people, how's everyone doing?

I'm considering using the TimeBar for an upcoming project, but I've got some questions regarding functionality:

1. Is it possible to make it so that you can only select months? In the examples you can select days, weeks, months, with a minimum selection and a maximum, but is it possible to only allow you to select 1 month at a time? no days, no weeks, and no multiple selection, just the month.
2. I've seen the examples with sparklines and columns, and they're cool, but for this project we have something else in mind. Is it possible to instead have a single horizontal bar going through the entire period, from start to finish (e.g, from jan 2011 to jan 2012), but with each month having a different color, depending on the value of that month? Sort of like making a heatmap bar. That way you'd have the big bar going from start to finish but the january 2011 chunk of that bar would be bright because there's lots of activity there, but the february chunk would be really dark because there's no activity.

Any help is greatly appreciated,
Thank you for your time

[Missing User]

Hello Kevin Kutlesa,

You can try to define only MonthInterval for the RadTimeBar.Intervals collection and set the RadTimeBar.MinSelectionRange to 28 days and RadTimeBar.MaxSelectionRange to 31 days. Thus you will not be able to select less or more than one month. You can also turn on the snapping functionality, which will restrict the moving of the selection thumb, so that it will snap to the items' lines. For example:

<telerik:RadTimeBar x:Name="timeBar"
                    PeriodStart="01/01/2011"
                    PeriodEnd="01/01/2012"
                    VisiblePeriodStart="01/01/2011"
                    VisiblePeriodEnd="06/01/2011"
                    SelectionStart="02/01/2011"
                    SelectionEnd="03/01/2011"
                    MinSelectionRange="28.00:00:00"
                    MaxSelectionRange="31.00:00:00"
                    IsSnapToIntervalEnabled="True">
    <telerik:RadTimeBar.Intervals>
        <telerik:MonthInterval/>
    </telerik:RadTimeBar.Intervals>
        ...
</telerik:RadTimeBar>

The RadTimeBar is a content control and can host other controls. In order to achieve the desired scenario you can put a Horizontal Stacked Bar RadChart as a content of the TimeBar. The chart will have a single horizontal stacked bar. You can review our Stacked Bar Chart demo here and the help topic for the RadChart here.

I hope that the information provided will help you get started.

Regards,
Polina
the Telerik team

[Phil]

Hi Polina,

The month selection restriction did not work for me. Any idea why?

<telerik:RadTimeBar x:Name="TimeBar" Grid.Row="1" IsSnapToIntervalEnabled="True"
    PeriodEnd="{Binding TimelinePeriodEnd, Mode=TwoWay}" PeriodStart="{Binding TimelinePeriodStart, Mode=TwoWay}"
    SelectionEnd="{Binding TimelineSelectionEnd, Mode=TwoWay}" SelectionStart="{Binding TimelineSelectionStart, Mode=TwoWay}"
    VisiblePeriodEnd="{Binding TimelineVisibleSelectionEnd, Mode=TwoWay}" VisiblePeriodStart="{Binding TimelineVisibleSelectionStart, Mode=TwoWay}"
                    Background="{x:Null}" BorderBrush="#FFD8D4D4" Foreground="#FF7066F3" Style="{StaticResource RadTimeBarStyle1}" BorderThickness="2"
                    MinSelectionRange="28.00:00:00" MaxSelectionRange="31.00:00:00">
    <telerik:RadTimeBar.Intervals>
        <telerik:MonthInterval/>
    </telerik:RadTimeBar.Intervals>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged">
            <cmd:EventToCommand Command="{Binding LoadBusinessCommand}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <telerik:RadAreaSparkline ItemsSource="{Binding EngineeringHeadCountHistory}" Margin="0,8"
        XValuePath="MonthStart" YValuePath="HeadCount" EmptyPointBehavior="ShowAsZero" ShowHighPointIndicators="True" Foreground="{x:Null}" NegativeAreaFill="{x:Null}" PositiveAreaStroke="#FF0039BE" NegativePointBrush="#FF0039BE">
        <telerik:RadAreaSparkline.PositiveAreaFill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF0039BE"/>
                <GradientStop Color="White" Offset="1"/>
                <GradientStop Color="#FF6F9FFF" Offset="0.605"/>
            </LinearGradientBrush>
        </telerik:RadAreaSparkline.PositiveAreaFill>
    </telerik:RadAreaSparkline>
</telerik:RadTimeBar>




[Missing User]

Hello Phil,

The issue you've encountered occurs when the MinSelectionRange and MaxSelectionRange are set before the PeriodStart and PeriodEnd properties of the TimeBar (i.e. when PeriodStart and PeriodEnd are updated via binding). We are already aware of this and our developers are working on it. As a temporary workaround you can set the MinSelectionRange and MaxSelectionRange properties through binding or after you change the PeriodStart and PeriodEnd properties. Also, make sure that you set the TimeBar's properties in the required order given below:
    PeriodStart
    PeriodEnd
    VisiblePeriodStart
    VisiblePeriodEnd
    SelectionStart
    SelectionEnd
    MinSelectionRange
    MaxSelectionRange

I hope that this helps.

Best wishes,

Polina

the Telerik team

[Phil]

k