Keep chart color even with missing serie

[Cedric]

Hi,
I 've several chart displayed in the same time but only one has a legend. This legend is usefull for all the graph so i declare in xaml all the legend item i want to display with their colors :

<telerik:ChartLegend x:Uid="ClassificationLegend"
                         x:Key="ClassificationLegend"
                         Name="ClassificationLegend"
                         Visibility="Visible"
                         Header=""
                         Padding="0,0,5,0"
                         HorizontalContentAlignment="Right"
                         VerticalAlignment="Center"
                         BorderThickness="0"
                         Background="Transparent"
                         UseAutoGeneratedItems="False">
        <telerik:ChartLegendItem x:Uid="telerik:ChartLegendItem_1"
                                 Label="Success"
                                 MarkerFill="{StaticResource SuccessBrush}" />
        <telerik:ChartLegendItem x:Uid="telerik:ChartLegendItem_2"
                                 Label="Hesitation"
                                 MarkerFill="{StaticResource HesitationBrush}" />
        <telerik:ChartLegendItem x:Uid="telerik:ChartLegendItem_3"
                                 Label="Unknown"
                                 MarkerFill="{StaticResource UnknownBrush}" />
        <telerik:ChartLegendItem x:Uid="telerik:ChartLegendItem_4"
                                 Label="Misrecognition"
                                 MarkerFill="{StaticResource MisrecognitionBrush}" />
    </telerik:ChartLegend>

And of course, i want the bar & pie use the same colors.
so i added for each graph the palette brush:

<telerik:RadChart.PaletteBrushes>
                <SolidColorBrush x:Uid="SolidColorBrush_5"
                                 Color="{StaticResource SuccessColor}" />
                <SolidColorBrush x:Uid="SolidColorBrush_6"
                                 Color="{StaticResource HesitationColor}" />
                <SolidColorBrush x:Uid="SolidColorBrush_7"
                                 Color="{StaticResource UnknownColor}" />
                <SolidColorBrush x:Uid="SolidColorBrush_8"
                                 Color="{StaticResource MisrecognitionColor}" />
            </telerik:RadChart.PaletteBrushes>

But when the data are populated some series are missing because there is no value returned by the query.
If the number of series is not always 4 the is a gap with the palette : the wrong colors are used.
if my query return always the four series but with 0 values for the missing series the pie chart try to display the 0 because i set 

ItemLabelFormat="#%{p0}"
What can i do ?

- Cedric -

[Sia]

Hello Cedric,

The observed behavior is caused because the chart control does not correlate its data and the color of series when using Palette Brushes. However you can alter the PaletteBrushes collection for the control:

SolidColorBrush brush1 = new SolidColorBrush(Colors.Red);
RadChart1.PaletteBrushes.Add(brush1);

Replacing the missing values with zero values also is a good approach for you case. You just need to hide the 0 values by setting ShowZeroValueLabels="False" as follows:

<telerikCharting:PieSeriesDefinition ItemLabelFormat="#%{p0}">
    <telerikCharting:PieSeriesDefinition.LabelSettings>
        <telerikCharting:RadialLabelSettings ShowZeroValueLabels="False" />
    </telerikCharting:PieSeriesDefinition.LabelSettings>
</telerikCharting:PieSeriesDefinition>

Please let me know whether this helps you.

Regards,
Sia
the Telerik team

[Cedric]

Hi Sia,
ShowZeroValueLabels made the trick but my palette doesn't seemed to be used :

