Month and Week Data

[Ross Wozniak]

Do you have an example of a RadChart that is bound to data that represents amounts for both week and month? In other words, one series would display checks that were received each month, and another would display checks received each week. So the week series will have 4 or 5 data points for each month data point.

From what I've seen the RadChart can be bound to only one data set, so the monthly and weekly data must be combined. When I bind this data to the chart I get data points for each week, but since the monthly data only happens every fourth or fifth week, I end up with data points on the month series with a value of 0 in between each actual month amount.

So my scenario is similar to the one demonstrated in the following help article, except that one of the series is week-based, and the other is month-based.

http://www.telerik.com/help/silverlight/radchart-populating-with-data-data-binding-to-nested-collections.html

The following code is an example of what I've been able to achieve thus far. You'll notice that the week values all bunch up on the same date though because the XCategory is bound to the DateString property. If I try to bind it to the Date property, or change the DateString to something like "MM/dd/yy", things get worse.

Here is the XAML:

<telerik:RadChart x:Name="RadChart1" ItemsSource="{Binding CommissionChecks}">
    <telerik:RadChart.DefaultSeriesDefinition>
        <Charting:LineSeriesDefinition/>
    </telerik:RadChart.DefaultSeriesDefinition>
    <telerik:RadChart.SeriesMappings>
        <Charting:SeriesMapping LegendLabel="Monthly" CollectionIndex="0">
            <Charting:SeriesMapping.ItemMappings>
                <Charting:ItemMapping DataPointMember="XCategory" FieldName="DateString"/>
                <Charting:ItemMapping DataPointMember="YValue" FieldName="Amount"/>
            </Charting:SeriesMapping.ItemMappings>
        </Charting:SeriesMapping>
        <Charting:SeriesMapping LegendLabel="Weekly" CollectionIndex="1">
            <Charting:SeriesMapping.ItemMappings>
                <Charting:ItemMapping DataPointMember="XCategory" FieldName="DateString"/>
                <Charting:ItemMapping DataPointMember="YValue" FieldName="Amount"/>
            </Charting:SeriesMapping.ItemMappings>
        </Charting:SeriesMapping>
    </telerik:RadChart.SeriesMappings>
</telerik:RadChart>

And here is the code-behind:

