Pre loader

Tutorial 06b - Adding Realtime Updates with MVVM

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



In Tutorial 06b – Realtime Updates, I want change the <s:SciChartSurface.XAxis> from <s:NumericAxis/> to <s:DateTimeAxis/> . I have tried a lot, but it still doesn’t work.

Could you please help me to do this work.

Thank you very much.

the negut version of scichart is
  • You must to post comments

Hi Zhi Zhang

Starting from our tutorial 06 – Realtime Updates , this declares a NumericAxis for X,Y Axis in XAML like this:

    <s:SciChartSurface Grid.Row="1"
                       RenderableSeries="{s:SeriesBinding RenderableSeries}" 
                       ChartTitle="{Binding ChartTitle}">

            <s:NumericAxis AxisTitle="{Binding XAxisTitle}"/>
            <s:NumericAxis AxisTitle="{Binding YAxisTitle}"/>

If you change the XAxis to DateTimeAxis like this:

            <s:DateTimeAxis AxisTitle="{Binding XAxisTitle}"/>

You will also need to change the type of the data in the viewmodel.

We declare data in MainViewModel in the tutorial our data like this:

public MainViewModel() {
    var dummyDataProvider = new DummyDataProvider();
    var lineData = new XyDataSeries<double, double>() { SeriesName = "TestingSeries" };
    _renderableSeries = new ObservableCollection<IRenderableSeriesViewModel>();
    RenderableSeries.Add(new LineRenderableSeriesViewModel()
        StrokeThickness = 2,
        Stroke = Colors.SteelBlue,
        DataSeries = lineData,
        StyleKey = "LineSeriesStyle"
    // Append the initial values to the chart
    var initialDataValues = dummyDataProvider.GetHistoricalData();
    lineData.Append(initialDataValues.XValues, initialDataValues.YValues);
    // Subscribe to future updates
    dummyDataProvider.SubscribeUpdates((newValues) =>
        // Append when new values arrive
        lineData.Append(newValues.XValues, newValues.YValues);
        // Zoom the chart to fit
    }); }

Notice the part

var lineData = new XyDataSeries<double, double>() { SeriesName = "TestingSeries" };

For XAxis=DateTimeAxis then the X-Type must be DateTime, e.g.

var lineData = new XyDataSeries<DateTime, double>() { SeriesName = "TestingSeries" };

Now, when appending data, you must append dates:

DateTime[] xValues = ...
double[] yValues = ...
lineData.Append(xValues, yValues);

Now the chart should display correctly.

You can find some concrete examples for DateTimeAxis in the WPF Chart Examples suite / demo application. Just search for DateTimeAxis to find examples that use this axis type.

enter image description here

Let me know if this helps,
Best regards

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.