<telerik:RadChart Name="chartStrategyPerformanceMax"
                          Background="Transparent"
                          BorderThickness="0"
                          IsTabStop="False"
                          DataContext="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadFluidContentControl, Mode=FindAncestor},  Path=DataContext}"
                          ItemsSource="{Binding StatusGroup}"
                          PaletteBrushes="{Binding BrushPalette}"
                          ToolTip="Display strategy performance by vote level"
                          x:Uid="chartStrategyPerformance">
            <telerik:RadChart.SeriesMappings>
                <telerik:SeriesMapping x:Uid="telerik:SeriesMapping_1"
                                       LegendLabel="Success"
                                       CollectionIndex="0">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:HorizontalStackedBarSeriesDefinition x:Uid="telerik:StackedBarSeriesDefinition_1"
                                                                      ShowItemLabels="True" />
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:SeriesMapping.ItemMappings>
                        <telerik:ItemMapping x:Uid="telerik:ItemMapping_1"
                                             DataPointMember="YValue"
                                             FieldName="Count" />
                        <telerik:ItemMapping x:Uid="telerik:ItemMapping_2"
                                             DataPointMember="XCategory"
                                             FieldName="Name" />
                    </telerik:SeriesMapping.ItemMappings>
                </telerik:SeriesMapping>

                <telerik:SeriesMapping x:Uid="telerik:SeriesMapping_2"
                                       LegendLabel="Hesitation"
                                       CollectionIndex="1">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:HorizontalStackedBarSeriesDefinition x:Uid="telerik:StackedBarSeriesDefinition_2"
                                                                      ShowItemLabels="True" />
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:SeriesMapping.ItemMappings>
                        <telerik:ItemMapping x:Uid="telerik:ItemMapping_3"
                                             DataPointMember="YValue"
                                             FieldName="Count" />
                        <telerik:ItemMapping x:Uid="telerik:ItemMapping_4"
                                             DataPointMember="XCategory"
                                             FieldName="Name" />
                    </telerik:SeriesMapping.ItemMappings>
                </telerik:SeriesMapping>

                <telerik:SeriesMapping x:Uid="telerik:SeriesMapping_3"
                                       LegendLabel="Unknown"
                                       CollectionIndex="2">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:HorizontalStackedBarSeriesDefinition x:Uid="telerik:StackedBarSeriesDefinition_3"
                                                                      ShowItemLabels="True" />
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:SeriesMapping.ItemMappings>
                        <telerik:ItemMapping x:Uid="telerik:ItemMapping_5"
                                             DataPointMember="YValue"
                                             FieldName="Count" />
                        <telerik:ItemMapping x:Uid="telerik:ItemMapping_6"
                                             DataPointMember="XCategory"
                                             FieldName="Name" />
                    </telerik:SeriesMapping.ItemMappings>
                </telerik:SeriesMapping>

                <telerik:SeriesMapping x:Uid="telerik:SeriesMapping_7"
                                       LegendLabel="Misrecognition"
                                       CollectionIndex="3">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:HorizontalStackedBarSeriesDefinition x:Uid="telerik:StackedBarSeriesDefinition_7"
                                                                      ShowItemLabels="True" />
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:SeriesMapping.ItemMappings>
                        <telerik:ItemMapping x:Uid="telerik:ItemMapping_13"
                                             DataPointMember="YValue"
                                             FieldName="Count" />
                        <telerik:ItemMapping x:Uid="telerik:ItemMapping_14"
                                             DataPointMember="XCategory"
                                             FieldName="Name" />
                    </telerik:SeriesMapping.ItemMappings>
                </telerik:SeriesMapping>
            </telerik:RadChart.SeriesMappings>

            <telerik:RadChart.DefaultView>
                <telerik:ChartDefaultView x:Uid="charting:ChartDefaultView_2"
                                          ChartLegend="{StaticResource ClassificationLegend}">
                    <telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartArea NoDataString="Not available"
                                           LegendName="ClassificationLegend"
                                           SmartLabelsEnabled="True"
                                           x:Uid="charting:ChartArea_2" />
                    </telerik:ChartDefaultView.ChartArea>
                </telerik:ChartDefaultView>
            </telerik:RadChart.DefaultView>

            <!--<telerik:RadChart.PaletteBrushes>
                <SolidColorBrush x:Uid="SolidColorBrush_5"
                                 Color="{StaticResource SuccessColor}" />
                <SolidColorBrush x:Uid="SolidColorBrush_6"
                                 Color="{StaticResource HesitationColor}" />
                <SolidColorBrush x:Uid="SolidColorBrush_7"
                                 Color="{StaticResource UnknownColor}" />
                <SolidColorBrush x:Uid="SolidColorBrush_8"
                                 Color="{StaticResource MisrecognitionColor}" />
            </telerik:RadChart.PaletteBrushes>-->
        </telerik:RadChart>

The binding is hited if i set a breakpoint in the BrushPalette property but the colors doesn't change.

- Cedric - 

[Sia]

Hi Cedric,

I have noticed that you have commented lines in your XAML code. Can you please send us a sample runnable project demonstrating your problem? That way it will be easier for us to guide you how to achive your requirement.

Kind regards,
Sia
the Telerik team

[Cedric]

Is it possible to upload a zip file with a complete c# project ?
sorry, but i don't understand how to post a complete project

- Cedric - 

[Sia]

Hello Cedric,

You need to open a new support ticket and attach the zip archive there.

Regards,
Sia
the Telerik team

[Cedric]

too long to open a ticket
Here is  the sample you have requested:

