Stly for scatter chart

5 posts, 0 answers
  1. charu
    charu avatar
    7 posts
    Member since:
    Jun 2010

    Posted 11 Jul 2010 Link to this post

    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,
  2. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 14 Jul 2010 Link to this post

    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
  3. andre king
    andre king avatar
    9 posts
    Member since:
    Sep 2009

    Posted 19 Jan 2011 Link to this post

    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?
  4. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 24 Jan 2011 Link to this post

    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>>
  5. andre king
    andre king avatar
    9 posts
    Member since:
    Sep 2009

    Posted 24 Jan 2011 Link to this post

    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
Back to Top