Using a chart as content for the TimeBar

[Tobias Rodewi]

I've been experimenting with your new control and am really eager to see what it can do. We're working on a project where this control would be perfect (subscription has sadly just expired, but we will extend it if the control can do all what we want).

I did get stuck on one problem, using a radchart as content for the timebar. We're on need of displaying multiple series, containing a lot of data, in the timebar so a sparkline is out of the question. Using a chart instead was easy and worked out really well, but the display of it is sadly not accurate.

I'm attaching a screenshot of the problem. As you can see, the chart in the timebar does not show the same as the detailed chart below. The chart vs timeline doesn't seem like it's accurate either (empty data in the beginning and end even though all the period date parameters eg. PeriodStart, PeriodEnd, ... are set to the max and min limits of the available values) so perhaps it's the charts width/height ratio that's gone bad and doesn't stretch like it should?

TimeBar XAML

<telerik:RadTimeBar x:Name="masterChart"
                        Grid.Row="0"
                        IsSnapToIntervalEnabled="False"
                        MinSelectionRange="0.01:00:00"
                        PeriodStart="{Binding PeriodStart, Mode=TwoWay, FallbackValue=1-Jan-2011}"
                        PeriodEnd="{Binding PeriodEnd, Mode=TwoWay, FallbackValue=1-Jan-2012}"
                        VisiblePeriodStart="{Binding VisiblePeriodStart, Mode=TwoWay, FallbackValue=1-Jan-2011}"
                        VisiblePeriodEnd="{Binding VisiblePeriodEnd, Mode=TwoWay, FallbackValue=1-Jan-2012}"
                        SelectionStart="{Binding SelectionStart, Mode=TwoWay, FallbackValue=1-Jan-2011}"
                        SelectionEnd="{Binding SelectionEnd, Mode=TwoWay, FallbackValue=1-Jan-2012}"
                        Commands:RadTimeBarSelectionChanged.Command="{Binding TimeBarSelectionChangedCommand}">
      <telerik:RadTimeBar.Intervals>
        <telerik:YearInterval />
        <telerik:MonthInterval />
        <telerik:WeekInterval />
        <telerik:DayInterval />
        <telerik:HourInterval />
      </telerik:RadTimeBar.Intervals>
      <ChartView:RadChartExtender x:Name="masterChartContent"
                                  ItemsSource="{Binding HistoricalValues, Mode=OneWay}"
                                  SeriesMappings="{Binding MasterSeriesMappings, Mode=OneWay}">
        <telerik:RadChart.SamplingSettings>
          <telerik:SamplingSettings SamplingThreshold="0" />
        </telerik:RadChart.SamplingSettings>
        <ChartView:RadChartExtender.DataSeriesFilters>
          <ChartView:SamplingFirst SeriesMaxNumberOfDataPoints="400" />
        </ChartView:RadChartExtender.DataSeriesFilters>
        <telerik:RadChart.DefaultView>
          <telerik:ChartDefaultView>
            <telerik:ChartDefaultView.ChartLegend >
              <telerik:ChartLegend Visibility="Collapsed" />
            </telerik:ChartDefaultView.ChartLegend>
            <telerik:ChartDefaultView.ChartArea>
              <telerik:ChartArea EnableTransitionAnimations="False"
                                 EnableAnimations="False">
                <telerik:ChartArea.AxisX>
                  <telerik:AxisX Visibility="Collapsed"/>
                </telerik:ChartArea.AxisX>
                <telerik:ChartArea.AxisY>
                  <telerik:AxisY Visibility="Collapsed" />
                </telerik:ChartArea.AxisY>
              </telerik:ChartArea>
            </telerik:ChartDefaultView.ChartArea>
            <telerik:ChartDefaultView.ChartTitle>
              <telerik:ChartTitle Visibility="Collapsed">
              </telerik:ChartTitle>
            </telerik:ChartDefaultView.ChartTitle>
          </telerik:ChartDefaultView>
        </telerik:RadChart.DefaultView>
      </ChartView:RadChartExtender>
    </telerik:RadTimeBar>

Detailed chart XAML

<ChartView:RadChartExtender x:Name="detailsChart"
                                Grid.Row="1"
                                ItemsSource="{Binding HistoricalValues, Mode=OneWay}"
                                SeriesMappings="{Binding DetailsSeriesMappings, Mode=OneWay}"
                                TimeBar="{Binding ElementName=masterChart}">
      <telerik:RadChart.SamplingSettings>
        <telerik:SamplingSettings SamplingThreshold="0" />
      </telerik:RadChart.SamplingSettings>
      <ChartView:RadChartExtender.DataSeriesFilters>
        <ChartView:SamplingFirst SeriesMaxNumberOfDataPoints="400" />
      </ChartView:RadChartExtender.DataSeriesFilters>
      <telerik:RadChart.DefaultView>
        <telerik:ChartDefaultView>
          <telerik:ChartDefaultView.ChartLegend >
            <telerik:ChartLegend Name="legend"
                                 Visibility="Visible" />
          </telerik:ChartDefaultView.ChartLegend>
          <telerik:ChartDefaultView.ChartArea>
            <telerik:ChartArea LegendName="legend"
                               EnableAnimations="False"
                               EnableTransitionAnimations="True"
                               SmartLabelsEnabled="True">
              <telerik:ChartArea.AxisX>
                <telerik:AxisX LabelRotationAngle="-90"
                               LabelStep="{Binding LabelStep, Mode=OneWay}"
                               IsDateTime="True"
                               DefaultLabelFormat="{Binding DefaultLabelFormat, Mode=OneWay}"/>
              </telerik:ChartArea.AxisX>
            </telerik:ChartArea>
          </telerik:ChartDefaultView.ChartArea>
          <telerik:ChartDefaultView.ChartTitle>
            <telerik:ChartTitle FontWeight="Normal">
              <StackPanel Orientation="Vertical">
                <TextBlock Text="Historik för den valda perioden "
                           FontSize="14" />
                <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center">
                  <StackPanel.Resources>
                    <Style TargetType="TextBlock">
                      <Setter Property="FontSize"
                              Value="10" />
                    </Style>
                  </StackPanel.Resources>
                  <TextBlock Text="{Binding ElementName=masterChart, Path=SelectionStart, StringFormat='MMMM dd, yyyy'}" />
                  <TextBlock Text=" - " />
                  <TextBlock Text="{Binding ElementName=masterChart, Path=SelectionEnd, StringFormat='MMMM dd, yyyy'}" />
                </StackPanel>
              </StackPanel>
            </telerik:ChartTitle>
          </telerik:ChartDefaultView.ChartTitle>
        </telerik:ChartDefaultView>
      </telerik:RadChart.DefaultView>
    </ChartView:RadChartExtender>

