Stacked Bar Chart Sorting on X-Axis

5 posts, 0 answers
  1. IT Application Development
    IT Application Development avatar
    13 posts
    Member since:
    Mar 2010

    Posted 18 Jun 2010 Link to this post

    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;  
     
                }  
            }  
        }  
    }  
     
  2. IT Application Development
    IT Application Development avatar
    13 posts
    Member since:
    Mar 2010

    Posted 18 Jun 2010 Link to this post

    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> 
  3. DevCraft banner
  4. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 21 Jun 2010 Link to this post

    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
  5. IT Application Development
    IT Application Development avatar
    13 posts
    Member since:
    Mar 2010

    Posted 21 Jun 2010 Link to this post

    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?

  6. Jeremy
    Jeremy avatar
    96 posts
    Member since:
    Mar 2010

    Posted 21 Dec 2010 Link to this post

    I'm having the same problem and both the proposed solutions aren't appropriate either. What workaround did you go for?
Back to Top
DevCraft banner