Pre loader

SciChartOverview displaying name of serie

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

1
0

Hello,

is it possible to display the series name of the series used for the overview chart? In this special case, i have a chart containing many series and it should be configurable which one is selected for the overview chart. The problem is, on the overview chart it is not easily visible which series is displayed, especially if zoomed in.

My last-resort solution would be to place the name of the series over the overview chart manually, but maybe you know a more elegant solution

Thanks,
Robin

  • You must to post comments
1
0

Hello Robin,

It’s not something we support natively, but you may be able to achieve this by re-templating the overview control. For the sake of other posters, here is the control template of the SciChartOverview control. You can adjust this to suit your needs:

<!--  SciChartOverviewControl  -->
    <Style TargetType="SciChart:SciChartOverview">
        <Setter Property="NonSelectedRangeColor" Value="{StaticResource OverviewFillColor}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="SciChart:SciChartOverview">
                    <Grid Name="PART_Container">

                        <SciChart:SciChartSurface x:Name="PART_OverviewControl" Padding="0">
                            <SciChart:SciChartSurface.GridLinesPanelStyle>
                                <Style BasedOn="{StaticResource DefaultGridLinesPanelStyle}" TargetType="SciChart:GridLinesPanel">
                                    <Setter Property="BorderThickness" Value="0" />
                                </Style>
                            </SciChart:SciChartSurface.GridLinesPanelStyle>


                            <SciChart:SciChartSurface.RenderableSeries>
                                <SciChart:FastMountainRenderableSeries />
                            </SciChart:SciChartSurface.RenderableSeries>

                            <SciChart:SciChartSurface.YAxis>
                                <SciChart:NumericAxis AutoRange="True"
                                                      DrawMajorGridLines="False"
                                                      DrawMinorGridLines="False"
                                                      TextFormatting="###E+0"
                                                      Visibility="Collapsed">
                                    <SciChart:NumericAxis.GrowBy>
                                        <SciChart:DoubleRange Max="0.1" Min="0.0" />
                                    </SciChart:NumericAxis.GrowBy>
                                </SciChart:NumericAxis>
                            </SciChart:SciChartSurface.YAxis>

                        </SciChart:SciChartSurface>

                        <StackPanel Name="PART_RangeSliderContainer" Orientation="Horizontal">
                            <Rectangle Name="PART_LeftEdge" />
                            <Thumb Name="PART_LeftThumb" Cursor="SizeWE" />
                            <Thumb Name="PART_MiddleThumb"
                                   Cursor="Hand"
                                   Opacity="0" />
                            <Thumb Name="PART_RightThumb" Cursor="SizeWE" />
                            <Rectangle Name="PART_RightEdge" />
                        </StackPanel>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--  GridLinesPanel  -->
    <Style x:Key="DefaultGridLinesPanelStyle" TargetType="SciChart:GridLinesPanel">
        <Setter Property="BorderBrush" Value="{StaticResource GridBorderBrush}" />
        <Setter Property="Background" Value="{StaticResource GridBackgroundBrush}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="SciChart:GridLinesPanel">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Border>
                            <Grid>
                                <Canvas Name="PART_HorizontalGridLinesPanel" />
                                <Canvas Name="PART_VerticalGridLinesPanel" />
                            </Grid>
                        </Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Remember the SciChartOverview binds to a ParentSurface DataSeriesSet and uses DataSeriesIndex to define which series to render. Also the FastMountainRenderableSeries has a DataSeries property which is set internally with the correct dataseries. DataSeries itself has SeriesName.

Sorry its not a complete solution, but hope it points you in the right direction,

Andrew

  • Andreas Mueller-Bluemlein
    Hi Andrew, thank you for the code snippet, that will help. However, it's not clear to me what to do with the missing resources GridBorderBrush, GridBackgroundBrush and OverviewFillColor. Since all other scichart control are using one theme (e.g. "Chrome"), i guess i have to set the colors accordingly? How do i get these colors, are the argb values available somewhere? Regards, Robin
  • Andrew Burnett-Thompson
    Hi Robin, These are brushes/colors in the themes, there's quite a few of them (and 6 themes). If you want to find out what these colors are, you can use a tool like WPF Snoop to visually debug the Overview control. e.g. you could interrogate the value of NonSelectedRangeColor and the border / lines on the GridLinesPanel like this: For chrome its pretty simple, just these three colors: <SolidColorBrush x:Key="GridBorderBrush" Color="#77333333" /> <SolidColorBrush x:Key="GridBackgroundBrush" Color="Transparent" /> <Color x:Key="OverviewFillColor">#7FD3D3D3</Color> Best regards, Andrew
  • You must to post comments
0
0

Update Nov 2014

New to v3.2, we have new articles on styling the SciChartOverview, using our new ScrollBars API,

Please see Scrolling a Chart with the Overview which includes SciChartOverview control templates for v3.2, as well as v3.1 or below.

Also see Creating a Custom Overview with many series (a frequently asked question), and our new articles on the SciChartScrollBar API.

  • 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