SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components

0
0

Hello,

i’ve created the following sample application were i tried to use CategoryDateTimeAxisViewModel as x axis:

class MainViewModel : INotifyPropertyChanged
{
    private IAxisViewModel _xAxis;
    private IAxisViewModel _yAxis;

    public event PropertyChangedEventHandler PropertyChanged;

    public IAxisViewModel XAxis
    {
        get { return _xAxis; }
        set
        {
            if (_xAxis != value)
            {
                _xAxis = value;
                OnPropertyChanged();
            }
        }
    }

    public IAxisViewModel YAxis
    {
        get { return _yAxis; }
        set
        {
            if (_yAxis != value)
            {
                _yAxis = value;
                OnPropertyChanged();
            }
        }
    }

    public MainViewModel()
    {
        XAxis = new CategoryDateTimeAxisViewModel
        {
            AxisTitle = "X-Achse",
            Id = "DefaultAxisId",
            AxisAlignment = AxisAlignment.Bottom,
            AutoRange = AutoRange.Always,
            TickProvider = new DateTimeTickProvider()
        };
        YAxis = new NumericAxisViewModel
        {
            AxisTitle = "Y-Achse",
            Id = "DefaultAxisId",
            AxisAlignment = AxisAlignment.Left,
            AutoRange = AutoRange.Always,
            TickProvider = new NumericTickProvider()
        };
    }

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp1"
    xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
    <local:MainViewModel/>
</Window.DataContext>
<DockPanel>
    <s:SciChartSurface DockPanel.Dock="Top"
                       ChartTitle="Testdiagramm"
                       XAxis="{s:AxesBinding XAxis}"
                       YAxis="{s:AxesBinding YAxis}">
    </s:SciChartSurface>
</DockPanel>

When i run the application i can see only the axis titles but no axes, gridlines etc. However when i replace CategoryDateTimeAxisViewModel with DateTimeAxisViewModel everything works fine and looks like expected. What am i doing wrong?

Best regards
Alexander

Version
5.3.0.11954
  • You must to post comments
1
0

Hi Alex,

CategoryDateTimeAxis requires some data before it can be drawn, as the measurement on the X-Axis depends on indices to the data.

So add some data (a RenderableSeries/DataSeries pair), the axis should magically appear!

Best regards,
Andrew

  • You must to post comments
1
0

Hi Alexander, we have an example of exactly this in our WPF Chart Examples Suite,.

WPF Realtime Ticking Stock Charts

Also, there is an explanation of how this works (keeping the time window) here:

https://support.scichart.com/index.php?/Knowledgebase/Article/View/17223/0/how-to-have-a-fixed-scrolling-time-range-on-the-xaxis-that-works-with-modifiers

Finally, the correct TickProvider base class is NumericTickProvider. Please see https://www.scichart.com/documentation/v5.x/Axis%20Ticks%20-%20TickProvider%20and%20DeltaCalculator%20API.html for more details.

Best regards,
Andrew

  • You must to post comments
0
0

Hello Andrew,

thank you for your answer. I’d like to build a chart that has a fixed time range for it’s X-Axis (e.g. 0s – 60s). The X-Axis should act like a CategoryDateTimeAxis which means that it automatically collapses gaps in it’s series. However i’m obviously not allowed to use a DateTimeTickProvider with this kind of axis since this leads to an exception. How can i achieve the desired behaviour? Is there maybe another type of axis that fits better to my requirements?

I would be very thankful for some more information.

Best regards,
Alexander

  • You must to post comments
0
0

Hello Andrew,

thank you for your help. I’m getting closer to my desired target but i have still some questions.

public class MainWindowViewModel : INotifyPropertyChanged
{
    private const int MaxVisibleRange = 60000;
    private const int DataCount = 100;
    private const int PollingRateMs = 100;
    private const int SeriesCount = 1;

    private readonly IDataProvider _dataProvider;
    private ObservableCollection<IRenderableSeriesViewModel> _seriesViewModels;
    private IndexRange _xVisibleRange;
    private readonly IList<XyDataSeries<DateTime, double>> _dataSeries;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<IRenderableSeriesViewModel> SeriesViewModels
    {
        get { return _seriesViewModels; }
        set
        {
            if (_seriesViewModels != value)
            {
                _seriesViewModels = value;
                OnPropertyChanged();
            }
        }
    }

