Knowledgebase: Tooltips
Adding draggable RolloverModifier style lines with the VerticalSliceModifier
Posted by Andrew BT on 15 July 2015 11:07 AM

Tooltips may be added to the SciChartSurface using the VerticalSliceModifier. This is a ChartModifier attached to the SciChartSurface.ChartModifier property. You can see a list of available ChartModifiers in the article ChartModifiers Provided by SciChart.

What does the VerticalSliceModifier Do?

The VerticalSliceModifier allows showing one or more vertical lines on the chart and a tooltip on data-points of all series under the line. The VerticalSliceModifier is very similar in behaviour to the RolloverModifier, but allows one or more lines to be positioned and optionally dragged by the user. 

To see a live Silverlight Example of the VerticalSliceModifier, please click here.

Adding the VerticalSliceModifier to the Chart

Please see the code sample below for how to add a VerticalSliceModifier to a SciChartSurface. 

  • You must declare a VerticalSliceModifier in the SciChartSurface.ChartModifier (or, inside a ModifierGroup)
  • If you wish to add a vertical line, please add a VerticalLineAnnotation to the VerticalSliceModifier.VerticalLines property
  • If you wish to remove a vertical line, please remove it from the VerticalSliceModifier.VerticalLines property
  • For further guidance, please see our Example - Series Vertical Slices

C#

public partial class SeriesVerticalSlicesExample : UserControl
{
	private readonly Random _random = new Random();
	
	public SeriesVerticalSlicesExample()
	{
		InitializeComponent();
		Loaded += OnLoaded;
	}

	private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
	{
		var dataSeries0 = new XyDataSeries<double, double> { SeriesName = "Curve A" };
		var dataSeries1 = new XyDataSeries<double, double> { SeriesName = "Curve B" };
		var dataSeries2 = new XyDataSeries<double, double> { SeriesName = "Curve C" };

		var data1 = DataManager.Instance.GetSinewave(0.8, 0.0, 1000, 3);
		var data2 = DataManager.Instance.GetSinewave(0.5, -1.0, 1000, 5);
		var data3 = DataManager.Instance.GetSinewave(0.7, 0.75, 1000, 7);

		dataSeries0.Append(data1.XData, data1.YData);
		dataSeries1.Append(data2.XData, data2.YData);
		dataSeries2.Append(data3.XData, data3.YData);

		using (this.sciChart.SuspendUpdates())
		{
			sciChart.RenderableSeries[0].DataSeries = dataSeries0;
			sciChart.RenderableSeries[1].DataSeries = dataSeries1;
			sciChart.RenderableSeries[2].DataSeries = dataSeries2;
		}

		sciChart.ZoomExtents();
	}

	private void OnCreateSliceClick(object sender, RoutedEventArgs e)
	{
		MouseButtonEventHandler mouseClick = null;
		mouseClick = (s, arg) =>
			 {
				 this.MouseLeftButtonUp -= mouseClick;
				 hintText.Visibility = Visibility.Collapsed;
				 var mousePoint = arg.GetPosition((UIElement) this.sciChart.GridLinesPanel).X;

				 var slice = new VerticalLineAnnotation()
				 {                         
					 X1 = this.sciChart.XAxis.GetDataValue(mousePoint),
					 Style = (Style)Resources["sliceStyle"]
				 };

				 sliceModifier.VerticalLines.Add(slice);
			 };

		hintText.Visibility = Visibility.Visible;
		this.MouseLeftButtonUp += mouseClick;
	}

	private void OnDeleteSelectedSliceClick(object sender, RoutedEventArgs e)
	{
		var selectedSlices = sliceModifier.VerticalLines.Where(annotation => annotation.IsSelected).ToList();

		foreach (var slice in selectedSlices)
		{
			sciChart.Annotations.Remove(slice);
		}
	}
}



