Hi
I am using a scatter chart and my requirement is to show some points in red color and others in blue (based on the condition )
on the same chart in only one y-axis.
I had the similar requirement for Bar Graph for that i created the style :
I need the style for Scatter chart also.
I am unable to do that :(.
Regards,
I am using a scatter chart and my requirement is to show some points in red color and others in blue (based on the condition )
on the same chart in only one y-axis.
I had the similar requirement for Bar Graph for that i created the style :
<Style x:Key="CustomStyle" TargetType="telerikCharting:Bar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerikCharting:Bar">
<Canvas>
<Rectangle x:Name="PART_DefiningGeometry"
Height="{TemplateBinding ItemActualHeight}"
Width="{TemplateBinding ItemActualWidth}"
Fill="{Binding DataItem.BarGraphColor}" />
<Canvas.RenderTransform>
<ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
</Canvas.RenderTransform>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I need the style for Scatter chart also.
I am unable to do that :(.
Regards,
4 Answers, 1 is accepted
0
Hi charu,
Currently it is not possible to customize the element in the default ScatterPoint element to achieve the desired effect but you can replace it with an Ellipse like this:
We have attached a sample application as well.
Regards,
Freddie
the Telerik team
Currently it is not possible to customize the element in the default ScatterPoint element to achieve the desired effect but you can replace it with an Ellipse like this:
<
UserControl
x:Class
=
"SilverlightApplication1.MainPage"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable
=
"d"
xmlns:mscorlib
=
"clr-namespace:System;assembly=mscorlib"
xmlns:demo
=
"clr-namespace:SilverlightApplication1"
d:DesignHeight
=
"300"
d:DesignWidth
=
"400"
>
<
UserControl.Resources
>
<
Style
x:Key
=
"CustomScatterPointStyle"
TargetType
=
"telerik:ScatterPoint"
>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"telerik:ScatterPoint"
>
<
Canvas
>
<!-- Note Canvas.Left should be equal to -Height/2 -->
<
Ellipse
Height
=
"10"
Width
=
"10"
Canvas.Left
=
"-5"
Canvas.Top
=
"{TemplateBinding StartPointY}"
Fill
=
"{Binding DataItem.GradeColor}"
/>
</
Canvas
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
</
UserControl.Resources
>
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"White"
>
<
telerik:RadChart
x:Name
=
"RadChart1"
/>
</
Grid
>
</
UserControl
>
We have attached a sample application as well.
Regards,
Freddie
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
andre king
Top achievements
Rank 1
answered on 19 Jan 2011, 04:56 PM
It seems that this method will draw the ellipse below where it should be. Setting the top of the canvas to the StartPointY means that the figure will not be centered - it needs to be set to StartPointY - Height/2.
I am having problems figuring out how to correct this. Do you have a suggestion?
I am having problems figuring out how to correct this. Do you have a suggestion?
0
Hi Andre,
Indeed you are correct -- in order to solve this problem you will need to create custom series type that inherits from Scatter series type (i.e. the pair CustomScatterPoint / CustomScatterSeriesDefinition) and you will need to introduce and calculate two new properties CustomScatterPoint.CanvasLeft / CanvasTop to position the ellipse properly. You can find attach a sample application to get you started.
Also, we have improved the default behavior of the ScatterPoint template and starting with the weekly internal build that will be released later today, you will not need to create custom series type at all -- you will be able to use the default ScatterPoint template customized like this:
XAML
C#
Hope this helps.
Greetings,
Giuseppe
the Telerik team
Indeed you are correct -- in order to solve this problem you will need to create custom series type that inherits from Scatter series type (i.e. the pair CustomScatterPoint / CustomScatterSeriesDefinition) and you will need to introduce and calculate two new properties CustomScatterPoint.CanvasLeft / CanvasTop to position the ellipse properly. You can find attach a sample application to get you started.
Also, we have improved the default behavior of the ScatterPoint template and starting with the weekly internal build that will be released later today, you will not need to create custom series type at all -- you will be able to use the default ScatterPoint template customized like this:
XAML
<
Grid
x:Name
=
"LayoutRoot"
>
<
Grid.Resources
>
<
Style
x:Key
=
"ScatterStyle"
TargetType
=
"telerik:ScatterPoint"
>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"telerik:ScatterPoint"
>
<
Canvas
x:Name
=
"PART_MainContainer"
>
<
telerik:PointMark
x:Name
=
"PART_PointMark"
Canvas.Top
=
"{TemplateBinding StartPointY}"
PointMarkCanvasLeft
=
"{TemplateBinding PointMarkCanvasLeft}"
PointMarkCanvasTop
=
"{TemplateBinding PointMarkCanvasTop}"
ShapeStyle
=
"{TemplateBinding PointMarkShapeStyle}"
Size
=
"{TemplateBinding PointSize}"
Fill
=
"{Binding DataItem.Color}"
/>
</
Canvas
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
</
Grid.Resources
>
<
telerik:RadChart
x:Name
=
"RadChart1"
>
</
telerik:RadChart
>
C#
public
partial
class
MainPage : UserControl
{
public
MainPage()
{
InitializeComponent();
var data =
new
List<ChartData>();
data.Add(
new
ChartData() { YValue = 10 });
data.Add(
new
ChartData() { YValue = 12 });
data.Add(
new
ChartData() { YValue = 16 });
data.Add(
new
ChartData() { YValue = 10 });
data.Add(
new
ChartData() { YValue = 12 });
data.Add(
new
ChartData() { YValue = 16 });
SeriesMapping sm =
new
SeriesMapping();
sm.ItemMappings.Add(
new
ItemMapping(
"YValue"
, DataPointMember.YValue));
sm.SeriesDefinition =
new
ScatterSeriesDefinition(){ ItemStyle =
this
.LayoutRoot.Resources[
"ScatterStyle"
]
as
Style};
RadChart1.SeriesMappings.Add(sm);
RadChart1.ItemsSource = data;
}
}
public
class
ChartData
{
public
double
YValue
{
get
;
set
;
}
public
SolidColorBrush Color
{
get
{
if
(
this
.YValue > 10)
return
new
SolidColorBrush(Colors.Green);
return
new
SolidColorBrush(Colors.Red);
}
}
}
Hope this helps.
Greetings,
Giuseppe
the Telerik team
Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
0
andre king
Top achievements
Rank 1
answered on 25 Jan 2011, 01:13 AM
Thanks very much for the reply. We may be able to wait until the next quarterly release, but good to know there is another immediate alternative.
Thanks again for the great support.
regards,
a
Thanks again for the great support.
regards,
a