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

How to Style Pie Chart Dynamically

2 Answers 79 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 1
Sean asked on 27 Mar 2012, 08:55 PM
Hello,

I am using MVVM to bind a PieChart to a collection called "Metrics" as shown below. The collection has a "Count" and a "Status" field. The status field is used on the legend, and based on the value in "Status" I would like to color that series a particular color.

Could I add a color property to my "Metrics" collection and somehow bind the pie chart's series color to that property? I don't see anything that allows that in ItemMappings. If not, how else would someone recommend setting the color dynamically based on "Status?" Can I create a predefined map? Thanks.

<chart:RadChart Grid.Row="1" ItemsSource="{Binding Metrics}" BorderThickness="0" >
    <chart:RadChart.SeriesMappings>
        <charting:SeriesMapping>
            <charting:SeriesMapping.SeriesDefinition>
                <charting:PieSeriesDefinition />
            </charting:SeriesMapping.SeriesDefinition>
            <charting:ItemMapping FieldName="Count" DataPointMember="YValue" />
            <charting:ItemMapping FieldName="Status" DataPointMember="LegendLabel" />
        </charting:SeriesMapping>
    </chart:RadChart.SeriesMappings>

2 Answers, 1 is accepted

Sort by
0
Accepted
Evgenia
Telerik team
answered on 28 Mar 2012, 02:09 PM
Hi Sean,

Thanks for contacting us.
There is no need to create a new Color property. You can use the CustomItemStyleDelegate property as shown in this help topic and color the slices based on condition.

Let me know if you need further assistance with this.

Greetings,
Evgenia
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Sean
Top achievements
Rank 1
answered on 28 Mar 2012, 04:02 PM
Thank you very much for your reply!
I was able to use your example and get it working using the code below

public MyPage()
{
    InitializeComponent();
    this.chtMetrics.CreateItemStyleDelegate = BuildCustomItemStyle;
}
public Style BuildCustomItemStyle(Control item, Style style, DataPoint point, DataSeries dataSeries)
{
    Style newStyle = new Style(style.TargetType);
    newStyle.BasedOn = style;
    Brush brush;
    if (item is BaseChartItem)
    {
        switch(dataSeries[(item as BaseChartItem).CurrentIndex].LegendLabel)
        {
            case "FAILED":
                brush = new SolidColorBrush(Colors.Red);
                break;
            default:
                brush = new SolidColorBrush(Colors.Green);
                break;
        }
        newStyle.Setters.Add(new Setter(Shape.FillProperty, brush));
    }
    if (item is SeriesItemLabel)
    {
        switch ((item as SeriesItemLabel).DataPoint.LegendLabel)
        {
            case "FAILED":
                brush = new SolidColorBrush(Colors.Red);
                break;
            default:
                brush = new SolidColorBrush(Colors.Green);
                break;
        }
        newStyle.Setters.Add(new Setter(SeriesItemLabel.FillProperty, new SolidColorBrush(Colors.White)));
        newStyle.Setters.Add(new Setter(SeriesItemLabel.StrokeProperty, brush));
        newStyle.Setters.Add(new Setter(SeriesItemLabel.ForegroundProperty, new SolidColorBrush(Colors.Black)));
    }
    if (item is ChartLegendItem)
    {
        switch ((item as ChartLegendItem).Label)
        {
            case "FAILED":
                brush = new SolidColorBrush(Colors.Red);
                break;
            default:
                brush = new SolidColorBrush(Colors.Green);
                break;
        }
        newStyle.Setters.Add(new Setter(Path.FillProperty, brush));
    }
    return newStyle;
}
Tags
Chart
Asked by
Sean
Top achievements
Rank 1
Answers by
Evgenia
Telerik team
Sean
Top achievements
Rank 1
Share this question
or