XAML

    <Grid s:ThemeManager.Theme="ExpressionDark">

        <Grid.Resources>
            <Style x:Key="sliceStyle" TargetType="s:VerticalLineAnnotation">
                <Setter Property="ShowLabel" Value="True" />
                <Setter Property="Stroke" Value="#427EF6" />
                <Setter Property="IsEditable" Value="True" />
                <Setter Property="LabelPlacement" Value="Axis" />
            </Style>
        </Grid.Resources>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <s:SciChartSurface Name="sciChart"
                           Grid.Row="1">

            <s:SciChartSurface.RenderableSeries>
                <s:FastLineRenderableSeries SeriesColor="#E6F867"
                                            StrokeDashArray="7 4"
                                            StrokeThickness="3" />
                <s:FastLineRenderableSeries SeriesColor="#4EDE4B"
                                            StrokeDashArray="5 8"
                                            StrokeThickness="3" />
                <s:FastLineRenderableSeries SeriesColor="#E91FE9"
                                            StrokeDashArray="7 9"
                                            StrokeThickness="3" />
            </s:SciChartSurface.RenderableSeries>

            <s:SciChartSurface.XAxis>
                <s:NumericAxis DrawMajorBands="True" GrowBy="0.1, 0.1" />
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.YAxis>
                <s:NumericAxis GrowBy="0.1, 0.1" />
            </s:SciChartSurface.YAxis>

            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <s:VerticalSliceModifier Name="sliceModifier">
                        <s:VerticalSliceModifier.VerticalLines>
                            <s:VerticalLineAnnotation Style="{StaticResource sliceStyle}" X1="1" />
                            <s:VerticalLineAnnotation Style="{StaticResource sliceStyle}" X1="3" />
                            <s:VerticalLineAnnotation Style="{StaticResource sliceStyle}" X1="5" />
                            <s:VerticalLineAnnotation Style="{StaticResource sliceStyle}" X1="7" />
                            <s:VerticalLineAnnotation Style="{StaticResource sliceStyle}" X1="9" />
                        </s:VerticalSliceModifier.VerticalLines>
                    </s:VerticalSliceModifier>
                    <s:CursorModifier ReceiveHandledEvents="True" />
                    <s:LegendModifier ShowLegend="True" Orientation="Horizontal" LegendPlacement="Top" Margin="0,0,0,5" />
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>

        </s:SciChartSurface>

        <!--  Toolbar panel  -->
        <StackPanel Grid.Row="0"
                    Margin="2,4"
                    HorizontalAlignment="Left"
                    Orientation="Horizontal">

            <Button Margin="2" Click="OnCreateSliceClick">
                <StackPanel Orientation="Horizontal">
                    <Image />
                    <TextBlock Margin="3" Text="Add Slice" />
                </StackPanel>
            </Button>

            <Button Margin="2" Click="OnDeleteSelectedSliceClick">
                <StackPanel Orientation="Horizontal">
                    <Image />
                    <TextBlock Margin="3" Text="Delete Selected Slice" />
                </StackPanel>
            </Button>

            <TextBlock x:Name="hintText" Visibility="Collapsed" Margin="5" Foreground="White" Text="Now Click on the Chart..."/>

        </StackPanel>

    </Grid>



Properties of the VerticalSliceModifier

Changing when Tooltips are Shown

You may change when the VerticalSliceModifeir Tooltips are shown using the VerticalSliceModifeir.ShowTooltipsOn property. Please see the ShowTooltipOptions enum for available options.

Showing or Hiding the XAxis Label

You may show or hide the XAxis Label via the VerticalSliceModifier.ShowAxisLabels property. 

Styling the VerticalSliceModifier 

<ControlTemplate x:Key="RolloverMarkerTemplate">
    <Rectangle Width="12" Height="12" Fill="Green" Stroke="LimeGreen" StrokeThickness="2"/>
</ControlTemplate>

 <s:FastLineRenderableSeries RolloverMarkerTemplate="{StaticResource RolloverMarkerTemplate}">

Which results in this 

Changing the VerticalSliceModifier Tooltip ControlTemplate

Each series displays a single tooltip with Y-value You can change the ControlTemplate for the tooltips shown as follows:

<!-- The Tooltip Control Template, Binds to SeriesInfo -->
<ControlTemplate x:Key="LabelTemplate" TargetType="SciChart:TemplatableControl">
	<Grid>
		<Ellipse Fill="#77FFFFFF"
				 Stroke="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}"
				 StrokeThickness="2" />
		<StackPanel Margin="20">
			<TextBlock FontSize="12"
					   FontWeight="Bold"
					   Foreground="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}"
					   Text="{Binding SeriesName}" />
			<TextBlock FontSize="11"
					   Foreground="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}"
					   Text="{Binding Value}" />
		</StackPanel>
	 </Grid>
</ControlTemplate>

<!-- and set it for RolloverModifier like defined above: -->
<SciChart:VerticalSliceModifier
	DrawVerticalLine="True"
	SourceMode="AllSeries" 
	ShowTooltipOn="MouseHover" 
	TooltipLabelTemplate="{StaticResource LabelTemplate}"/>

Which results in the following:

Styling the Vertical Lines

The vertical lines themselves are provided by the VerticalLineAnnotation, which works in unison with the VerticalSliceModifier to place tooltips over the Vertical Lines. 

For instance, the following style applied to VerticalLineAnnotation sets the Stroke, StrokeThickness, ShowLabel on the XAxis, LabelPlacement. 

<Style x:Key="sliceStyle" TargetType="s:VerticalLineAnnotation">
   <Setter Property="ShowLabel" Value="True" />
   <Setter Property="Stroke" Value="#427EF6" />
   <Setter Property="StrokeThickness" Value="1" />
   <Setter Property="IsEditable" Value="True" />
   <Setter Property="LabelPlacement" Value="Axis" />
</Style>

For more information, see the properties for the VerticalLineAnnotation type.

 

 

 

 

 

(2 vote(s))
Helpful
Not helpful

Comments (0)

CONTACT US

Not sure where to start? Contact us, we are happy to help!


CONTACT US

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL. Email: Legal Company Number: 07430048, VAT Number: 101957725