This is a migrated thread and some comments may be shown as answers.

Stacked Bar Chart Sorting on X-Axis

4 Answers 268 Views
Chart
This is a migrated thread and some comments may be shown as answers.
IT Application Development
Top achievements
Rank 1
IT Application Development asked on 18 Jun 2010, 07:15 AM

My X-Axis labels are not sorting correctly as specified by my sort order field. The bars are supposed to be ordered by Month, then by Year. For some reason July, August, September of 2008 are being kicked out of order. However, then you un-comment the last piece of data, it seems to sort correctly. Also, when sorting in Decending order (with the last data commented)  it displays correctly as well. Any Ideas?

using System.Linq;  
using System.Net;  
using System.Windows;  
using System.Windows.Controls;  
using System.Windows.Documents;  
using System.Windows.Input;  
using System.Windows.Media;  
using System.Windows.Media.Animation;  
using System.Windows.Shapes;  
using Telerik.Windows.Controls.Charting;  
namespace SilverlightApplicationStackedChartTest1  
{  
    public partial class Stacked_Chart : UserControl  
    {  
        public Stacked_Chart()  
        {  
            InitializeComponent();  
            LoadChart();  
        }  
        void Chart_StackedChartSetProperties()  
        {  
            SeriesMapping smStacked = new SeriesMapping();  
            ChartSortDescriptor sort = new ChartSortDescriptor();  
 
            sort.Member = "SortField";  
            sort.SortDirection = System.ComponentModel.ListSortDirection.Ascending;  
              
 
            smStacked.SeriesDefinition = new StackedBarSeriesDefinition();  
            smStacked.GroupingSettings.GroupDescriptors.Add(new ChartGroupDescriptor("Group1"));  
            smStacked.ItemMappings.Add(new ItemMapping("BarY", DataPointMember.YValue));  
            smStacked.ItemMappings.Add(new ItemMapping("DataX", DataPointMember.XCategory));  
            smStacked.SeriesDefinition.ShowItemLabels = false;  
            smStacked.SeriesDefinition.ItemStyle = this.Resources["MyBarStyle"as Style;  
              
            StackedChart.ItemsSource = null;  
            StackedChart.SeriesMappings.Clear();  
            StackedChart.DefaultView.ChartArea.DataSeries.Clear();  
            StackedChart.SeriesMappings.Add(smStacked);  
            StackedChart.SortDescriptors.Add(sort);  
            StackedChart.PaletteBrushes.AddRange(ChartHelper.Palette);  
            StackedChart.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Between;  
            StackedChart.DefaultView.ChartArea.AxisX.LabelRotationAngle = 270 + 23;  
            StackedChart.DefaultView.ChartLegendPosition = Telerik.Windows.Controls.Dock.Left;  
        }  
        public void LoadChart()  
        {  
            Chart_StackedChartSetProperties();  
            StackedChart.ItemsSource = getData();  
            StackedGrid.ItemsSource = getData();  
        }  
        private List<ChartItem> getData()  
        {  
            List<ChartItem> trend = new List<ChartItem>();  
 
 
 
            trend.Add(new ChartItem() { BarY = 273, DataX = "Jun-2009", SortField = 1012009, Group1 = "Sewer Water" });  
            trend.Add(new ChartItem() { BarY = 363, DataX = "Jun-2009", SortField = 1012009, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 217, DataX = "Jul-2008", SortField = 1022008, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 096, DataX = "Jul-2009", SortField = 1022009, Group1 = "Sewer Water" });  
            trend.Add(new ChartItem() { BarY = 363, DataX = "Jul-2009", SortField = 1022009, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 235, DataX = "Aug-2008", SortField = 1032008, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 099, DataX = "Aug-2009", SortField = 1032009, Group1 = "Sewer Water" });  
            trend.Add(new ChartItem() { BarY = 306, DataX = "Aug-2009", SortField = 1032009, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 331, DataX = "Sep-2008", SortField = 1042008, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 087, DataX = "Sep-2009", SortField = 1042009, Group1 = "Sewer Water" });  
            trend.Add(new ChartItem() { BarY = 000, DataX = "Sep-2009", SortField = 1042009, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 293, DataX = "Oct-2008", SortField = 1052008, Group1 = "Sewer Water" });  
            trend.Add(new ChartItem() { BarY = 296, DataX = "Oct-2008", SortField = 1052008, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 099, DataX = "Oct-2009", SortField = 1052009, Group1 = "Sewer Water" });  
            trend.Add(new ChartItem() { BarY = 000, DataX = "Oct-2009", SortField = 1052009, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 358, DataX = "Nov-2008", SortField = 1062008, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 323, DataX = "Nov-2008", SortField = 1062008, Group1 = "Sewer Water" });  
            trend.Add(new ChartItem() { BarY = 093, DataX = "Nov-2009", SortField = 1062009, Group1 = "Sewer Water" });  
            trend.Add(new ChartItem() { BarY = 000, DataX = "Nov-2009", SortField = 1062009, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 256, DataX = "Dec-2008", SortField = 1072008, Group1 = "Sewer Water" });  
            trend.Add(new ChartItem() { BarY = 332, DataX = "Dec-2008", SortField = 1072008, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 093, DataX = "Dec-2009", SortField = 1072009, Group1 = "Sewer Water" });  
            trend.Add(new ChartItem() { BarY = 000, DataX = "Dec-2009", SortField = 1072009, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 084, DataX = "Jan-2010", SortField = 1082010, Group1 = "Sewer Water" });  
            trend.Add(new ChartItem() { BarY = 000, DataX = "Jan-2010", SortField = 1082010, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 103, DataX = "Feb-2010", SortField = 1092010, Group1 = "Sewer Water" });  
            trend.Add(new ChartItem() { BarY = 000, DataX = "Feb-2010", SortField = 1092010, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 000, DataX = "Mar-2010", SortField = 1102010, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 000, DataX = "Apr-2010", SortField = 1112010, Group1 = "Solid Waste" });  
            trend.Add(new ChartItem() { BarY = 000, DataX = "May-2010", SortField = 1122010, Group1 = "Solid Waste" });  
              
            //Uncomment the line below and the chart sorts correctly  
            //trend.Add(new ChartItem() { BarY = 000, DataX = " ", SortField = 0, Group1 = "Solid Waste" });  
 
 
            return trend;  
 
        }  
    }  
    public class ChartItem  
    {  
        public decimal BarY { setget; }  
        public string DataX { setget; }  
        public int SortField { setget; }  
        public string Group1 { setget; }  
 
    }  
    public class ChartHelper  
    {  
        public static IEnumerable<System.Windows.Media.Brush> Palette  
        {  
            get 
            {  
                List<System.Windows.Media.Brush> scb = new List<System.Windows.Media.Brush>();  
 
                scb.Add(new SolidColorBrush(Color.FromArgb(255, 108, 117, 128)));  
                scb.Add(new SolidColorBrush(Color.FromArgb(255, 139, 155, 173)));  
                scb.Add(new SolidColorBrush(Color.FromArgb(255, 175, 188, 199)));  
                scb.Add(new SolidColorBrush(Color.FromArgb(255, 64, 88, 104)));  
                scb.Add(new SolidColorBrush(Color.FromArgb(255, 102, 102, 102)));  
 
                return scb;  
 
            }  
        }  
    }  
}  
 

4 Answers, 1 is accepted

Sort by
0
IT Application Development
Top achievements
Rank 1
answered on 18 Jun 2010, 07:41 AM
BTW below is the XAML
<UserControl x:Class="SilverlightApplicationStackedChartTest1.Stacked_Chart" 
             xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"   
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
             xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" 
    xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting" 
    xmlns:chart="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"           
             > 
    <UserControl.Resources> 
        <Style x:Key="MyBarStyle" TargetType="chart:StackedBar">  
            <Setter Property="Template" > 
                <Setter.Value> 
                    <ControlTemplate TargetType="chart:StackedBar">  
                        <Canvas Opacity="0" x:Name="PART_CanvasContainer">  
                            <Rectangle x:Name="PART_DefiningGeometry" 
                                       Height="{TemplateBinding ItemActualHeight}" 
                                       Width="{TemplateBinding ItemActualWidth}" 
                                       Style="{TemplateBinding ItemStyle}" 
                                       > 
                            </Rectangle> 
                            <Canvas.RenderTransform> 
                                <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" /> 
                            </Canvas.RenderTransform> 
                        </Canvas> 
                    </ControlTemplate> 
 
