Problem with sorting AxisX

[Frank]

Hello,

if I'm using multiple datasources. The datamember for AxisX is from type DateTime. If there are for example two series with following date values:

series 1:

• March 2011
• April 2011
• June 2011
• July 2011
• September 2011

series 2:

• January 2011
• February 2011
• March 2011
• April 2011
• June 2011
• July 2011
• September 2011

In this case the chart automatically sorts it like in the attached image. That causes a really ugly line (see also attached image) that is not suitible to what I want to have. 

I tried to use a ChartSortDescriptor on each series that was not working:

private void CreateSeriesMappings()
{
    SeriesMappingCollection mappingCollection = new SeriesMappingCollection();
    for (int i = 0; i < Data.Count; i++)
    {
        mappingCollection.Add(CreateNewSeriesMapping(i));
    }
    this.SeriesMappings = mappingCollection;
}

private static SeriesMapping CreateNewSeriesMapping(int collectionIndex)
{
    SeriesMapping series = new SeriesMapping
    {
        CollectionIndex = collectionIndex,
        SeriesDefinition = new LineSeriesDefinition()
    };
    series.ItemMappings.Add(new ItemMapping("Date", DataPointMember.XCategory));
    series.ItemMappings.Add(new ItemMapping("Value", DataPointMember.YValue));
    series.GroupingSettings.ShouldFlattenSeries = true;
    series.GroupingSettings.GroupDescriptors.Add(new ChartYearGroupDescriptor("Date"));
    series.SortDescriptors.Add(new ChartSortDescriptor("Date", ListSortDirection.Ascending));

    return series;
}

If I am using a ChartSortDescriptor on the chart:

<telerik:RadChart x:Name="Chart1" ItemsSource="{Binding Data}">
                <telerik:RadChart.SortDescriptors>
                    <telerik:ChartSortDescriptor Member="Date" SortDirection="Ascending" />
                </telerik:RadChart.SortDescriptors>
                <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView>
                        <telerik:ChartDefaultView.ChartLegend>
                            <telerik:ChartLegend Name="legend3"/>
                        </telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartArea LegendName="legend3">
                                <telerik:ChartArea.AxisX>
                                    <telerik:AxisX x:Name="axisX" DefaultLabelFormat="yyyy MMM" LayoutMode="Between" LabelRotationAngle="45" />
                                </telerik:ChartArea.AxisX>
                                <telerik:ChartArea.AxisY>
                                    <telerik:AxisY ExtendDirection="Smart" />
                                </telerik:ChartArea.AxisY>
                            </telerik:ChartArea>
                        </telerik:ChartDefaultView.ChartArea>
                    </telerik:ChartDefaultView>
                </telerik:RadChart.DefaultView>
            </telerik:RadChart>

This also does not work. 

How do I get this axis sorted? Maybe you could give me a hint. 

Thanks in andvance!

Regards,
Julian

[Peshito]

Hi Frank,

The reason why your chart looks like this is just because you used DataPointMember.XCategory (which is used for strings). Try using XValue property instead. You may find the following topics useful.

http://www.telerik.com/help/silverlight/radchart-features-categorical-charts.html
http://www.telerik.com/help/silverlight/radchart-features-datetime-support.html
http://www.telerik.com/help/silverlight/radchart-features-axes-x-axis.html
http://www.telerik.com/help/silverlight/radchart-features-axes-y-axis.html

All the best,
Peshito
the Telerik team

[Frank]

If I use the XValue instead of XCategory the GroupDescriptor does not work anymore. 

[Frank]

Here some images of what the problem is, if i use XValue instead of XCategory. (Take a look at the xAxis)

[Peshito]

Hi Frank,

Try setting the AxisX.TicksDistance to 200 or even 300. The default value is 50 which in your case is not enough for properly displaying the ticks and their values. You can find more information regarding TickDistance here.

In your XValue screenshot values are properly displayed, however this format omits the date and this is why they are all displayed as 2010 Jan, 2010 Feb and etc. If you use another format like yyyy MMM ddd, you would see that the values are correct.

Alternatively, you can switch back to XCategory property instead of XValue, but you should make the sorting before binding the chart and remove the ChartSortDescriptor. As I mentioned, XCategory is used for strings, so the chart will not sort the values as DateTime values. This is why pre-sorting is required.


Kind regards,
Peshito
the Telerik team