public partial class MainPage
    {
        public MainPage()
        {
            InitializeComponent();
            DataContext = this;
        }

        public List<List<CommissionCheck>> CommissionChecks
        {
            get
            {
                return new List<List<CommissionCheck>>
                    {
                        CommissionCheck.GetMonthlyCommissionChecks(),
                        CommissionCheck.GetWeeklyCommissionChecks()
                    };
            }
        }

        public class CommissionCheck
        {
            public DateTime Date { get; set; }
            public Decimal Amount { get; set; }
            public string DateString { get { return Date.ToString("MMM yy"); } }

            public static List<CommissionCheck> GetMonthlyCommissionChecks()
            {
                return new List<CommissionCheck>
                {
                    new CommissionCheck {Date = new DateTime(2010, 1, 1), Amount = new decimal(213.14)},
                    new CommissionCheck {Date = new DateTime(2010, 2, 1), Amount = new decimal(442.21)},
                    new CommissionCheck {Date = new DateTime(2010, 3, 1), Amount = new decimal(303.19)},
                    new CommissionCheck {Date = new DateTime(2010, 4, 1), Amount = new decimal(522.09)},
                    new CommissionCheck {Date = new DateTime(2010, 5, 1), Amount = new decimal(402.56)},
                    new CommissionCheck {Date = new DateTime(2010, 6, 1), Amount = new decimal(664.44)},
                    new CommissionCheck {Date = new DateTime(2010, 7, 1), Amount = new decimal(704.99)},
                    new CommissionCheck {Date = new DateTime(2010, 8, 1), Amount = new decimal(505.86)},
                    new CommissionCheck {Date = new DateTime(2010, 9, 1), Amount = new decimal(818.08)},
                };
            }

            public static List<CommissionCheck> GetWeeklyCommissionChecks()
            {
                return new List<CommissionCheck>
                {
                    new CommissionCheck {Date = new DateTime(2010, 1, 1), Amount = new decimal(40.15)},
                    new CommissionCheck {Date = new DateTime(2010, 1, 8), Amount = new decimal(32.19)},
                    new CommissionCheck {Date = new DateTime(2010, 1, 15), Amount = new decimal(55.89)},
                    new CommissionCheck {Date = new DateTime(2010, 1, 22), Amount = new decimal(43.99)},
                    new CommissionCheck {Date = new DateTime(2010, 1, 29), Amount = new decimal(22.78)},
                    new CommissionCheck {Date = new DateTime(2010, 2, 5), Amount = new decimal(44.22)},
                    new CommissionCheck {Date = new DateTime(2010, 2, 12), Amount = new decimal(82.19)},
                    new CommissionCheck {Date = new DateTime(2010, 2, 19), Amount = new decimal(77.04)},
                    new CommissionCheck {Date = new DateTime(2010, 2, 26), Amount = new decimal(38.90)},
                    new CommissionCheck {Date = new DateTime(2010, 3, 5), Amount = new decimal(44.22)},
                    new CommissionCheck {Date = new DateTime(2010, 3, 12), Amount = new decimal(82.19)},
                    new CommissionCheck {Date = new DateTime(2010, 3, 19), Amount = new decimal(77.04)},
                    new CommissionCheck {Date = new DateTime(2010, 3, 26), Amount = new decimal(38.90)},
                    new CommissionCheck {Date = new DateTime(2010, 4, 2), Amount = new decimal(44.22)},
                    new CommissionCheck {Date = new DateTime(2010, 4, 9), Amount = new decimal(82.19)},
                    new CommissionCheck {Date = new DateTime(2010, 4, 16), Amount = new decimal(77.04)},
                    new CommissionCheck {Date = new DateTime(2010, 4, 23), Amount = new decimal(38.90)},
                    new CommissionCheck {Date = new DateTime(2010, 4, 30), Amount = new decimal(44.22)},
                    new CommissionCheck {Date = new DateTime(2010, 5, 7), Amount = new decimal(82.19)},
                    new CommissionCheck {Date = new DateTime(2010, 5, 14), Amount = new decimal(77.04)},
                    new CommissionCheck {Date = new DateTime(2010, 5, 21), Amount = new decimal(38.90)},
                    new CommissionCheck {Date = new DateTime(2010, 5, 28), Amount = new decimal(44.22)},
                    new CommissionCheck {Date = new DateTime(2010, 6, 4), Amount = new decimal(82.19)},
                    new CommissionCheck {Date = new DateTime(2010, 6, 11), Amount = new decimal(77.04)},
                    new CommissionCheck {Date = new DateTime(2010, 6, 18), Amount = new decimal(38.90)},
                    new CommissionCheck {Date = new DateTime(2010, 6, 25), Amount = new decimal(44.22)},
                    new CommissionCheck {Date = new DateTime(2010, 7, 2), Amount = new decimal(82.19)},
                    new CommissionCheck {Date = new DateTime(2010, 7, 9), Amount = new decimal(77.04)},
                    new CommissionCheck {Date = new DateTime(2010, 7, 16), Amount = new decimal(38.90)},
                    new CommissionCheck {Date = new DateTime(2010, 7, 23), Amount = new decimal(44.22)},
                    new CommissionCheck {Date = new DateTime(2010, 7, 30), Amount = new decimal(82.19)},
                    new CommissionCheck {Date = new DateTime(2010, 8, 6), Amount = new decimal(77.04)},
                    new CommissionCheck {Date = new DateTime(2010, 8, 13), Amount = new decimal(38.90)},
                    new CommissionCheck {Date = new DateTime(2010, 8, 20), Amount = new decimal(44.22)},
                    new CommissionCheck {Date = new DateTime(2010, 8, 27), Amount = new decimal(82.19)},
                    new CommissionCheck {Date = new DateTime(2010, 9, 3), Amount = new decimal(77.04)},
                    new CommissionCheck {Date = new DateTime(2010, 9, 10), Amount = new decimal(38.90)},
                };
            }
        }
    }

Thanks,
Ross

[Velin]

Hello Ross Wozniak,

Unfortunately, this scenario is not supported in the current version of the control. To achieve this the chart control needs support for multiple X axes. Our development team will research the ways this can be implemented and most probably will add this functionality to a future version of the control.

Please, accept our apologies for this inconvenience.

Sincerely yours,
Ryan
the Telerik team