Tag: RolloverModifier

Hello,

I would like to use the RolloverModifier to display a given datapoint’s identification (string) metadata. The solution suggested in this link on correlating metadata to datapoints seems promising, but for the fact that I have multiple charts to display simultaneously, hence I need multiple lookup arrays. I originally thought to use a ValueConverter that would manage lookup of the identification value based a chart view model instance code (ChartId) and the index provided in the XyzDataSeries. As control charts are instantiated, they register with the ValueConverter, which maintains a static lookup dictionary. In the XAML, the ZValue is passed as the value and the chartID is passed as a parameter to the ValueConverter. I have run into a couple key challenges, however:

1. ConverterParameters cannot be bound; hence I cannot bind to the ChartId, whether it is stored in a viewmodel or in a different XAML element.
2. WPF does not allow use of nested value converters in XAML; this prevents me from nesting the ValueConverter within the chart view model (where reference to the ChartId is readily available).

I’m exploring some other options, but they are getting ugly fast, so I figured it’s time to ask for assistance. Is there another way to do this (desirably adhering to MVVM practices)?

Key excerpts of my code are pasted below:

Surface:

<TextBlock x:Name="ChartIdBlock" IsEnabled="False" Text="{Binding ChartId}"/>
<s:SciChartSurface x:Name="ScsControlChart" MinHeight="200" s:ThemeManager.Theme="BlackSteel">
<s:SciChartSurface.RenderableSeries>
    <s:FastLineRenderableSeries x:Name="Data" SeriesColor="White" DataSeries="{Binding Chart, Converter={StaticResource ChartDataToDataSeriesConverter}}" IsSelected="True"/>
   <!-- More data series in same chart -->
</s:SciChartSurface.RenderableSeries>
<s:SciChartSurface.XAxis>
    <s:DateTimeAxis  VisibleRange="{Binding XRange, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" TickLabelStyle="{StaticResource AxisLabelStyle}" />
</s:SciChartSurface.XAxis>
<s:SciChartSurface.YAxis>
    <s:NumericAxis DrawMajorBands="True" VisibleRange="{Binding YRange, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" TickLabelStyle="{StaticResource AxisLabelStyle}"/>
</s:SciChartSurface.YAxis>
<s:SciChartSurface.ChartModifier>
    <s:ModifierGroup>
        <s:RolloverModifier x:Name="RolloverModifier" DrawVerticalLine="True" SourceMode="SelectedSeries" TooltipLabelTemplate="{StaticResource RolloverLabelTemplate}"/>
    </s:ModifierGroup>
</s:SciChartSurface.ChartModifier>

RolloverLabelTemplate:

<ControlTemplate x:Key="RolloverLabelTemplate" TargetType="s:TemplatableControl">
    <Border Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top" Background="#77FFFFFF" BorderBrush="#55000000" BorderThickness="1" Padding="5">
        <ItemsControl ItemsSource="{Binding ElementName=RolloverModifier, Path=SeriesData.SeriesInfo}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                        <StackPanel Grid.Column="2" Orientation="Horizontal" Margin="3,3,20,3">
                            <TextBlock FontSize="13" FontWeight="Bold" Foreground="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}"
                                       Text="{Binding ZValue, Converter={StaticResource IndexToIdConverter}, ConverterParameter={Binding ElementName=ChartIdBlock, Path=Text}}"/>
                        </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Border>

Value Converter:

public sealed class ChartIndexToIdConverter : IValueConverter
{
    private readonly static Dictionary<int, Tuple<int, string[]>> _lookup = new Dictionary<int, Tuple<int, string[]>>();
    private readonly static Random _rnd = new Random();

    public static int Register(IControlChart chart)
    {
        var key = _rnd.Next();
        while (_lookup.ContainsKey(key)) key = _rnd.Next();
        _lookup.Add(key, new Tuple<int, string[]>(chart.First().Index, chart.Select(d => d.Id).ToArray()));
        return key;
    }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null) throw new ArgumentNullException("value");
        if (parameter == null) throw new ArgumentNullException("parameter");
        var tuple = _lookup[(int)parameter];
        return tuple.Item2[(int)value - tuple.Item1];
    }
}

