Pre loader

how can i added a Scrollbar with the version V3.2

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

Hi,
i want to added a Scrollbar by the new version of the Scichart V3.2 for this i want to test the exemple of “Scollbars”

<UserControl.Resources>
    <s:OrientationToVisibilityConverter x:Key="OrientationToVisibilityConverter"/>

    <Style TargetType="s:SciChartScrollbar">
        <Setter Property="GripsThickness" Value="9"/>
        <Setter Property="GripsLength" Value="14"/>
        <Setter Property="ViewportStyle">
            <Setter.Value>
                <Style TargetType="Control">
                    <Setter Property="Background" Value="#49528a"/>
                    <Setter Property="BorderBrush" Value="#6b72a0"/>
                    <Setter Property="BorderThickness" Value="2"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="GripsStyle">
            <Setter.Value>
                <Style TargetType="Control">
                    <Setter Property="Background" Value="#49528a"/>
                    <Setter Property="BorderBrush" Value="#6b72a0"/>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

</UserControl.Resources>
<Grid s:ThemeManager.Theme="Electric">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <!--  Create the chart surface  -->
    <s:SciChartSurface Name="sciChart" Grid.Row="0">

        <!--  Declare RenderableSeries and assign to Y-Axis  -->
        <s:SciChartSurface.RenderableSeries>
            <s:FastLineRenderableSeries x:Name="bottomLeftLine" SeriesColor="#c04d4d" StrokeThickness="1" XAxisId="BottomAxisId" YAxisId="LeftAxisId"/>
            <s:FastLineRenderableSeries x:Name="bottomLeftCurve" SeriesColor="#dfa239" StrokeThickness="1" XAxisId="BottomAxisId" YAxisId="LeftAxisId"/>
            <s:FastLineRenderableSeries x:Name="topRightLine" SeriesColor="#FFB3E8F6" StrokeThickness="1" XAxisId="TopAxisId" YAxisId="RightAxisId"/>
            <s:FastLineRenderableSeries x:Name="topRightCurve" SeriesColor="#6495ed" StrokeThickness="1" XAxisId="TopAxisId" YAxisId="RightAxisId"/>
        </s:SciChartSurface.RenderableSeries>

        <!--  Create an X Axis  -->
        <s:SciChartSurface.XAxes>
            <s:DateTimeAxis x:Name="BottomAxis" AxisAlignment="Bottom" AxisTitle="Bottom Axis" BorderBrush="#FFE26565" BorderThickness="0,1,0,0" Id="BottomAxisId" TickTextBrush="#FFE26565"/>
            <s:DateTimeAxis AxisAlignment="Top" AxisTitle="Top Axis" BorderThickness="0,0,0,1" Id="TopAxisId">
                <s:DateTimeAxis.Scrollbar>
                    <s:SciChartScrollbar Height="16"/>
                </s:DateTimeAxis.Scrollbar>
            </s:DateTimeAxis>
        </s:SciChartSurface.XAxes>

        <!--  Create Y Axes on the Left and Right. Optional bands give a cool look and feel for minimal performance impact  -->
        <s:SciChartSurface.YAxes>
            <s:NumericAxis AxisAlignment="Left" AxisTitle="Left Axis" BorderBrush="#FFE26565" BorderThickness="0,0,1,0" DrawMajorBands="True" GrowBy="0.05, 0.05" Id="LeftAxisId" TextFormatting="#.0" TickTextBrush="#FFE26565">
                <s:NumericAxis.Scrollbar>
                    <s:SciChartScrollbar Width="16"/>
                </s:NumericAxis.Scrollbar>
            </s:NumericAxis>
            <s:NumericAxis AxisAlignment="Right" AxisTitle="Right Axis" BorderThickness="1,0,0,0" GrowBy="0.05, 0.05" Id="RightAxisId" TextFormatting="#.0">
                <s:NumericAxis.Scrollbar>
                    <s:SciChartScrollbar Width="16"/>
                </s:NumericAxis.Scrollbar>
            </s:NumericAxis>
        </s:SciChartSurface.YAxes>

        <!--  Create chart modifiers to zoom, pan and double click to zoom extents  -->
        <s:SciChartSurface.ChartModifier>
            <s:ModifierGroup>
                <s:RubberBandXyZoomModifier IsXAxisOnly="True"/>
                <s:ZoomPanModifier ExecuteOn="MouseRightButton"/>
                <s:ZoomExtentsModifier ExecuteOn="MouseDoubleClick"/>
                <s:LegendModifier Margin="10" GetLegendDataFor="AllSeries" ShowLegend="True"/>
            </s:ModifierGroup>
        </s:SciChartSurface.ChartModifier>
    </s:SciChartSurface>
    <Grid Grid.Row="1" Background="#FF151624">
        <s:SciChartScrollbar Height="16" Margin="6,5,4,5" Axis="{Binding ElementName=BottomAxis}"/>
    </Grid>
