Pre loader

Axis label and Scrollbars on opposite sides of the graph

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

0
0

Good Morning/Afternoon,

I am trying to produce a view where the xAxis’s AxisAlignment is Left, but the scrollbar stays on the right. I am attaching an image from the application we are replacing…

It doesn’t appear that the Scrollbar has a Location or Position or WhereDoIDrawMyself property, and that the scrollbar is coupled to the Axis location. I am not sure what approach to take.

Is this even possible?

Thanks,
Mike.

Version
4.0.6.8578
Images
  • You must to post comments
0
0

Thanks Andrew,

Two problems arose, both of which I solved by getting a little “hacky…” Can you suggest anything better?

Problem #1 – The chart surfaces are defined in a contenttemplate that I use for a UserControl that I have providing tiling capabilities. Therefore, I couldn’t use named elements. Solution: relative binding (see below).

Problem #2 – I wanted the height of the Scrollbar to match the “plotting surface”, excluding XAxis data and scrollbars. Solution: Bind to the ModifierSurface.ActualHeight property:

 <Grid Grid.Row="0" Grid.Column="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <s:SciChartSurface Grid.Column="0" DataContext="{Binding}" s:SciChartGroup.VerticalChartGroup="aLine" >
                            <!--  snip stuff  -->

                            <!--  Create an X Axis  -->
                            <s:SciChartSurface.XAxis >
                                <chart:WindowedNumericAxis Visibility="{Binding DisplayAxisData, Converter={StaticResource PaneVisibilityConverter}}" VisibleRange="{Binding VisibleX, Mode=TwoWay, Delay=20}" MaxRange="{Binding MaxXRange}" AutoRange="Never">
                                    <chart:WindowedNumericAxis.Scrollbar>
                                        <s:SciChartScrollbar />
                                    </chart:WindowedNumericAxis.Scrollbar>
                                </chart:WindowedNumericAxis>
                            </s:SciChartSurface.XAxis>

                            <!--  Create a Y Axis  -->
                            <s:SciChartSurface.YAxis>
                                <chart:WindowedDateTimeAxis
                                                             FlipCoordinates="{Binding InvertTimeDirection}" 
                                TextFormatting="hh:mm:ss"

                                VisibleRange="{Binding VisibleY, Mode=TwoWay, Delay=20}"
                                MaxRange="{Binding MaxYRange}" 
                                AxisAlignment="Left" AutoRange="Never">

                                </chart:WindowedDateTimeAxis>
                            </s:SciChartSurface.YAxis>

                        </s:SciChartSurface>
                        <s:SciChartScrollbar Grid.Column="1" 
                                             Axis="{Binding Path=Children[0].YAxis, RelativeSource={RelativeSource AncestorType=Grid}}"
                                             Height="{Binding Path=Children[0].ModifierSurface.ActualHeight, RelativeSource={RelativeSource AncestorType=Grid}}"
                                             VerticalAlignment="Top"/>
                    </Grid>

Thank you for the direction!

Mike.

Images
  • Andrew Burnett-Thompson
    Hi Michael, I don’t think either of these methods are hacky. The alternatives are to re-write the code of scichart, or re-template the whole surface. I’d say this was a good solution!
  • You must to post comments
0
0

It is of course possible.

Check out our documentation on WPF Chart Scrollbars. It is possible to put the scrollbar outside the axis using the second technique.

Putting a Scrollbar Outside of the SciChartSurface

The scrollbar doesn’t have to be declared on the Axis.Scrollbar property. It can be declared anywhere in your View, and simply bound to the axis via the SciChartScrollbar.Axis property. For instance:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="32"/>
    </Grid.RowDefinitions>

    <s:SciChartSurface Grid.Row="0">

        <!-- RenderableSeries omitted for brevity -->

        <s:SciChartSurface.YAxis>
            <s:NumericAxis x:Name="yAxis"/>
        </s:SciChartSurface.YAxis>

        <s:SciChartSurface.XAxis>
            <s:NumericAxis x:Name="xAxis"/>
        </s:SciChartSurface.XAxis>
    </s:SciChartSurface>

    <!-- Declare a scrollbar and bind to XAxis by ElementName binding -->
    <s:SciChartScrollbar Grid.Row="1" Margin="6,5,4,5" Axis="{Binding ElementName=xAxis}"/>

</Grid>

So, if you can figure out how to place it then you can bind it like this.

Hope this helps!

  • 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