Construction of the SeriesMapping

if (_masterSeriesMappings == null)
    _masterSeriesMappings = new SeriesMappingCollection();
else
    _masterSeriesMappings.Clear();

foreach (var collection in _historicalValues)
{
    var sm = new SeriesMapping
                 {
                     CollectionIndex = _historicalValues.IndexOf(collection),
                     SeriesDefinition = new StepLineSeriesDefinition
                                            {
                                                ShowItemToolTips = false,
                                                ShowItemLabels = false,
                                                ShowPointMarks = false,
                                                EmptyPointBehavior = EmptyPointBehavior.Drop
                                            }
                 };

    sm.ItemMappings.Add(new ItemMapping
                            {
                                DataPointMember = DataPointMember.YValue,
                                FieldName = "Value"
                            });

    sm.ItemMappings.Add(new ItemMapping
                            {
                                DataPointMember = DataPointMember.XValue,
                                FieldName = "TimeStamp"
                            });
    _masterSeriesMappings.Dispatcher.BeginInvoke(() => _masterSeriesMappings.Add(sm));
}
OnPropertyChanged("MasterSeriesMappings");

Code for the extended RadChart

public class SamplingFirst : IDataSeriesFilter
{
    public int SeriesMaxNumberOfDataPoints { get; set; }
    public void ApplyFilter(DataSeries dataSeries)
    {
        if (SeriesMaxNumberOfDataPoints <= 0)
        {
            return;
        }
        int grouping = dataSeries.Count / SeriesMaxNumberOfDataPoints * 2;
        if (grouping < 2) return;
        var itemsToRemove = new List<DataPoint>();
        for (int i = 0; i < dataSeries.Count; i++)
        {
            if (i % grouping != 0)
            {
                itemsToRemove.Add(dataSeries[i]);
            }
        }
        dataSeries.SuspendNotifications();
        for (int i = 0; i < itemsToRemove.Count; i++)
        {
            dataSeries.Remove(itemsToRemove[i]);
        }
        dataSeries.ResumeNotifications();
    }
}
public class RadChartExtender : RadChart
{
    private DataSeriesFilterCollection _dataSeriesFilters = new DataSeriesFilterCollection();
    public DataSeriesFilterCollection DataSeriesFilters
    {
        get { return _dataSeriesFilters; }
        set { _dataSeriesFilters = value; }
    }

    protected override void OnDataBound(ChartDataBoundEventArgs e)
    {
        base.OnDataBound(e);
        ApplyFilters();
    }

    protected void ApplyFilters()
    {
        var chartAreas = new List<ChartArea>();
        if (UseDefaultLayout)
        {
            chartAreas.Add(DefaultView.ChartArea);
        }
        else
        {
            chartAreas.AddRange(GetChartAreas());
        }
        foreach (var filter in DataSeriesFilters)
        {
            foreach (var chartArea in chartAreas)
            {
                foreach (var serie in chartArea.DataSeries)
                {
                    filter.ApplyFilter(serie);
                }
            }
        }
    }

    protected List<ChartArea> GetChartAreas()
    {
        return Descendents(this).OfType<ChartArea>().ToList();
    }

    public static IEnumerable<DependencyObject> Descendents(DependencyObject root)
    {
        int count = VisualTreeHelper.GetChildrenCount(root);
        for (int i = 0; i < count; i++)
        {
            var child = VisualTreeHelper.GetChild(root, i);
            yield return child;
            foreach (var descendent in Descendents(child))
                yield return descendent;
        }
    }

}

Any idea to why this is happening?

The RadChartExtender being used in the XAML is just a RadChart extended according to this forum post (the x-axis datetime values all got reset due to the large amount of datapoints)

EDIT: uploaded a screenshot with hour-intervals selected instead to easier see the problem..

[Tobias Rodewi]

Here's another screenshot that actually proves that it's the width of the chart that is the problem (I've got the whole period selected in the picture). Doesn't seem to stretch as it should when used as content of the timebar.. Will see if I can sort it out but suggestions are welcome :)

[Vladimir Milev]

Hi Tobias Lolax,

It looks like the range along the XAxis of the chart does not match the PeriodStart/PeriodEnd dates set on the timebar. I would recommend that you manually specify the range to match exactly the period start/end properties.

Regards,
Vladimir Milev
the Telerik team