This is a migrated thread and some comments may be shown as answers.

Stly for scatter chart

4 Answers 97 Views
Chart
This is a migrated thread and some comments may be shown as answers.
charu
Top achievements
Rank 1
charu asked on 11 Jul 2010, 12:13 PM
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 :

 

 

 

<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

Sort by
0
Giuseppe
Telerik team
answered on 14 Jul 2010, 02:49 PM
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:

<UserControl x:Class="SilverlightApplication1.MainPage"
    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?
0
Giuseppe
Telerik team
answered on 24 Jan 2011, 05:27 PM
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
<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
Tags
Chart
Asked by
charu
Top achievements
Rank 1
Answers by
Giuseppe
Telerik team
andre king
Top achievements
Rank 1
Share this question
or