namespace TestTileView
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Cinch;
    using Telerik.Windows.Controls.Charting;

    /// <summary>
    /// Represents an instance of the Class1 class.
    /// </summary>
    public class MainViewModel : ViewModelBase
    {
        public MainViewModel()
        {
            this.Items = new List<Item>()
        {
            new Item()
            {
                Level = 1,
                Text ="AAAA",
                StatusGroup = new List<StatusPerformance>()
                {
                    new StatusPerformance("Success", new List<Performance>()
                    {
                        new Performance() { Name="TMI", Count=76},
                        new Performance() { Name="TXT", Count=39}
                    }),
                    new StatusPerformance("Misrecognition", new List<Performance>()
                    {
                        new Performance() { Name="TMI", Count=15},
                        new Performance() { Name="TXT", Count=33}
                    }),
                    new StatusPerformance("Unknown", new List<Performance>()
                    {
                        new Performance() { Name="TMI", Count=62}
                    })
                }
            },
           new Item()
            {
                Level = 2,
                Text ="BBBB",
                StatusGroup = new List<StatusPerformance>()
                {
                    new StatusPerformance("Misrecognition", new List<Performance>()
                    {
                        new Performance() { Name="TMI", Count=15},
                        new Performance() { Name="TXT", Count=33}
                    }),
                    new StatusPerformance("Unknown", new List<Performance>()
                    {
                        new Performance() { Name="TMI", Count=62}
                    })
                }
            },new Item()
            {
                Level = 3,
                Text ="CCCC",
                StatusGroup = new List<StatusPerformance>()
                {
                    new StatusPerformance("Success", new List<Performance>()
                    {
                        new Performance() { Name="TMI", Count=76},
                        new Performance() { Name="TXT", Count=39}
                    }),
                    new StatusPerformance("Unknown", new List<Performance>()
                    {
                        new Performance() { Name="TMI", Count=62}
                    })
                }
            },
        };
        }

        public IList<Item> Items { get; private set; }
    }

    public class Item : ViewModelBase
    {
        private TileStateEnum tileState;
        public int Level { get; set; }
        public string Text { get; set; }
        public TileStateEnum TileStateProp
        {
            get
            {
                return this.tileState;
            }

            set
            {
                if (this.tileState != value)
                {
                    this.tileState = value;
                    this.NotifyPropertyChanged("TileStateProp");
                }
            }
        }

        public List<StatusPerformance> StatusGroup { get; set; }

        public BrushCollection BrushPalette
        {
            get
            {
                var statusList = this.StatusGroup.Select(g => g.Status);

                var brushes = new BrushCollection();
                foreach (var item in statusList)
                {
                    brushes.Add(ClassificationStatusColors.MediaBrushes[item]);
                }
                return brushes;
            }
        }
    }

    public class StatusPerformance : List<Performance>
    {
        public StatusPerformance(string status, IList<Performance> performances)
        {
            this.Status = status;
            this.AddRange(performances);
        }
        public string Status { get; private set; }
    }

    public class Performance
    {
        public string Name { get; set; }
        public int Count { get; set; }
    }

    public static class ClassificationStatusColors
    {
        private static Dictionary<string, System.Windows.Media.SolidColorBrush> mediaBrushes = new Dictionary<string, System.Windows.Media.SolidColorBrush>()
            {
                { "Success", new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromArgb(0xFF, 0x99, 0xCC, 0x00))},
                { "Hesitation", new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromArgb(0xFF, 0xFF, 0xCC, 0x00))},
                { "Unknown", new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromArgb(0xFF, 0x99, 0x99, 0x99))},
                { "Misrecognition", new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromArgb(0xFF, 0xFF, 0x67, 0x02))},
                { "Undefined", new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromArgb(0xFF, 0x99, 0xCC, 0xFF))}
            };

        public static Dictionary<string, System.Windows.Media.SolidColorBrush> MediaBrushes
        {
            get
            {
                return mediaBrushes;
            }
        }
    }
}