                </Setter.Value> 
            </Setter> 
        </Style> 
    </UserControl.Resources> 
    <Canvas> 
        <data:DataGrid x:Name="StackedGrid" AutoGenerateColumns="True" Height="170" Width="784" Canvas.Top="360" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible" /> 
        <telerikChart:RadChart x:Name="StackedChart" Width="780" Height="334" BorderThickness="0"  PaletteBrushesRepeat="True" Canvas.Top="24" /> 
    </Canvas> 
</UserControl> 
0
Vladimir Milev
Telerik team
answered on 21 Jun 2010, 12:44 PM
Hi Marvin Mondejar,

Thanks for submitting this project. There are two things that can be done:

1) Use XValue instead of XCategory. If you really insist on having the chart control always sort the series along the X-Axis it is much better to use XValue

2) You can also get sorting to work with XCategory if and only if your first series is sorted and it contains ALL categories in it. Actually this is way your fix works when you uncomment the mentioned line of code. This is not a bug, but rather the specific way RadChart is handling categories. It adds a new category to the Xaxis whenever it discovers a new unique XCategory value.

Hope this helps.

Regards,
Vladimir Milev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
IT Application Development
Top achievements
Rank 1
answered on 21 Jun 2010, 03:16 PM
First solution: Changing XCategory to XValue causes an error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; SU 3.22; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30618; Media Center PC 5.0; .NET CLR 1.1.4322; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; InfoPath.3; .NET4.0C; .NET4.0E)
Timestamp: Mon, 21 Jun 2010 13:59:26 UTC

