Show RadColumnSparkline

[Amige]

Hi,

I am trying to show a RadColumnSparkline within a TimeBar, but I haven't been able to achieve this.

I want to show some data per day like in the column visualization example, this is some sample code like the one that I am using:

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            DateTime today = DateTime.Today;
            List<MyCost> data = new List<MyCost>()
            {
                new MyCost() { Cost = 1,  MyDate=today },
                new MyCost() { Cost = 2,  MyDate= today.AddDays(1)},
                new MyCost() { Cost = 3, MyDate=today.AddDays(2) },
                new MyCost() { Cost = 4, MyDate=today.AddDays(3)},
                new MyCost() { Cost = 5, MyDate=today.AddDays(4)},
            };
            this.DataContext = data;
        }
    }

    public class MyCost
    {
        public double Cost { get; set; }
        public DateTime MyDate { get; set; }
    }

<telerik:RadColumnSparkline x:Name="PART_SparkbarControl" HorizontalAlignment="Left" VerticalAlignment="Top" Height="48" Width="400"
        telerik:StyleManager.Theme="Office_Blue"
        ItemsSource="{Binding}"
        XValuePath="MyDate"
        YValuePath="Cost" />

Lets say that the first date is 03/17/2016, so I want to show data from 03/17 to 03/21 with the values 1 to 5, I'd expect to see something like the first image but instead I get the bars like in the second image.

The data is not being shown in the desired date.

I am not sure if I am missing some configuration or what I am soing wrong.

 

[Martin Ivanov]

Hello Amige,

This behavior appears because the sparkline control in the code snippet has set Width. In order for the control to be positioned properly in the timebar you will need to leave its width to Auto (or NaN) so that it is measured based on the timebar content container size. 

<telerik:RadColumnSparkline x:Name="PART_SparkbarControl" HorizontalAlignment="Left" VerticalAlignment="Top" Height="48" Width="400"
        telerik:StyleManager.Theme="Office_Blue"
        ItemsSource="{Binding}"
        XValuePath="MyDate"
        YValuePath="Cost" />

Also, you can take a look at the Column Visualization example of the RadTimeBar control which demonstrates integration with RadColumnSparkline.

Regards,
Martin
Telerik

[Amige]

Hi Martin,

I copied exactly the code like the Column Visualization example and the bars look ok, one bar per day, but if I change the range of dates that I want to show, the bars are not shown in the desired dates.

This is where I changed the range of dates, I only want to show 19 days:

<example:ExampleViewModel StartDate="1-Jan-2011" EndDate="20-Jan-2011" />

And the rest of the code:

<telerik:RadTimeBar VerticalAlignment="Top" Margin="6"
                            IsSnapToIntervalEnabled="True"
                            EnableSparklineVirtualization="False"
                            PeriodStart="1-Jan-2010" PeriodEnd="1-Jan-2012"
                            VisiblePeriodStart="11-Nov-2010" VisiblePeriodEnd="15-Mar-2011"
                            SelectionStart="03-Jan-2011" SelectionEnd="17-Jan-2011">
            <telerik:RadTimeBar.Intervals>
                <telerik:YearInterval />
                <telerik:MonthInterval />
                <telerik:WeekInterval />
                <telerik:DayInterval />
            </telerik:RadTimeBar.Intervals>

            <telerik:RadColumnSparkline ItemFill="#FFD6D4D4" ItemsSource="{Binding ColumnData}" XValuePath="Date" YValuePath="Value" ColumnWidthPercent=".8" />
        </telerik:RadTimeBar>

Is it possible to show bars for only a few days?

The first attached image shows the bars for the full dates range and the second shows the 19 days range.

Regards,

Alberto

 

 

[Martin Ivanov]

Hello Amige,

In order to sync the timebar with a sparkline you will also need to sync their minimum and maximum values. So, the MinXValue of the timebar should be equal to the PeriodStart of the timebar and the same applies for the MaxXValue and PeriodEnd properties. However, since the controls display their range differently you cannot precisely sync the size of the sparkline bars with the size of the timebar periods. This is why even if the X ranges of the control matches the bars won't have the same width as the timebar periods.

Currently, the column sparkline is calculating the size of its items based on their count. So, you can try to fill the ColumnData collection with dummy data for all days between the PeriodStart and PeriodEnd of the timebar. 

You can also consider to use line or point sparkline. Also, you can try to use RadCartesianChart with a BarSeries instead of RadColumnSparkline. You can find this approach in the attached project.


Regards,
Martin
Telerik

[Amige]

Hi Martin,

I think I am going to use the RadCartesianChart approach, I already tried it using the code in the example project and it works as I expected.

Thanks,

Alberto