<Window x:Class="TestTileView.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:local="clr-namespace:TestTileView"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Window.Resources>
        <local:FluidContentStateConverter x:Uid="conv:TileConverter_1"
                                          x:Key="FluidContentStateConverter" />
        <local:TileStateConverter x:Key="TileStateConverter" />

        <Style x:Uid="Style_17"
               TargetType="telerik:RadTileView"
               x:Key="TileGraphStyle">
            <Setter x:Uid="Setter_185"
                    Property="IsItemDraggingEnabled"
                    Value="True" />
            <Setter x:Uid="Setter_186"
                    Property="MaximizeMode"
                    Value="One" />
            <Setter x:Uid="Setter_187"
                    Property="IsItemsAnimationEnabled"
                    Value="False" />
            <Setter x:Uid="Setter_188"
                    Property="PreservePositionWhenMaximized"
                    Value="True" />
            <Setter x:Uid="Setter_189"
                    Property="telerik:TileViewPanel.IsVirtualized"
                    Value="True" />
            <Setter x:Uid="Setter_190"
                    Property="IsAutoScrollingEnabled"
                    Value="True" />
            <Setter x:Uid="Setter_191"
                    Property="TileStateChangeTrigger"
                    Value="SingleClick" />
            <Setter x:Uid="Setter_192"
                    Property="MinimizedColumnWidth"
                    Value="300" />
            <Setter x:Uid="Setter_193"
                    Property="MinimizedRowHeight"
                    Value="300" />
            <Setter x:Uid="Setter_194"
                    Property="MinimizedItemsPosition"
                    Value="Left" />
        </Style>


        <DataTemplate x:Key="SmallTemplate">
            <telerik:RadChart Name="chartTechnicalItemsMin"
                              Background="Transparent"
                              BorderThickness="0"
                              IsTabStop="False"
                              UseDefaultLayout="False"
                              DataContext="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadFluidContentControl, Mode=FindAncestor},  Path=DataContext}"
                              ItemsSource="{Binding StatusGroup}"
                              PaletteBrushes="{Binding BrushPalette}"
                              ToolTip="Display matching technical items by libraries"
                              x:Uid="chartTechnicalItemsMin">
                <telerik:RadChart.SeriesMappings>
                    <telerik:SeriesMapping x:Uid="telerik:SeriesMapping_16"
                                           CollectionIndex="0"
                                           ChartAreaName="ItemArea">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:HorizontalStackedBarSeriesDefinition ShowItemLabels="True" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping x:Uid="telerik:ItemMapping_31"
                                                 DataPointMember="YValue"
                                                 FieldName="Count" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>

                    <telerik:SeriesMapping x:Uid="telerik:SeriesMapping_17"
                                           ChartAreaName="ItemArea"
                                           LegendLabel="Hesitation"
                                           CollectionIndex="1">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:HorizontalStackedBarSeriesDefinition ShowItemLabels="True" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping x:Uid="telerik:ItemMapping_33"
                                                 DataPointMember="YValue"
                                                 FieldName="Count" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>

                    <telerik:SeriesMapping x:Uid="telerik:SeriesMapping_18"
                                           ChartAreaName="ItemArea"
                                           LegendLabel="Unknown"
                                           CollectionIndex="2">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:HorizontalStackedBarSeriesDefinition ShowItemLabels="True" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping x:Uid="telerik:ItemMapping_35"
                                                 DataPointMember="YValue"
                                                 FieldName="Count" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>

                    <telerik:SeriesMapping x:Uid="telerik:SeriesMapping_19"
                                           ChartAreaName="ItemArea"
                                           LegendLabel="Misrecognition"
                                           CollectionIndex="3">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:HorizontalStackedBarSeriesDefinition ShowItemLabels="True" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping x:Uid="telerik:ItemMapping_37"
                                                 DataPointMember="YValue"
                                                 FieldName="Count" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>
                </telerik:RadChart.SeriesMappings>
                <telerik:ChartArea x:Uid="chartArea"
                                   Name="ItemArea"
                                   NoDataString="Not available"
                                   FontSize="8">
                </telerik:ChartArea>
            </telerik:RadChart>
        </DataTemplate>
        <DataTemplate x:Key="RadFluidContentControlTemplate">
            <telerik:RadFluidContentControl ContentChangeMode="Manual"
                                            TransitionDuration="0:0:.5"
                                            LargeContentTemplate="{StaticResource SmallTemplate}"
                                            SmallContentTemplate="{StaticResource SmallTemplate}"
                                            ContentTemplate="{StaticResource SmallTemplate}"
                                            State="{Binding TileStateProp, Converter={StaticResource FluidContentStateConverter}}">
            </telerik:RadFluidContentControl>
        </DataTemplate>

        <Style TargetType="telerik:RadTileViewItem"
               x:Key="ItemContainerStyle">
            <Setter Property="TileState"
                    Value="{Binding TileStateProp, Mode=TwoWay, Converter={StaticResource TileStateConverter}}" />
        </Style>
    </Window.Resources>
    <Grid>
        <telerik:RadTileView x:Uid="tileView1"
                             x:Name="tileView1"
                             MaximizeMode="ZeroOrOne"
                             Style="{StaticResource TileGraphStyle}"
                             ContentTemplate="{StaticResource RadFluidContentControlTemplate}"
                             ItemContainerStyle="{StaticResource ItemContainerStyle}"
                             ItemsSource="{Binding Items}">
            <telerik:RadTileView.ItemTemplate>
                <DataTemplate x:Uid="DataTemplate_4">
                    <TextBlock x:Uid="TextBlock_11"
                               Text="{Binding Level}" />
                </DataTemplate>
            </telerik:RadTileView.ItemTemplate>
        </telerik:RadTileView>
    </Grid>
</Window>

I hope it will stay readable ...

- Cedric -

[Sia]

Hello Cedric,

Thank you for the details provided. Indeed, there is a problem when you bind the PaletteBrushes property  and RadChart is in a data template. I have linked your ticket to already logged issue in our Public Issue Tracking System, so you can track its status here. Please find your Telerik points updated.

All the best,
Sia
the Telerik team