Hi,
I'm using the XamDoughnutChart and attempting to set specific colors for the items that are in the chart. Based on some of the samples that I've seen on your site I'm basically creating a BrushCollection and setting it to the ringSeries.Brushes. I'm having trouble matching the colors to the items and I'm wondering if there is a better way to my approach. Below is a little more detail on what I'm doing:
So the XamDoughnutChart could be bound to a collection that has 4 items in it, 3 of which are positive, so the BrushCollection would have 3 brushes. I've also posted some of my code below. Thanks in advance.
Xaml:
<ig:XamDoughnutChart Grid.Column="4" Grid.Row="0" x:Name="AssetsDoughnutChart"> <ig:XamDoughnutChart.Series> <ig:RingSeries ItemsSource="{Binding Model}" ValueMemberPath="Assets.YearToDate" x:Name="AssetsDoughnutSeries" PropertyUpdated="DoughnutSeries_OnPropertyUpdated" /> </ig:XamDoughnutChart.Series> </ig:XamDoughnutChart>
Code behind:
private void DoughnutSeries_OnPropertyUpdated(object sender, PropertyUpdatedEventArgs e) { if (e.PropertyName == "ItemsSource") UpdateColors(sender as RingSeries); }
private void UpdateColors(RingSeries ringSeries) { var items = ringSeries.ItemsSource as FinancialItemModelList;
if (items == null) return;
var brushes = new BrushCollection(); foreach (var item in items) { var brush = GetColorForProduct(item.Code);
...
if(value <= 0) continue;
if(brush != null) brushes.Add(brush); } ringSeries.Brushes = brushes;
}
Hello,
Thank you for your post. I have been looking into it and I can say that your approach is a good one. If I think of a better one I will let you know.
So how does the control match each item its graphing to the color?
How does it know which is color /brush is available?
I know it's not just by the index, because when it gets to an item that is not being mapped, say item[0] is <= 0, it will not use Brush[0], and if Item[1] > 0 it will use Brush[0].
Is there another way to associate an item to a brush?
I am not sure that I fully understood your question. Could you please be more specific what do you mean when you said that an item is not mapped? It will be very helpful if you send us a sample, where this is reproduced, so I can investigate it further for you.
Looking forward for your reply.
I can say that the first item from the ItemsSource gets the first color from the Brushes collection (if it is not <=0, which means it is displayed in the chart).
When I refer to items not being mapped, I'm referring to items that will not be graphed because they have a negative or zero value. These items don't seem to use a color. So if I have 4 items in my ringSeries.ItemsSource with four model objects that have GrossSales.YearToDate values as follows: 0, 5, 130 and 800. The code below basically gets a color for each item and adds it to the new brushcollection if the value is greater than 0.
So the color for 0 is supposed to be blue, the color for 5 is supposed to be aqua, 130 is supposed to be black and the 800 is supposed to be red. The brushcollection ends up having 3 colors in it: aqua, black and red. But when the graph appears the colors do not match, the 5 is red, the 130 is aqua and the 800 is black.
I have basically put a sample in the original post but here it is again:
XAML:
<ig:XamDoughnutChart Grid.Column="1" Grid.Row="0" x:Name="GrossSalesDoughnutChart"> <ig:XamDoughnutChart.Series> <ig:RingSeries ItemsSource="{Binding Model}" ValueMemberPath="GrossSales.YearToDate" x:Name="GrossSalesDoughnutSeries" PropertyUpdated="DoughnutSeries_OnPropertyUpdated"/> </ig:XamDoughnutChart.Series> </ig:XamDoughnutChart>
XAML.cs:
var brushes = new BrushCollection(); foreach (var item in items) { decimal value = 0;
if (ringSeries == GrossSalesDoughnutSeries) value = item.GrossSales.YearToDate; if (value <= 0) continue;
var brush = GetColorForProduct(item.Code); if(brush != null) brushes.Add(brush); } ringSeries.Brushes = brushes; }