This question is locked. New answers and comments are not allowed.
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.
Right now Just tell me whether it is technically possible or not.
7 Answers, 1 is accepted
0
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:
I hope this helps.
Kind regards,
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!
0
Rahul
Top achievements
Rank 2
answered on 15 Mar 2011, 05:44 AM
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.
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.
0
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,
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
0
Rahul
Top achievements
Rank 2
answered on 18 Mar 2011, 03:27 PM
Thanx for reply Polina.
Can u please give me one example. So i can implement this into my chart.
Thanks in advance.
Can u please give me one example. So i can implement this into my chart.
Thanks in advance.
0
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:
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,
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
0
Rahul
Top achievements
Rank 2
answered on 24 Mar 2011, 06:57 AM
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
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
0
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,
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