</Grid>

using System;
using System.Windows;
using System.Windows.Controls;
using Abt.Controls.SciChart.Model.DataSeries;

namespace Abt.Controls.SciChart.Example.Examples.IWantTo.ZoomAndPanAChart
{
///

/// Interaction logic for ScrollBars.xaml
///

public partial class ScrollBars : UserControl
{
// Used to generate Random Walk
private Random _random = new Random(251916);
const int Count = 2000;

    public ScrollBars()
    {
        InitializeComponent();
    }

    private void ScrollBarsLoaded(object sender, RoutedEventArgs e)
    {
        // Batch updates with one redraw
        using (sciChart.SuspendUpdates())
        {
            // Add four data-series
            var dataSeries0 = new XyDataSeries<DateTime, double>();
            var dataSeries1 = new XyDataSeries<DateTime, double>();
            var dataSeries2 = new XyDataSeries<DateTime, double>();
            var dataSeries3 = new XyDataSeries<DateTime, double>();

            // Fill each dataset with 2,000 pts of X,Y values (Date,Double)
            // and ensure RenderableSeries has its datasource
            bottomLeftLine.DataSeries = FillData(dataSeries0, "Line #1");
            bottomLeftCurve.DataSeries = FillData(dataSeries1, "Curve #1");
            topRightLine.DataSeries = FillData(dataSeries2, "Line #2");
            topRightCurve.DataSeries = FillData(dataSeries3, "Curve #2");

            // Set Visible ranges to force scrollBars
            sciChart.YAxes[0].VisibleRange = new DoubleRange(12, 28);
            sciChart.YAxes[1].VisibleRange = new DoubleRange(-2, 8);
            sciChart.XAxes[0].VisibleRange = new DateRange(new DateTime(2012, 1, 5), new DateTime(2012, 1, 10));
            sciChart.XAxes[1].VisibleRange = new DateRange(new DateTime(2012, 1, 5), new DateTime(2012, 1, 10));
        }
    }

    private IDataSeries FillData(IXyDataSeries<DateTime, double> dataSeries, string name)
    {
        double randomWalk = 10.0;
        var startDate = new DateTime(2012, 01, 01);

        // Generate the X,Y data with sequential dates on the X-Axis and slightly positively biased random walk on the Y-Axis
        var xBuffer = new DateTime[Count];
        var yBuffer = new double[Count];
        for (int i = 0; i < Count; i++)
        {
            randomWalk += (_random.NextDouble() - 0.498);
            yBuffer[i] = randomWalk;
            xBuffer[i] = startDate.AddMinutes(i * 10);
        }

        // Buffer above and append all in one go to avoid multiple recalculations of series range
        dataSeries.Append(xBuffer, yBuffer);
        dataSeries.SeriesName = name;

        return dataSeries;
    }
}

}

i added the reference “Abt.controls.SciChart.wpf” but always i have the error in the DateTimeAxis.Scrollbar and <s:NumericAxis.Scrollbar> , i think that missing an assembly reference of the scrollbar but i don’t know what’s this assembly (like the errors in the picture)??? thank you !

Images
  • You must to post comments
Great Answer
1
0

As Yura pointed out, you should clean-rebuild your project when switching to a new DLL version.

Also, you might find this info useful. In our KnowledgeBase we have detailed articles on how to use the parts of the SciChart API.

In particular, take a look at

As these show you how to create, use and style the SciChartScrollbar control.

enter image description here

Hope this helps!
Andrew

  • You must to post comments
1
0

Hi there,

That’s strange. First of all I would suggest to check assembly version which is used in your project – Scrollbar API and Scrollbar property was added in v3.2 so you need to ensure that you have added correct reference in your project. You can check version in project properties. If everything is ok then please try to clean and rebuild project. Hope it helps!

  • You must to post comments
1
0

Hi Yura,
I clean and rebuild project and it’s run good!
Thank you for your help !

  • You must to post comments
0
0

Hi Andrew, okay it’s clear ! thank you ! but have you any idea how can i real time my Scrollbar because my graph is drawing in real time and i must real time time my scrollbar also ?

  • You must to post comments
0
0

Hi Andrew, thank you for your help !

  • You must to post comments
Showing 5 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