Pre loader

SciChartOverview share width of SciChartSurface

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
1
0

Hi guys,

Yet another Overview question! I have my Overview directly beneath a SciChart. I basically need to do something similar to the SciChartGroup.VerticalChartGroup approach that allows two charts to share a width.

The problem is that the SciChartOverview is not a SciChartSurface so I cannot provide it with a VerticalChartGroup.

I have tried binding the SciChart to a Padding property with a customised Converter that attempts to determine the Padding of the chart as well as the width of the YAxes. The problem with this approach is three-fold:
1) The converter executes before the SciChart has any data and therefore before the YAxis has been given its final size, and
2) The converter won’t be told that the SciChart has raised a NotifiyPropertyChanged, so it will never be called again, and
3) Even after fully loading and rendering with data, the YAxes never have a Width property set (it is always NAN), and I can’t access the ActualWidth property from my code.

How would you recommend I achieve this goal?

Thanks,
Miles

  • You must to post comments
Best Answer
3
0

Hey miles,

I’m also annoyed by this SciChartOverview width thing, so thanks for your request, it’s prompted me to look into it. Ok – so I managed to get this working by modifying the Xaml for the CreateRealTimeStockChart example like this:

        <s:SciChartSurface x:Name="priceChart">
             <!-- omitted for brevity ... -->
        </s:SciChartSurface>

        <!--  Define the Overview control, binding to XVisibleRange, which is shared between this and the SciStockChart control  -->
        <Grid Grid.Row="2" Height="32" >
          
            <!-- The grid is used to set paddings around the Overview, so that the size of the Overview matches the size of the XAxis on the parent chart -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20"/> <!-- Matches parent surface padding left -->
                <ColumnDefinition Width="*"/> <!-- Hosts overview control -->
                <ColumnDefinition Width="{Binding ElementName=priceChart, Path=YAxis.ActualWidth, Mode=OneWay}"/> <!-- Used to bind to parent surface YAxis -->
                <ColumnDefinition Width="15"/> <!-- Matches parent surface padding right -->
            </Grid.ColumnDefinitions>
          
            <s:SciChartOverview Grid.Column="1"
                            ParentSurface="{Binding ElementName=priceChart, Mode=OneWay}"
                            s:ThemeManager.Theme="{Binding ElementName=ThemeCombo, Path=SelectedItem}"                           
                            SelectedRange="{Binding XVisibleRange, Mode=TwoWay}" />
          
        </Grid>

The power of binding! Perhaps this ought to go into the SciChartOverview control template in future builds!

Best regards,
Andrew

Images
  • You must to post comments
2
0

To add to Answer’s answer, it appears that SciChart is raising the required changed events when the YAxis’ visible range (and therefore the labels that represent that range and their width) changes, but it doesn’t raise anything if I simply change the visibility of an Axis. So in order to get around this issue, I had to make a slight modification to Andrew’s suggested code that binds to the same flags from the VM that hide the YAxes.

<Grid.ColumnDefinitions>
    <!-- Spacing for ForecastReviewGraph padding left -->
    <ColumnDefinition Width="{Binding ElementName=ForecastReviewGraph, Path=Padding.Left, Mode=OneWay}" />
    <!-- Spacing for ForecastReviewGraph left Y-Axis width -->
    <ColumnDefinition>
        <ColumnDefinition.Style>
            <Style TargetType="ColumnDefinition">
                <Setter Property="Width" Value ="{Binding ElementName=ForecastReviewGraph, Path=YAxes[0].ActualWidth, Mode=OneWay}" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsFirstYAxisEnabled}" Value="False">
                        <Setter Property="Width" Value="0" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ColumnDefinition.Style>
    </ColumnDefinition>
    <!-- Time Navigator -->
    <ColumnDefinition Width="*" />
    <!-- Spacing for ForecastReviewGraph right Y-Axis width -->
    <ColumnDefinition>
        <ColumnDefinition.Style>
            <Style TargetType="ColumnDefinition">
                <Setter Property="Width" Value ="{Binding ElementName=ForecastReviewGraph, Path=YAxes[1].ActualWidth, Mode=OneWay}" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsSecondYAxisEnabled}" Value="False">
                        <Setter Property="Width" Value="0" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ColumnDefinition.Style>
    </ColumnDefinition>
    <!-- Spacing for ForecastReviewGraph padding right -->
    <ColumnDefinition Width="{Binding ElementName=ForecastReviewGraph, Path=Padding.Right, Mode=OneWay}" />
</Grid.ColumnDefinitions>

Kind regards,
Miles

  • Andrew Burnett-Thompson
    FYI the newsletter mail hasn't gone out yet but v1.5.5.1888 of SciChart is now available on our downloads page, fixes many issues, including some reported by you on the overview. Not all - as we couldn't reproduce some. If you have any more issues just drop me an email, we'll do our best to help Cheers!
  • bstapylton
    Hi Andrew, Thanks for the update - I'll go have a look now. Cheers, Miles
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies