ChartView DataPoint Popup requirement

[N]

Hi,

I have a requirement such that when a user selects a datapoint on the RadCartesian Chartview LineSeries/ScatterLineSeries/ScatterPointSeries.
1) There would be a popup close to the datapoint and  pointing to that selected datapoint.
2) The popup would be visible until I hit close button on the popup.
3) The popup can be dragged anywhere in the chart area but it will always be pointing to the selected point.

Please let me know what points of the above three are possible in Teleriks chartview. Would this be acheivable by using annotations or RadDiagrams?
Also is this possible to do this with RadWindow (the only thing is how to point an arrow to the datapoint from the RadWindow maybe using ConversionAPI?).

Thanks

[N]

Hi,
I tried the following using annotations, adding annotation on selecting datapoint and removing annotation on clicking close button.
Please see attached images....
Questions
1) Is there a better way to do this?
2) Is there a way to move annotation box around? with arrow still pointing to the datapoint
3) The annotation text when exceeds the chart area.. it is cut off, i tried to set Zindex of annotation to 2000, it still got cut off..
How to show the full annotaton even if it crosses the chart area? As you can see in Annotations2.png.

xaml dataTemplate

 

 

 

<DataTemplate x:Key="AnnotationTemplate">

 

 

 

 

<StackPanel>

 

 

 

 

<Grid>

 

 

 

 

<Polygon Points="0,0 50,0 50,50 30,50 25,60 20,50 0,50"

 

 

 

Height="28"

 

 

 

Width="40"

 

 

 

Stroke="Black"

 

 

 

StrokeThickness="0.75"

 

 

 

Stretch="Fill"

 

 

 

Fill="{StaticResource StrokeAccentBrush}" />

 

 

 

 

<TextBlock Text="{Binding}" Foreground="White" Height="28" Width="45" Margin="0,8,0,0"

 

 

 

HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center"

 

 

 

FontFamily="Segoe UI Light" FontSize="11"/>

 

 

 

 

</Grid>

 

 

 

 

<Ellipse Height="10" Width="10" Stroke="{StaticResource StrokeAccentBrush}" StrokeThickness="1" Fill="White" />

 

 

 

 

<Button Content="Close" IsEnabled="true" IsHitTestVisible="true" Click="Button_Click"/>

 

 

 

 

</StackPanel>

 

 

 

 

</DataTemplate>

 

Code

 

 

var annotation = new CartesianCustomAnnotation{

 

HorizontalAxis = chart.HorizontalAxis,

HorizontalValue = dataItem.X,

VerticalAxis = chart.VerticalAxis,

VerticalValue = dataItem.Y,

ClipToPlotArea =

 

false,

 

VerticalOffset = 5,

HorizontalAlignment =

 

HorizontalAlignment.Center,

 

VerticalAlignment =

 

VerticalAlignment.Top,

 

Content = dataItem.Y

 

};

 

 

 

var template = (DataTemplate)TryFindResource("AnnotationTemplate");

 

annotation.ContentTemplate = template;

chart.Annotations.Add(annotation);

Thanks

[Missing User]

Hi,

Onto your questions:

1. Using annotations is probably the most suitable solution in this case.

2. This type of functionality is not supported.

3. You should set both each annotation's ClipToPlotArea and the chart's ClipToBounds properties to false.

Best Regards,
Ivan N.
the Telerik team

[N]

Hi Ivan,

Thanks for your reply, I tried ClipToPlotArea = false, ClipToBounds = false and the annotation now goes up the end of the chart area, which is different than before. But if the text is large, it still cuts off. So How do I get the text to go beyond the chart area, like Tooltip does. Or any way to move the annotation location?

Thanks

[Missing User]

Hello,

Currently, you limit the width of the TextBlock that holds the text to 45 pixels. If you delete the Width property, the TextBlock will resize itself automatically and the text won't be cut off. Note, however, that the Polygon that servers as background for the TextBlock also has a fixed width and this will result in the text going outside the Polygon's boundaries. If you want to prevent this, you should also remove the Width property of the Polygon. Once you remove both Width properties from the XAML file, each annotation will automatically resize itself to fit its contents.

Greetings,
Ivan N.
the Telerik team

[N]

 

 

 

<DataTemplate x:Key="AnnotationTemplate">

 

 

 

 

<Grid x:Name="LayoutRoot" Background="White" MouseDown="Button_Click" >

 

 

 

 

<Grid.RowDefinitions>

 

 

 

 

<RowDefinition Height="*"/>

 

 

 

 

</Grid.RowDefinitions>

 

 

 

 

<Polygon Grid.Row="1" Points="0,0 50,0 50,50 30,50 25,60 20,50 0,50"

 

 

 

Height="25" StrokeThickness="0.5"

 

 

 

Stretch="Fill"

 

 

 

Fill="{Binding ., Converter={StaticResource CurveDataPointConverter}}" />

 

 

 

 

<TextBlock Grid.Row="1" Text="{Binding ., Converter={StaticResource CurveToolTipConverter}}"

 

 

 

Foreground="White" Height="20" Margin="0,0,0,0"

 

 

 

HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center"

 

 

 

FontFamily="Segoe UI Light" FontSize="11"/>

 

 

 

 

</Grid>

 

 

 

 

</DataTemplate>

 

 

 

var annotation = new CartesianCustomAnnotation

 

{

HorizontalAxis = chart.HorizontalAxis,

HorizontalValue = dataItem.X,

VerticalAxis = verticalAxis,

VerticalValue = dataItem.Y,

ClipToPlotArea =

 

false, ClipToBounds = false,

 

Visibility =

 

Visibility.Visible,

 

VerticalOffset = -0.2,

HorizontalAlignment =

 

HorizontalAlignment.Center,

 

VerticalAlignment =

 

VerticalAlignment.Top,

 

Content = scatterDataPoint,

ZIndex = 1000,

AllowDrop =

 

true,

 

};

 

 

var template = View.AnnotationTemplate;

it still cuts off using the above code. I removed the widths and it still cuts off. Let me know what else to do to fix this.



One more question on a different note, I am trying to drag the annotations, how can I get hold of the ChartViews Canvas inorder to use implement my own drag functionallity.

Thanks

 

[Missing User]

Hi,

I apologize for not being able to help. It's entirely possible that there's something I might be missing out. Therefore, it'd be best that you open a formal support ticket, which you are currently entitled to, so that you can send over a sample project where the issue is clearly demonstrated. Once that is done, you'll receive a response within 24 hours.

All the best,
Ivan N.
the Telerik team