Pre loader

How to use CategoryDateTimeAxisViewModel?

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

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,.

https://www.scichart.com/example/wpf-chart-example-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.

Try SciChart Today

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

Start TrialCase Studies