Mark Pins on Line Series chart with multiple Y axis.

8 posts, 0 answers
  1. Rahul
    Rahul avatar
    118 posts
    Member since:
    Feb 2011

    Posted 09 Mar 2011 Link to this post

    I want pin marking on line series chart. Check out the attached image for more information.
    Right now Just tell me whether it is technically possible or not.
  2.
  3. Missing user
    Missing user avatar

    Posted 14 Mar 2011 Link to this post

    Hello Rahul,

    In order to position point marks separated from the line series, you will need ScatterSeriesDefinition. In this case you can re-template the scatter series and use Expression Blend to create pin point marks. Here is an example how to re-template the scatter series:

    scatterSeries.SeriesDefinition = new ScatterSeriesDefinition()
    {
        ItemStyle = this.Resources["CustomScatter"] as Style,
        PointSize = 10
    };

    <Style x:Key="CustomScatter" TargetType="telerikCharting:ScatterPoint">
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerikCharting:ScatterPoint">
                    <Canvas x:Name="PART_MainContainer">
                        <telerikCharting:PointMark x:Name="PART_PointMark"
                                                   Canvas.Top="{TemplateBinding StartPointY}"
                                                   PointMarkCanvasLeft="{TemplateBinding PointMarkCanvasLeft}"
                                                   PointMarkCanvasTop="{TemplateBinding PointMarkCanvasTop}"
                                                   ShapeStyle="{TemplateBinding PointMarkShapeStyle}"
                                                   Style="{StaticResource CustomStyle}"
                                                   Size="{TemplateBinding PointSize}"/>
     
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
     
    <Style x:Key="CustomStyle" TargetType="telerikCharting:PointMark">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikCharting:PointMark">
                    <Canvas >
                        <Path x:Name="PART_PointMarkPath"
                            Canvas.Left="{TemplateBinding PointMarkCanvasLeft}"
                            Canvas.Top="{TemplateBinding PointMarkCanvasTop}"
                            Style="{TemplateBinding ShapeStyle}"
                            Width="{TemplateBinding Size}"
                            Height="{TemplateBinding Size}"
                            Stretch="Fill" Data="M19.759212,32.546707 L22.357349,42.203297 L20.426031,42.722923 L17.827894,33.066338 z M12.734299,0.5 C17.704861,0.5 21.734299,6.0964408 21.734299,13 C21.734299,14.941626 21.415564,16.779858 20.8468,18.419266 L20.769459,18.629004 L21.019266,18.519783 C27.336531,15.819165 32.456192,15.108124 33.599651,17.078552 C35.12426,19.705788 29.002724,26.1052 19.926815,31.372034 C10.850907,36.63887 2.2574883,38.77869 0.73287749,36.151451 C-0.5058682,34.016823 3.3030376,29.39197 9.6430359,24.907684 L9.7812748,24.810713 L9.6397963,24.741503 C6.1936717,22.98901 3.7342985,18.393406 3.7342987,13 C3.7342985,6.0964408 7.7637358,0.5 12.734299,0.5 z" RenderTransformOrigin="0.588954529106497,0.253846776944442">
                            <Path.RenderTransform>
                                <CompositeTransform Rotation="30.127" />
                            </Path.RenderTransform>
                        </Path>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    I hope this helps.

    Kind regards,
    Polina
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  5. Rahul
    Rahul avatar
    118 posts
    Member since:
    Feb 2011

    Posted 15 Mar 2011 Link to this post

    First of all thanks for giving ur valuable time to reply.
    My requirement is different.
    1] First requirement is to use line series and not Scatter series.
    2] Whenever the user clicks on chart area, I want a Pin to be inserted at that location.
    3]That Pin should have ToolTip facility to show x and y co-ordinates.

    Check out the attachment for more info on pins. Attached image is Adobe Flex Line Series which
    provides Pin marker facility.
  7. Missing user
    Missing user avatar

    Posted 18 Mar 2011 Link to this post

    Hello Rahul,

    At present, the RadChart control does not support this feature out of the box.
    You can make a combination with the ChartArea.PlotAreaMouseLeftButtonDown / Up events to specify the AxisX and AxisY data values and the framework-provided routed events to position the needed visual mark over the chart area.

    All the best,
    Polina
    the Telerik team
    Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!
  9. Rahul
    Rahul avatar
    118 posts
    Member since:
    Feb 2011

    Posted 18 Mar 2011 Link to this post

    Thanx for reply Polina.
    Can u please give me one example. So i can implement this into my chart.
    Thanks in advance.
  11. Missing user
    Missing user avatar

    Posted 23 Mar 2011 Link to this post

    Hello Rahul,

    As I mentioned in the previous answer, this feature is not supported in the RadChart control. You can achieve a similar result by using the ChartArea.PlotAreaMouseLeftButtonDown and the framework-provided routed events. For example:
    private bool isPlotAreaClicked = false;
     
    public double ClickedXValueData { get; set; }
     
    public double ClickedYValueData { get; set; }
     
    public CustomMarksPosition()
    {
        InitializeComponent();
        ...
        this.radChart.DefaultView.ChartArea.PlotAreaMouseLeftButtonDown +=
            new EventHandler<PlotAreaMouseEventArgs>(ChartArea_PlotAreaMouseLeftButtonDown);
        this.radChart.AddHandler(MouseLeftButtonDownEvent,
            new MouseButtonEventHandler(MouseLeftButtonDownEventHandler), true);
    }
     
    //Executes first
    public void ChartArea_PlotAreaMouseLeftButtonDown(object sender, PlotAreaMouseEventArgs e)
    {
        ClickedXValueData = e.XValue;
        ClickedYValueData = e.YValue;
        isPlotAreaClicked = true;
    }
     
    //Executes second
    public void MouseLeftButtonDownEventHandler(object sender, MouseButtonEventArgs e)
    {
        if (isPlotAreaClicked)
        {
            Point pointPosition = e.GetPosition(sender as UIElement);
     
            double XCoordinate = pointPosition.X;
            double YCoordinate = pointPosition.Y;
     
            //Put you logic for generating an Image and putting it on the screen by using the returned coordinates
            //You also have the AxisX and AxisY data values of the point in the chart
     
            isPlotAreaClicked = false;
        }
    }

    In the MouseLeftButtonDownEventHandler you can dynamically generate an Image and position it on the screen. You can get the point position by e.GetPosition().
    In the ChartArea_PlotAreaMouseLeftButtonDown event you can get the chart data values for the clicked point. I hope this helps.

    Greetings,
    Polina
    the Telerik team
    Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!
  13. Rahul
    Rahul avatar
    118 posts
    Member since:
    Feb 2011

    Posted 24 Mar 2011 Link to this post

    Polina Sorry for bothering you a lot.
    But really i dont how to put mark pin image on the clicked area of the
    chart. I will be very thankful if you provide me the logic for inserting image at the particular
    clicked area on the chart.
    I want to put the attached image on the chart when user click on the plot area.
    Also That marked area with image should have Tooltip facility to show
    corresponding X and Y values of the chart.
    Check out the attached image for Mark Pin
  14.
  15. Missing user
    Missing user avatar

    Posted 30 Mar 2011 Link to this post

    Hello Rahul,

    You can find the implemented example in the attached file. Note that each generated image is positioned according to the coordinates provided by the MouseLeftButtonDownEventHandler, and the ToolTip content shows the AxisX and AxisY values.

    Regards,
    Polina
    the Telerik team
    Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!
Back to Top