Hello to everybody,
I've got a gridview with a column Class that has its cell painted in a color stored into DB, I've also in the same window a Pie-Chart, It's possible to color each datapoint to the color present in the cell?
Thanks in advance
Paolo
I've got a gridview with a column Class that has its cell painted in a color stored into DB, I've also in the same window a Pie-Chart, It's possible to color each datapoint to the color present in the cell?
Thanks in advance
Paolo
12 Answers, 1 is accepted
0
Hi Paolo,
You can consider using the MVVM approach shown in this example to color-code each pie slice according to some data requirements: http://demos.telerik.com/silverlight/#Chart/MVVM
The needed template for the pie chart is:
Greetings,
Vladimir Milev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
You can consider using the MVVM approach shown in this example to color-code each pie slice according to some data requirements: http://demos.telerik.com/silverlight/#Chart/MVVM
The needed template for the pie chart is:
<Style TargetType="telerikCharting:Pie"> |
<Setter Property="Template" > |
<Setter.Value> |
<ControlTemplate TargetType="telerikCharting:Pie"> |
<Canvas> |
<Path x:Name="PART_DefiningGeometry" |
Data="{TemplateBinding FigurePath2}" |
Style="{TemplateBinding ItemStyle}"/> |
<Ellipse |
Clip="{TemplateBinding FigurePath3}" |
Fill="{StaticResource PieMaskBrush}" |
Width="{TemplateBinding ItemActualWidth}" |
Height="{TemplateBinding ItemActualHeight}"/> |
<telerikCharting:SeriesItemLabel x:Name="PART_SeriesItemLabel" |
Content="{TemplateBinding SeriesItemLabelText}" |
Visibility="{TemplateBinding SeriesItemLabelVisibility}" |
Style="{TemplateBinding SeriesItemLabelStyle}"/> |
<Canvas.RenderTransform> |
<ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" /> |
</Canvas.RenderTransform> |
<Canvas.Triggers> |
<EventTrigger RoutedEvent="Canvas.Loaded"> |
<EventTrigger.Actions> |
<BeginStoryboard> |
<Storyboard |
BeginTime="00:00:00.5" |
x:Name="PART_Storyboard"> |
<DoubleAnimation |
To="1" |
Storyboard.TargetName="PART_AnimationTransform" |
Storyboard.TargetProperty="ScaleX" |
Duration="00:00:00.25" |
BeginTime="00:00:00.25"/> |
<DoubleAnimation |
To="1" |
Storyboard.TargetName="PART_AnimationTransform" |
Storyboard.TargetProperty="ScaleY" |
Duration="00:00:00.25" |
BeginTime="00:00:00.25"/> |
</Storyboard> |
</BeginStoryboard> |
</EventTrigger.Actions> |
</EventTrigger> |
</Canvas.Triggers> |
</Canvas> |
</ControlTemplate> |
</Setter.Value> |
</Setter> |
</Style> |
Greetings,
Vladimir Milev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Michele
Top achievements
Rank 2
answered on 10 Jul 2009, 08:28 AM
Hello Vladimir,
using Silverlight Spy 2 I got the style of the pie and successfully changed the portion color, as this :
Now I'm facing my last problem with the legend....
I tried using Fill="{Binding DataItem.GradeColor}" but they appears black... I think the ChartLegendItem won't bind directly to the DataItem object... to what should I point? in the MVVM example you've not got a legend...
Thanks again
Paolo
using Silverlight Spy 2 I got the style of the pie and successfully changed the portion color, as this :
<Style x:Name="chartStyle" TargetType="telerikCharting:Pie"> |
<Setter Property="Template"> |
<Setter.Value> |
<ControlTemplate TargetType="telerikCharting:Pie"> |
<Canvas> |
<Path x:Name="PART_DefiningGeometry" Data="{TemplateBinding FigurePath2}" Style="{TemplateBinding ItemStyle}" /> |
<Ellipse Clip="{TemplateBinding FigurePath3}" Fill="{Binding DataItem.GradeColor}" Width="{TemplateBinding ItemActualWidth}" Height="{TemplateBinding ItemActualHeight}" /> |
<telerikCharting:SeriesItemLabel x:Name="PART_SeriesItemLabel" Content="{TemplateBinding SeriesItemLabelText}" Visibility="{TemplateBinding SeriesItemLabelVisibility}" Style="{TemplateBinding SeriesItemLabelStyle}" /> |
<Canvas.RenderTransform> |
<ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" /> |
</Canvas.RenderTransform> |
<Canvas.Triggers> |
<EventTrigger RoutedEvent="Canvas.Loaded"> |
<EventTrigger.Actions> |
<BeginStoryboard> |
<Storyboard BeginTime="00:00:00.5" x:Name="PART_Storyboard"> |
<DoubleAnimation To="1" Storyboard.TargetName="PART_AnimationTransform" Storyboard.TargetProperty="ScaleX" Duration="00:00:00.25" BeginTime="00:00:00.25" /> |
<DoubleAnimation To="1" Storyboard.TargetName="PART_AnimationTransform" Storyboard.TargetProperty="ScaleY" Duration="00:00:00.25" BeginTime="00:00:00.25" /> |
</Storyboard> |
</BeginStoryboard> |
</EventTrigger.Actions> |
</EventTrigger> |
</Canvas.Triggers> |
</Canvas> |
</ControlTemplate> |
</Setter.Value> |
</Setter> |
</Style> |
Now I'm facing my last problem with the legend....
<Style TargetType="telerikCharting:ChartLegendItem" x:Name="chartLegendItemStyle"> |
<Setter Property="Foreground" Value="#FFFFFF" /> |
<Setter Property="MarkerStrokeThickness" Value="2" /> |
<Setter Property="Template"> |
<Setter.Value> |
<ControlTemplate TargetType="telerikCharting:ChartLegendItem"> |
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top"> |
<Grid.ColumnDefinitions> |
<ColumnDefinition Width="Auto" /> |
<ColumnDefinition /> |
</Grid.ColumnDefinitions> |
<Rectangle x:Name="PART_LegendItemMarker" Height="15" Width="30" Fill="{Binding DataItem.GradeColor}" StrokeThickness="{TemplateBinding MarkerStrokeThickness}" RadiusX="2" RadiusY="2" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0,0,0,5" Style="{TemplateBinding ItemStyle}" /> |
<TextBlock Grid.Column="1" Padding="0" Margin="5,5,5,5" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Label}" /> |
</Grid> |
</ControlTemplate> |
</Setter.Value> |
</Setter> |
</Style> |
I tried using Fill="{Binding DataItem.GradeColor}" but they appears black... I think the ChartLegendItem won't bind directly to the DataItem object... to what should I point? in the MVVM example you've not got a legend...
Thanks again
Paolo
0
Hello Paolo,
Unfortunately the legend item does not provide access to the DataItem. We have logged this feature request and will try to implement it for the next release. I am afraid I cannot give you a very good work-around except setting the LegendDisplayMode of each series to None and manually populating the legend.
Sincerely yours,
Vladimir Milev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Unfortunately the legend item does not provide access to the DataItem. We have logged this feature request and will try to implement it for the next release. I am afraid I cannot give you a very good work-around except setting the LegendDisplayMode of each series to None and manually populating the legend.
Sincerely yours,
Vladimir Milev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jarrod
Top achievements
Rank 1
answered on 13 Jul 2009, 03:50 PM
Setting a brush to DataItem.GradeColor is nice, but how do you set the brush to a true 'custom' StaticResource for each ItemMapping? That is, what if you want to specify Student1.MathGrade = RedBrush; Student1.LanguageGrade = BlueBrush; Student1.Physics = OrangeBrush; instead of the automated point series Binding of DataItem.GradeColor?
0
Hello Jarrod,
If I have understood you correctly you are trying to bind the color of each item depending on the type of grade the student is in (eg Math, Physics, Language...)? In that case you should simply change the GradeColor (inside the viewmodel class) based on this logic and the custom colors will show.
Regards,
Vladimir Milev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
If I have understood you correctly you are trying to bind the color of each item depending on the type of grade the student is in (eg Math, Physics, Language...)? In that case you should simply change the GradeColor (inside the viewmodel class) based on this logic and the custom colors will show.
Regards,
Vladimir Milev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
PW
Top achievements
Rank 1
answered on 15 Jul 2009, 01:51 PM
Thank you Vladimir. I understand what you are saying, and there are good examples of how to do that in code behind, but what about declaritively in XAML? I cannot create the RadChart or any of its required peers in code for my requirements, thus I need all settings in XAML, including fuill control over the DataItem.GradeColor. Can this be done in with the RadChart?
I have a style as follows that I need to change the GradeColor in per item (eg. Language, Physics, Math) for an object:
I have a style as follows that I need to change the GradeColor in per item (eg. Language, Physics, Math) for an object:
<Style x:Name="PieSymbolItemStyle" TargetType="telerikCharting:Pie"> | |
<Setter Property="Template"> | |
<Setter.Value> | |
<ControlTemplate TargetType="telerikCharting:Pie"> | |
<Canvas> | |
<Path x:Name="PART_DefiningGeometry" | |
Data="{TemplateBinding FigurePath2}" | |
Style="{TemplateBinding ItemStyle}"/> | |
<Ellipse Clip="{TemplateBinding FigurePath3}" | |
Fill="{Binding DataItem.GradeColor}" | |
Width="{TemplateBinding ItemActualWidth}" | |
Height="{TemplateBinding ItemActualHeight}"/> | |
<telerikCharting:SeriesItemLabel x:Name="PART_SeriesItemLabel" | |
Content="{TemplateBinding SeriesItemLabelText}" | |
Visibility="{TemplateBinding SeriesItemLabelVisibility}" | |
Style="{TemplateBinding SeriesItemLabelStyle}"/> | |
<Canvas.RenderTransform> | |
<ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" /> | |
</Canvas.RenderTransform> | |
<Canvas.Triggers> | |
<EventTrigger RoutedEvent="Canvas.Loaded"> | |
<EventTrigger.Actions> | |
<BeginStoryboard> | |
<Storyboard | |
BeginTime="00:00:00.5" | |
x:Name="PART_Storyboard"> | |
<DoubleAnimation | |
To="1" | |
Storyboard.TargetName="PART_AnimationTransform" | |
Storyboard.TargetProperty="ScaleX" | |
Duration="00:00:00.25" | |
BeginTime="00:00:00.25"/> | |
<DoubleAnimation | |
To="1" | |
Storyboard.TargetName="PART_AnimationTransform" | |
Storyboard.TargetProperty="ScaleY" | |
Duration="00:00:00.25" | |
BeginTime="00:00:00.25"/> | |
</Storyboard> | |
</BeginStoryboard> | |
</EventTrigger.Actions> | |
</EventTrigger> | |
</Canvas.Triggers> | |
</Canvas> | |
</ControlTemplate> | |
</Setter.Value> | |
</Setter> | |
</Style> | |
Here is the defaultseriesdefintion that I would like to specify a style for: | |
<telerikControls:RadChart.DefaultSeriesDefinition> | |
<telerikCharting:PieSeriesDefinition | |
LegendDisplayMode="None" | |
ShowItemToolTips="True" | |
ShowItemLabels="True" | |
LabelOffset="0.5" | |
SeriesItemLabelStyle="{StaticResource PieSymbolItemLabelStyle}" | |
ItemStyle="{StaticResource PieSymbolItemStyle}"> | |
</telerikCharting:PieSeriesDefinition> | |
</telerikControls:RadChart.DefaultSeriesDefinition> | |
<telerikControls:RadChart.SeriesMappings> | |
<telerikCharting:SeriesMapping> | |
<telerikCharting:SeriesMapping.ItemMappings> | |
<telerikCharting:ItemMapping FieldName="Key" DataPointMember="Label"></telerikCharting:ItemMapping> | |
<telerikCharting:ItemMapping FieldName="Value" DataPointMember="YValue"></telerikCharting:ItemMapping> | |
</telerikCharting:SeriesMapping.ItemMappings> | |
</telerikCharting:SeriesMapping> | |
</telerikControls:RadChart.SeriesMappings> | |
0
Hi Darcy Vaughan,
I believe you only need to create the ViewModel class or pass it via a web service. The ViewModel class contains all the logic within itself that sets the appropriate fill colors. Once you have created a collection of viewmodel classes you can simply bind the ItemsSource property of RadChart to the sollection via a binding in XAML. If you don't want to have absolutely any code-behind then you may consider creating a factory class which creates the ViewModel collection based on the response of a web service so you can set that with a xaml binding as well. Generally speaking all coloring logic should be encapsulated within the ViewModel class and it should know how to convert your data to the appropriate brush.
Hope this helps.
Kind regards,
Vladimir Milev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
I believe you only need to create the ViewModel class or pass it via a web service. The ViewModel class contains all the logic within itself that sets the appropriate fill colors. Once you have created a collection of viewmodel classes you can simply bind the ItemsSource property of RadChart to the sollection via a binding in XAML. If you don't want to have absolutely any code-behind then you may consider creating a factory class which creates the ViewModel collection based on the response of a web service so you can set that with a xaml binding as well. Generally speaking all coloring logic should be encapsulated within the ViewModel class and it should know how to convert your data to the appropriate brush.
Hope this helps.
Kind regards,
Vladimir Milev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jarrod
Top achievements
Rank 1
answered on 17 Jul 2009, 01:52 PM
The ViewModel approach is clear. However, what atout the question of how to alter the DataItem.GradeColor, or any other DataItem via XAML per Pie wedge? That is, how to you, in XAML express DataItem.GradeColor = "Red" DataItem.GradeColor = "Blue" DataItem.GradeColor = "Green"
0
Hi Jarrod,
You cannot express DataItem.GradeColor = "Red" in XAML. That is simply not possible.
Regards,
Evtim
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
You cannot express DataItem.GradeColor = "Red" in XAML. That is simply not possible.
Regards,
Evtim
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Grtjn
Top achievements
Rank 1
answered on 30 Mar 2010, 07:53 AM
Hi Vladimir and everyone else,
Have you any idea when the feature for setting the legend color will be available?
Kind Regards,
Gertjan
Have you any idea when the feature for setting the legend color will be available?
Unfortunately the legend item does not provide access to the DataItem. We have logged this feature request and will try to implement it for the next release. I am afraid I cannot give you a very good work-around except setting the LegendDisplayMode of each series to None and manually populating the legend. |
Kind Regards,
Gertjan
0
Hello Grtjn,
Please, review the Custom Palette example in our online QSF and let me know if that will cover your use case. If not, please, provide details.
All the best,
Joshua
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Please, review the Custom Palette example in our online QSF and let me know if that will cover your use case. If not, please, provide details.
All the best,
Joshua
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Grtjn
Top achievements
Rank 1
answered on 01 Apr 2010, 12:42 PM
Hi,
I was able to solve this problem.
So for now i do not need any more help on this.
Regards,
Gertjan
I was able to solve this problem.
So for now i do not need any more help on this.
Regards,
Gertjan