Specify specific colors for specific pie-wedges

[Mikhail]

Hi,

I've figured out that you can bind a palette to a RadPieChart, and this works fine. But, I have no way of knowing which of the brushes in the fillentries will be used for a particular item. What I would like to do is to be able to expose a property in the PieChartItem viewmodel that the the chart gets data from, which specifies the fill color to use for a particular wedge. Then, I could bind the fill to that color. Is that possible?

If that's not possible, an alternative could be to somehow query the piechart to retrieve the color that it used for a particular wedge, given a PieChartItem.

Please let me know if either of these could work.

Thanks,
Mike

[Georgi]

Hi Mike,

Thanks for your question.

The Chart internally uses an index-based approach to look-up the Palette brushes. That said, if you have more PieSlices than the fill entries in the palette, brushes will start from zero again - a modulus operation is used to retrieve the current brush. Each Palette instance has a GetBrush method that can give you the desired brush for a particular visual part:

/// <summary>
/// Gets the <see cref="Brush"/> (if present) for the specified <see cref="PaletteVisualPart"/> instance at the specified index.
/// </summary>
/// <param name="index">The index for which to look-up a brush.</param>
/// <param name="visualPart">The visual part for which a brush is required.</param>
public Brush GetBrush(int index, PaletteVisualPart visualPart)
{
    return this.GetBrush(index, visualPart, string.Empty);
}

I am however not familiar with the application's context and whether the described behavior cannot be separated in the view only. What you are trying to achieve is to override the Palette routine and to delegate the responsibility for the visual representation of each PieSlice to the view model. The MVVM's general rule of thumb regarding what should be put in the View and what in the ViewModel is (quoting MSDN):

"Anything concerned with the specific visual appearance of the UI on the screen and that could be re-styled later (even if you are not currently planning to re-style it) should go into the view; anything that is important to the logical behavior of the application should go into the view model"

That is why I would kindly ask you to prepare a simple project that demonstrates your scenario in the context of the application, so that I can help you with some further details and actual code.

I am looking forward to your reply.

All the best,
Georgi
the Telerik team

[Mikhail]

Hi Georgi,

Thanks for your reply. Before we go any further down this road with code examples and all, I want to be clear about what I'm doing because maybe its actually unnecessary.

My layout needs are such that I need a legend to accompany my pie charts, because there isn't enough space for text descriptions next to each pie-wedge.

I couldn't find any API for legends, so I figured I would make one myself - doesn't seem hard... But, to draw my legend, I have to know which pie slice is which color, that's why I'm asking this question.

If there's an API for legends that I'm missing somewhere (or if its coming soon) then I can forget this whole thing. Please let me know!

Thanks,
Mike

[Georgi]

Hi Mike,

Thanks for the details. I have prepared a sample application (find it attached) that demonstrates an MVVM-friendly approach to create a chart and a legend, sharing same palette. It has some limitations as you will need the Palette declared in XAML. If you want to use the built-in palettes, you may create some Proxy class, that will get the static ChartPalettes.DefaultDark palette and pass it to the chart and the legend.

We have the Legend feature in our TODO lists and we will do our best to implement it for the official release (date is still TBD).

I hope this helps. Let me know if I can assist you further.

Regards,
Georgi
the Telerik team

[Mikhail]

Hi Georgi,

This has a bit of an unfortunate side-effect that the PieDataItems now need to be aware of their index within the chart's VM (and that very old-fashioned looking for loop to populate the VM.)

But this is certainly good enough until there's a real legend API. Thanks so much!

Mike

[Sajida]

Hi,



In the sample you provided above.. when I use the PaletteBrushConverter in my application it is saying that " the PaletterBrushConverter" doesnot exist in the name space. I have even tried with the DataPointToBrushConverter but in vain. Please help me through this.



And also let me know about using annotations and thresholds in pie charts.



I am using RadPieChart in my applications



Thanks in advance...

[Tsvyatko]

Hi Sajida,

PaletterBrushConverter is  a custom converter included in the sample attached in the previous post (PaletterBrushConverter.cs). You might want to copy its contents to your application and modify its namespace to fit in your infrastructure.

If you have any other questions do not hesitate to contact us.

Regards,
Tsvyatko
the Telerik team

[Sajida]

Hi Tsyvatko,



Thank you for the reply. In the sample apps provided at http://www.telerik.com/products/windows-metro/overview.aspx, Can you please let me know how different colors are getting appended to the slices of the pie chart. I used the "DataPointToBrushConverter" (same as in the demo provided in the above link) and included all the .cs files (MainViewModel.cs, ViewModelBase.cs) and still it is saying that I am missing the namespace. Please let me know what I am missing and how the colors are added to the slices. I am using RadPieChart in my application.



Thanks in advance..

[Tsvyatko]

Hello Sajida,

 In the sample the differently colored slices are achieved by using RadPieChart PaletteName property.

Regarding the converter you might want to verify the following:

 - the namespace of the PaletteBrushConverter.cs - e.g. App3
 - define namespace in the declaration of your xaml page e.g.:

xmlns:local="using:App3"

 - define instance of your converter in xaml resources:

 

<local:PaletteBrushConverter x:Key="brushConverter"/>

 - use the converter by key:

<Rectangle Width="20" Height="20" Fill="{Binding Converter={StaticResource brushConverter}, ConverterParameter={StaticResource chartPalette}}"/>

Generally, these issues and questions are not related to RadControls for metro. So, what I can suggest additionally is to check these articles:

 - http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh758320.aspx 
 - http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.data.ivalueconverter

Additionally, we have already prepared a CHM file with documentation together with API reference for our controls and you can use it in case you have general questions, related to the controls. The documentation package can be found in your Telerik account (login is required):

RadControls for Metro/XAML Documentation

And you can always have a look at the Demo Application, shipped with the installation package:

C:\Program Files (x86)\Telerik\RadControls for Metro XAML Q1 2012 BETA\Demos\QSF.sln

I hope this information is useful and it will help you start build your Metro apps using RadControls for Metro.

Kind regards,
Tsvyatko
the Telerik team

[mark]

Your sample is pretty good but it makes a big assumption: You have a fixed set of colors you want to always use.

In my scenario, I am dynamically constructing the Pallete and binding to it on the control. However, you can't bind to the ConverterParameter, you can only use StaticResource. There are work arounds, sure, I could dynamically construct the pallete and dump it into a static resource but it seems like this is harder than it should be. Especially if you want people to shell out $600 for your control suite.

[Tsvyatko]

Hello Mark,

 You are quite correct. The provided solution has some drawbacks and limitations that might make it hard achieving scenarios like yours. Nevertheless, the solution provided was suggested for the beta version of the controls. Since then we have made various improvements and extensions for the existing functionality.

Using the current official version you can take advantage of our legend control that simplifies 
such scenarios. In addition it supports dynamic palettes as well. For more information you can check this help article - http://www.telerik.com/help/windows-8-xaml/radchart-legendcontrol-legendcontrolforpiechart.html

Let us know if this helps.

Greetings,
Tsvyatko
the Telerik team