    public IndexRange XVisibleRange
    {
        get { return _xVisibleRange; }
        set
        {
            if (!Equals(_xVisibleRange, value))
            {
                _xVisibleRange = value;
                OnPropertyChanged();
            }
        }
    }

    public ISuspendable SciStockChart { get; set; }

    public ITickProvider TickProvider { get; set; }

    public string XAxisTextFormat
    {
        get { return "mm:ss"; }
    }

    public ICommand StartUpdatesCommand
    {
        get
        {
            return new ActionCommand(() =>
                _dataProvider.StartDataGeneration(SeriesCount, DataCount, PollingRateMs, OnDataUpdated));
        }
    }

    public ICommand StopUpdatesCommand
    {
        get { return new ActionCommand(() => _dataProvider.StopDataGeneration()); }
    }

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private void OnDataUpdated(List<XyValues> xyValues)
    {
        Application.Current.Dispatcher.InvokeAsync(() =>
        {
            using (SciStockChart.SuspendUpdates())
            {
                for (var idx = 0; idx < xyValues.Count; idx++)
                {
                    var dateTimeValues = xyValues[idx].DateTimeValues;
                    var yValues = xyValues[idx].YValues;
                    var currentDataSeries = _dataSeries[idx];
                    currentDataSeries.Append(dateTimeValues, yValues);
                }
            }
        });
    }

    public MainWindowViewModel()
    {
        _dataSeries = new List<XyDataSeries<DateTime, double>>();
        SeriesViewModels = new ObservableCollection<IRenderableSeriesViewModel>();
        for (var i = 0; i < SeriesCount; i++)
        {
            var xyDataSeries = new XyDataSeries<DateTime, double>
            {
                SeriesName = $"TestSeries_{i}",
                FifoCapacity = MaxVisibleRange
            };
            _dataSeries.Add(xyDataSeries);
            _seriesViewModels.Add(new LineRenderableSeriesViewModel
            {
                DataSeries = xyDataSeries,
                AntiAliasing = false,
                StrokeThickness = 1
            });
        }

        _dataProvider = new DataProvider();

        XVisibleRange = new IndexRange(0, MaxVisibleRange);
        TickProvider = new CustomNumericTickProvider();
    }
}

<Window x:Class="RealtimeTickingStockChart.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:RealtimeTickingStockChart"
    xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
    <local:MainWindowViewModel/>
</Window.DataContext>
<DockPanel>
    <StackPanel DockPanel.Dock="Bottom"
                Orientation="Horizontal">
        <Button Content="Start" Padding="5" Command="{Binding StartUpdatesCommand}"/>
        <Button Content="Stop" Padding="5" Command="{Binding StopUpdatesCommand}"/>
    </StackPanel>

    <s:SciStockChart x:Name="sciStockChart"
                     DockPanel.Dock="Top" 
                     RenderableSeries="{s:SeriesBinding SeriesViewModels}">
        <s:SciStockChart.XAxisStyle>
            <Style TargetType="s:CategoryDateTimeAxis">
                <Setter Property="DrawMajorGridLines" Value="True"/>
                <Setter Property="DrawMinorGridLines" Value="True"/>
                <Setter Property="VisibleRange" Value="{Binding XVisibleRange, Mode=TwoWay}"/>
                <Setter Property="TickProvider" Value="{Binding TickProvider, Mode=OneWay}"/>
                <Setter Property="GrowBy" Value="0, 0.1"/>
                <Setter Property="TextFormatting" Value="{Binding XAxisTextFormat}"/>
            </Style>
        </s:SciStockChart.XAxisStyle>
        <s:SciStockChart.YAxisStyle>
            <Style TargetType="s:NumericAxis">
                <Setter Property="AutoRange" Value="Always"/>
                <Setter Property="AxisAlignment" Value="Left"/>
            </Style>
        </s:SciStockChart.YAxisStyle>
    </s:SciStockChart>
</DockPanel>

  • TextFormatting:
    As you can see in the attached picture the text format of the x axis is hh:ss though i set it to mm:ss. I’ve read a question from six years ago (https://www.scichart.com/questions/wpf/textformatting-on-categorydatetimeaxis) that TextFormat is not working on CategoryDateTimeAxis. Is this bug still existing?

  • X-Axis-Behaviour:
    As i mentionend earlier i just want to see a fixed x-axis range of lets say 60s (0s-60s). You can see in the attached picture that the time in my example runs from right to left. How can i achieve this behaviour?

Best regards
Alexander

Images
  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.