A question was recently asked on priority support tickets – how to to apply a Template Selector to the RolloverModifier, to display different tooltips based on series type?

We are answering the question below so that other users can benefit from it!

Hi All,
Although this issue isn’t currently stopping me doing what I need to do I’m just a tad worried that I’m doing something more fundamental wrong which probably will. Anyway the question…

I have a chart with a DateTime axis to which I add two series (red and blue points) from the code behind as per the code snippet. When I run it both series are displayed correctly but the rollover bar only snaps to the second series points. If a run the mouse over a point from the first series it seems to be acknowledged as the fill colour changes but the rollover doesn’t snap to it.

The method is invoked by a button press on a parent control

public void AddTestDataSeries(double seedvalue)
{ 
    DateTime StartPoint = DateTime.Now;
    DateTime[] Axis = new DateTime[] { StartPoint.AddMinutes(1), StartPoint.AddMinutes(2), StartPoint.AddMinutes(3), StartPoint.AddMinutes(4), StartPoint.AddMinutes(5), StartPoint.AddMinutes(6), StartPoint.AddMinutes(7), StartPoint.AddMinutes(8) };
    double[] Series1 = new double[]{1,2,3,5,7,12,19,37};
    double[] Series2 = new double[]{10,20,30,40,50,60,70,80};

    XyDataSeries<DateTime, double> dataSeries1 = new XyDataSeries<DateTime, double> { SeriesName = "Series1" };
    for (int x = 0; x < Series1.Count(); x++)
    {
        dataSeries1.Append(Axis[x], Series1[x]);
    }
    XyScatterRenderableSeries scatterRenderSeries1 = new XyScatterRenderableSeries();
    scatterRenderSeries1.DataSeries = dataSeries1;
    scatterRenderSeries1.PointMarker = new EllipsePointMarker()
    {
        Fill = Colors.Red,
        Stroke = Colors.White,
        StrokeThickness = 2,
        Width = 10,
        Height = 10,
    };
    this.UserControlSciChartSurface.RenderableSeries.Add(scatterRenderSeries1);

    XyDataSeries<DateTime, double> dataSeries2 = new XyDataSeries<DateTime, double> { SeriesName = "Series2" };
    for (int x = 0; x < Series2.Count(); x++)
    {
        dataSeries2.Append(Axis[x].AddSeconds(30), Series2[x]);
    }
    XyScatterRenderableSeries scatterRenderSeries2 = new XyScatterRenderableSeries();
    scatterRenderSeries2.DataSeries = dataSeries2;
    scatterRenderSeries2.PointMarker = new EllipsePointMarker()
    {
        Fill = Colors.Blue,
        Stroke = Colors.White,
        StrokeThickness = 2,
        Width = 10,
        Height = 10,
    };
    this.UserControlSciChartSurface.RenderableSeries.Add(scatterRenderSeries2);

}

And the XAML is simply

<UserControl
         x:Class="SummaryDrillDownCharting.SummaryDataChartUserControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:s="http://schemas.abtsoftware.co.uk/scichart"  
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">

<Grid>
    <s:SciChartSurface x:Name="UserControlSciChartSurface" s:ThemeManager.Theme="Chrome">

        <s:SciChartSurface.XAxis>
            <s:DateTimeAxis GrowBy="0.1, 0.1"/>                
        </s:SciChartSurface.XAxis>

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

        <s:SciChartSurface.ChartModifier>
            <s:ModifierGroup>
                <s:RolloverModifier IsEnabled="True"></s:RolloverModifier>
            </s:ModifierGroup>
        </s:SciChartSurface.ChartModifier>

    </s:SciChartSurface>
</Grid>

ADDITIONAL INFO: I Just ran the same code changing the scatter to a FastLineRenderableSeries – same problem exists.