Message: Unhandled Error in Silverlight Application
Code: 4004   
Category: ManagedRuntimeError      
Message: System.FormatException: Input string was not in a correct format.
   at System.Number.ParseDouble(String value, NumberStyles options, NumberFormatInfo numfmt)
   at System.String.System.IConvertible.ToDouble(IFormatProvider provider)
   at System.Convert.ToDouble(Object value, IFormatProvider provider)
   at Telerik.Windows.Controls.Charting.DataBindingHelper.UpdateDataPoint(DataPoint dataPoint, Object value, ItemMapping itemMapping)
   at Telerik.Windows.Controls.Charting.DataBindingHelper.CreateDataSeriesBasedOnRawData(SeriesMapping seriesMapping, QueryableCollectionView dataEngine, Boolean isXValueDateTime, ISeriesDefinition defaultSeriesDefinition)
   at Telerik.Windows.Controls.Charting.DataBindingHelper.ProcessNoGrouping(SeriesMapping seriesMapping, QueryableCollectionView dataEngine, Int32 samplingThreshold, ZoomScrollSettings zoomScrollSettings, ISeriesDefinition defaultSeriesDefinition, AxisRangeState axisXRangeState, Int32 seriesCount)
   at Telerik.Windows.Controls.Charting.DataBindingHelper.ProcessGroupingNoAggregation(SeriesMapping seriesMapping, QueryableCollectionView dataEngine, Int32 samplingThreshold, ZoomScrollSettings zoomScrollSettings, ISeriesDefinition defaultSeriesDefinition, AxisRangeState axisXRangeState, Int32 seriesCount)
   at Telerik.Windows.Controls.Charting.DataBindingHelper.ProcessGrouping(SeriesMapping seriesMapping, QueryableCollectionView dataEngine, Int32 samplingThreshold, ZoomScrollSettings zoomScrollSettings, ISeriesDefinition defaultSeriesDefinition, AxisRangeState axisXRangeState, Int32 seriesCount)
   at Telerik.Windows.Controls.Charting.DataBindingHelper.ProcessMapping(SeriesMapping seriesMapping, QueryableCollectionView dataEngine, Int32 samplingThreshold, ZoomScrollSettings zoomScrollSettings, ISeriesDefinition defaultSeriesDefinition, AxisRangeState axisXRangeState, Int32 seriesCount)
   at Telerik.Windows.Controls.Charting.DataBindingHelper.ProcessMappings(SeriesMappingCollection seriesMappings, QueryableCollectionView dataEngine, Int32 samplingThreshold, ZoomScrollSettings zoomScrollSettings, ISeriesDefinition defaultSeriesDefinition, AxisRangeState axisXRangeState)
   at Telerik.Windows.Controls.Charting.DataBindingHelper.GenerateDataSeries(Object originalData, SeriesMappingCollection seriesMappings, ISeriesDefinition defaultSeriesDefinition, ChartFilterDescriptorCollection globalFilterDescriptors, ChartSortDescriptorCollection globalSortDescriptors, SamplingSettings samplingSettings, ZoomScrollSettings zoomScrollSettings, AxisRangeState axisXRangeState)
   at Telerik.Windows.Controls.RadChart.GenerateDataSeries(Object originalData, SeriesMappingCollection seriesMappings, ChartArea chartArea)
   at Telerik.Windows.Controls.RadChart.GenerateDataSeries(Object originalData)
   at Telerik.Windows.Controls.RadChart.Rebind(Object originalData)
   at Telerik.Windows.Controls.RadChart.Rebind()
   at Telerik.Windows.Controls.RadChart.InternalRebind()
   at Telerik.Windows.Controls.RadChart.OnApplyTemplate()
   at System.Windows.FrameworkElement.OnApplyTemplate(IntPtr nativeTarget)    

Line: 54
Char: 13
Code: 0
URI: http://localhost:53757/SilverlightApplicationStackedChartTest1TestPage.html

Second Solution:

Not all my datapoints will contain ALL categories.
I understand that this is not a bug, but is there plans to modify how RadChart handles categories?

0
Jeremy
Top achievements
Rank 1
answered on 21 Dec 2010, 06:27 AM
I'm having the same problem and both the proposed solutions aren't appropriate either. What workaround did you go for?
Tags
Chart
Asked by
IT Application Development
Top achievements
Rank 1
Answers by
IT Application Development
Top achievements
Rank 1
Vladimir Milev
Telerik team
Jeremy
Top achievements
Rank 1
Share this question
or