Pre loader

RolloverLabelTemplate show X and Y Value separated

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

Answered
2
0

Hi
I not really understand how i could display the X and Y value separated in a rolloverLabel?
In the example is always on value like Y.
Can you help me?

Thanks

  • You must to post comments
Best Answer
4
0

Update June 2014: The Short Answer

We’ve now integrated the X and Y Values to the Rollovermodifier natively, and this is demonstrated in our examples. Please see the Realtime Cursors Example which demonstrates a Rollover with X and Y Values in the Legend area.

The Long Answer

The way it works is like this. The RolloverModifier and LegendModifier are simply data-sources, which give you an ObservableCollection<SeriesInfo> to bind to in XAML.

The Series Info classes are defined in the API documentation here:

Each Series has its own SeriesInfo type. All of them inherit from SeriesInfo, which is the base type. So given you are binding to a collection of SeriesInfo when you use the RolloverModifier or LegendModifier, it becomes possible to expose almost any info about the underlying RenderableSeries or DataSeries.

As a starting point please see our RolloverModifier demo, in particular the source code where we create the ItemsControl to consume SeriesInfo objects:

<!-- Binds to SeriesInfo, outputs Y-Values only -->
<!-- By modifying this and using knowledge of SeriesInfo class definition above, -->
<!-- you can theoretically do anything! --> 
<Border Grid.Row="1" Margin="23,23" HorizontalAlignment="Left" VerticalAlignment="Top" Background="#77FFFFFF" BorderBrush="#55000000" BorderThickness="2" Padding="5">
    <ItemsControl DataContext="{Binding ElementName=rolloverModifier}" ItemsSource="{Binding RolloverData.SeriesInfo}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Column="0"
                               Margin="3,3,20,3"
                               FontSize="13"
                               FontWeight="Bold"
                               Foreground="{Binding SeriesColor,
                                                    Converter={StaticResource ColorToBrushConverter}}"
                               Text="{Binding SeriesName}" />
                    <TextBlock Grid.Column="1"
                               Margin="3,3,3,3"
                               FontSize="13"
                               FontWeight="Bold"
                               Foreground="{Binding SeriesColor,
                                                    Converter={StaticResource ColorToBrushConverter}}"
                               Text="{Binding Value}" />
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Border>

Note that when you bind to XValue / YValue which are of type IComparable, you will need a converter or a StringFormat to convert from IComparable to the display value. Yes believe it or not, in XAML if you bind an IComparable which is actually a double to a TextBlock it won’t display! Please use an IComparable converter if you get blank values when binding to these properties.

In the RealTimeCursors example we see this code to convert the XValue, YValue to doubles:

<!-- When binding to XValue, YValue of type IComparable, StringFormat is mandatory due to a -->
<!-- XAML bug that cannot convert IComparable to text, even though underlying type is double -->
<StackPanel Orientation="Horizontal" Grid.Column="2">
    <TextBlock Text="X: " Style="{StaticResource tbStyle}"/>
    <TextBlock Text="{Binding XValue, StringFormat=\{0:0.00\}}" Style="{StaticResource tbStyle}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="3">
    <TextBlock Text="Y: " Margin="3" Style="{StaticResource tbStyle}"/>
    <TextBlock Text="{Binding YValue, StringFormat=\{0:0.00\}}" Style="{StaticResource tbStyle}"/>
</StackPanel>

Advanced SeriesInfo Binding

Finally, many people ask us how to bind to a specific property on the RenderableSeries or DataSeries. Well, the SeriesInfo exposes the RenderableSeries too so its possible to expose any property from the RenderableSeries. Don’t forget RenderableSeries.DataSeries also allows access from SeriesInfo right back to the original DataSeries.

  • Andrew
Images
  • You must to post comments
1
0

Hi Marcel,

We’ve had to make some minor changes to the code to support X-Values in RolloverModifier. We have uploaded a hotfix to http://http://www.scichart.com/downloads/

You can find release notes with changes at http://http://www.abtsoftware.co.uk/Downloads/Release/releasenotes_v1.3.0.1040.txt

Finally, please find attached a zip file example which demonstrates Rollover X,Y values. Existing code with the RolloverModifier will continue to work.

The binding to the new XValue, YValue properties on SeriesInfo is performed as follows:

<TextBlock Grid.Column="0"
            Margin="3,3,20,3"
            FontSize="13"
            FontWeight="Bold"
            Foreground="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}"
            Text="{Binding SeriesName}" />
<TextBlock Grid.Column="1"
            Margin="3,3,3,3"
            FontSize="13"
            FontWeight="Bold"
            Foreground="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}">
  <Run Text="X: "/>
  <Run Text="{Binding XValue, Converter={StaticResource ComparableToDoubleConverter}}"/>
  <Run Text=", Y: "/>
  <Run Text="{Binding YValue, Converter={StaticResource ComparableToDoubleConverter}}"/>
</TextBlock>

Where the converter is used to work around a bug (feature?!) in WPF, converting IComparable values to double as follows:

public enum ConvertTo
{
    Double, 
    DateTime
}

public class IComparableConverter : IValueConverter
{
    public ConvertTo ConvertTo { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return ConvertTo == ConvertTo.Double ? 
            (object)System.Convert.ToDouble(value) :
            (object)System.Convert.ToDateTime(value);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

I hope this helps. Get back to me if you have any issues running the attached sample.

Attachments
Images
  • Marcel
    Thanks a lot!! :wink:
  • vaquita50
    Can I have access to the attachment please? I cannot open it... It says that 404: Not Found :( I have implemented like it is written here but It is giving me an error : Invalid cast from 'DateTime' to 'Double'. My X value is a datetime value. Any idea why I am getting this? Thanks very much :) thanks
  • vaquita50
    Thanks Andrew for your quick answer. buy anyway I have implemented as you explained but because my X axis is DateTime It is not working. It displays an error that says: " Invalid cast from ‘DateTime’ to ‘Double'" :( Hope you can help me :) thanks
  • vaquita50
    Oh Andrew thanks so much..... but I am so happy to tell you that after a few hours working on this... I made it work by just converting it to a string instead of a double. Thanks anyway for your help.
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.