Is there any easy way to bind a specific legend color to a data series?

[Di]

Is there any easy way to bind a specific legend color to a data series?
I got three colors in my data series, which are red, yellow and green. So when I group by color, I have red data series, yellow data series and green data series. Now I need to bind red data series to red color legend, yellow data series to yellow color legend, green to green.

Sometimes one or two of the three colors do not have any data, so this color is missing. Since I have bind PlatteBrushes in order red, yellow and green, I will get red color to show yellow or green data.

How can I solve this?

I am trying to create a drilldown chart now, which made this even harder.

Thanks a lot.

[Sia]

Hello Di,

The palette brushes functionality exposes a way to set custom colors for RadChart, but it does not keep the relation between a color and series. That is why when you don't have data for one of the series, the colors are changed /seems like the chart palette brushes are reset/.

However, there are several possible options to control this behavior, which depend on your scenario.

1. Keep using the PaletteBrushes collection for the control  and when the underlying data is changed, you can add/remove/alter the palette brushes accordingly, in order to preserve the logical correlation between some seriesX and ColorX.

2. Directly alter the visual attribites of a series mapping:

Copy Code

<telerik:RadChart.SeriesMappings>
               <chart:SeriesMapping>
                   <chart:SeriesMapping.SeriesDefinition>
                       <chart:AreaSeriesDefinition NullValueBehavior="{Binding NulValueBehavior}" ShowItemToolTips="True">
                           <chart:AreaSeriesDefinition.Appearance>
                               <chart:SeriesAppearanceSettings Foreground="Green" Stroke="Green">
                               </chart:SeriesAppearanceSettings>
                           </chart:AreaSeriesDefinition.Appearance>
                       </chart:AreaSeriesDefinition>
                   </chart:SeriesMapping.SeriesDefinition>
                   <chart:ItemMapping FieldName="Value" DataPointMember="YValue"></chart:ItemMapping>
                   <chart:ItemMapping FieldName="Date" DataPointMember="XValue"></chart:ItemMapping>
               </chart:SeriesMapping>
           </telerik:RadChart.SeriesMappings>

3. Check this example also. There you can see how all colors are preserved because when a series is not visible, it is actually hidden.

Please try some of these approaches according to your scenario and let us know how it goes.

Greetings,
Sia
the Telerik team

[Di]

Hi Sia,

For the three options you provided:

#1. I was using this for a chart which is not Drill Down Chart. I check the data source everytime to see if it contains red, yellow and green to decide whether to add the color to PaletteBrushes collection. This worked fine.

But now I am using a Drill Down Chart, the one just like the "By Age and Region" in your Drill Down Chart Demo, only the "Age" is changed to color. I have only one data series, grouped by Region and Color.

When I click on one of the data bar in ChartArea1, sometimes it doesn't contain red or yellow. But I didn't find a way to test what color is contained in this step. Do you have more suggestions on this?

#2. Since I met the error "Object reference not set to an instance of an object." in xaml, I have translated the SeriesMappings code to cs file instead. Now I didn't find the counterpart for attribute AreaSeriesDefinition.

BTW, I was trying to use the code below according to code in demo xaml file. But this got error every time.
ChartArea1.SeriesDefinition.InteractivitySettings.SelectionScope = InteractivityScope.Item;
ChartArea1.SeriesDefinition.InteractivitySettings.SelectionMode = ChartSelectionMode.Single;

Only code below worked. But this makes the interactivity available to all three chart areas.
Chart.DefaultSeriesDefinition.InteractivitySettings.SelectionScope = InteractivityScope.Item;
Chart.DefaultSeriesDefinition.InteractivitySettings.SelectionMode = ChartSelectionMode.Single;

Do you have any suggestion on this?

#3. To follow this demo, I have to use three data series for the three colors instead, right?
And still, I didn't see any code you have bind a specific color for any of the data series. I think I will meet the same problem with option #1. What do you say?

[Sia]

Hello Di Yang,

Attached is a possible solution of your problem where the exposed appearance API is used. Please review it and tell us whether it is appropriate for your scenario and the way your data is structured. If you click the first bar you will see how the colors are preserved despite that there is missing data.

Greetings,
Sia
the Telerik team

[Di]

Hi Sia,

I successfully bind three colors with three data series seperately with methods in the demo you provide.

The problem now is, our Drill Down Chart is connected with a RadGridView and able to show data selected by RadGridView Filter. I didn't find any built-in method to do this, so I read the filter and filtered datasource for Drill Down Chart. This worked fine when I put everything about about SeriesMappings in cs file.

Now with the xaml code you provide, the Drill Down Chart works fine without filtering. Once I filter anything in RadGridView, Drill Down Chart shows "Loading" forever.

But I didn't manage to write those code in cs file, as I mentioned before:

*********************

BTW, I was trying to use the code below according to code in demo xaml file. But this got error every time.
ChartArea1.SeriesDefinition.InteractivitySettings.SelectionScope = InteractivityScope.Item;
ChartArea1.SeriesDefinition.InteractivitySettings.SelectionMode = ChartSelectionMode.Single;

Only code below worked. But this makes the interactivity available to all three chart areas.
Chart.DefaultSeriesDefinition.InteractivitySettings.SelectionScope = InteractivityScope.Item;
Chart.DefaultSeriesDefinition.InteractivitySettings.SelectionMode = ChartSelectionMode.Single;

*********************

I met the same error with

ChartArea1.SeriesDefinition.Appearance.Fill = new SolidColorBrush(Color.FromArgb(255, 200, 200, 0));

How could I solve this?

Regards,
Di

[Sia]

Hi Di,

If you use series mapping as your case is, you need to set your interactivity settings as follows:

seriesMapping.SeriesDefinition.InteractivitySettings.SelectionScope = InteractivityScope.Item;

The same is true about the appearance:

seriesMapping.SeriesDefinition.Appearance.Fill = new SolidColorBrush(Colors.Red);
seriesMapping.SeriesDefinition.Appearance.Stroke = new SolidColorBrush(Colors.Red);
seriesMapping.SeriesDefinition.Appearance.PointMark.Stroke = new SolidColorBrush(Colors.Red);

Regarding the filtering: in this example you can see how the group descriptors from the GridView are applied to the Chart. The same approach should apply for filtering.

Please send us a sample project so we can give you more adequate advice.

Kind regards,
Sia
the Telerik team

[Di]

Hi Sia,

ChartArea1 is my seriesMapping.

so my code is the same as the one you provide.

But I met error every time with it and got through once comment it out.

Do you have any suggestion on this?

Thanks,
Di

[Sia]

Hi Di,

Unfortunately it is not possible to give you some specific recommendations without being able to see your code. Please send us a runnable small project reproducing your issue.

Thank you in advance,
Sia
the Telerik team

[Sivakumar]

Does zooming and scrolling works for double data?
Thing is i have tried for double data but i could not make zoom and scroll at x-axis, but same thing tried with date values, it working fine.

Could you please help me, 

[Evgenia]

Hi Sivakumar,

 The zooming and scrolling feature works both with datetime and double data. This is described in our documentation. The onliest restriction is to use the feature in databound scenarios only. 
Please review the topic. If the problem still persists you may open a formal support thread and send a project where this reproduces for us to further investigate the cause for it.

All the best,
Evgenia
the Telerik team