Mark Pins on Line Series chart with multiple Y axis.

[Rahul]

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.

[Missing User]

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

[Rahul]

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.

[Missing User]

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

[Rahul]

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

[Missing User]

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

[Rahul]

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

[Missing User]

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