How to create live data chart?

[Fabrizio Frigerio]

I'm showing real-time data received from a capture unit using sfChart control. 

To simulate a live chart (moving window showing only the last 10 seconds of the time line) i'm using Minimum, Maximum, ZoomFactor and ZoomPosition properties of the chart primary axis defined as:

NumericalAxis xAxis = new NumericalAxis();

...

xAxis.SetBinding(NumericalAxis.MinimumProperty, new Binding("TimeScaleLower"));

xAxis.SetBinding(NumericalAxis.MaximumProperty, new Binding("TimeScaleUpper"));

xAxis.SetBinding(NumericalAxis.ZoomFactorProperty, new Binding("ChartZoomFactor"));

xAxis.SetBinding(NumericalAxis.ZoomPositionProperty, new Binding("ChartZoomPosition"));

Chart.PrimaryAxis = xAxis;

with this procedure fired every 50msec by a timer:

bool OnTimelineTimerTick()

{

    if (App.dataManager.StartDatetime == DateTime.MinValue) return true;

    double time = Utility.TimeFromStart();

    double visibleBuffer = (config.MainPageTimeLine * 6) / 5;

    Debug.WriteLine(DateTime.Now.ToString("HH:mm:ss.fff") + " " + "Timeline = " + time.ToString("##0.000"));

    if ((MainChartUpdate) && (time > TimeScaleUpper))

    {

        TimeScaleUpper = (time <= config.MainPageTimeLine) ? config.MainPageTimeLine : time;

        TimeScaleLower = (time < visibleBuffer) ? 0 : time - visibleBuffer;

        if (oldVisibleBuffer != visibleBuffer || timeScaleLower == 0)

        {

            if (timeScaleLower == 0)

                ChartZoomFactor = Math.Round((double)config.MainPageTimeLine / (timeScaleUpper - timeScaleLower), 4);

            else

            {

                ChartZoomFactor = Math.Round((double)config.MainPageTimeLine / visibleBuffer, 4);

                oldVisibleBuffer = visibleBuffer;

            }

            ChartZoomPosition = 1 - ((ChartZoomFactor == 1) ? 0 : ChartZoomFactor);

        }

    }

    return true;

}

There is a better way to accieve my goal?

My code works even though the timeline movement is not smooth as it should be.

The other problem i'm facying is the memory. 

I need to have 2 live chart (in two different pages but the data must be collected always for all charts).

The first chart has up tu 8 data sources and each one supply 5 differente values, the user can select up to two values to be visible on the chart for all the 8 sources so i've setup 16 series, 8 spline and 8 fastline.

The second chart has 8 data sources, 4 with 6 different values and 4 with 12 different values so 72 total series (we think to limit the max number of series visible to 24 o 36, but the data still need to be kept).

All the data are stored in observable collections of objects for each data source. 

We are now keeping only 48 (8sec timeline x 6) sample for each source but the goal is to have 3000 sample for a total timeline of 10 minutes (data are supplied every 200msec), the user can stop and scrollback trought the chart. 

No problem for the first chart but if I enable the second one I'm having out of memory exception adding data to the observable collections.

There is a more lightweigth option to keep data for the charts?

Could be better to use only one collection for al data? Data are logically separeted, they come from different acquisition point but arrive in the same big packet, so all have the same time base. 

The 8 collection of the first chart could became only one collection and the 8 of the second could became 2 (data come from two different packet). 

This could help keeping low the need of memory and also make the chart refresh less frequent?

Or use List<> instead of ObservableCollections<>?

Any idea on how to make the application more light and smooter is much appreciated

Thanks

Fabrizio

[Parthiban Sundaram]

Hi Fabrizio,

Sorry for the delay.

Regarding “moving window showing only the last 10 seconds of the time line”

You can achieve this requirement by setting AutoScrollingDelta and AutoScrollingDeltaType of DateTimeAxis. Please find the below code snippet.

 

Code Example: 

[C#] 

DateTimeAxis xAxis = new DateTimeAxis();   

xAxis.AutoScrollingDelta = 10;   

xAxis.AutoScrollingDeltaType = DateTimeDeltaType.Seconds;   

chart.PrimaryAxis = xAxis;   

 

 
Please let us know if your requirement is different from this. 

Regarding “Out of memory exception” 

We have tested the attached sample in Moto E and we did not face any exceptions in the second case. Could you please confirm whether your requirement is similar to this. If so, please check the attached sample and let us know if you are facing the issue in this sample too. If your requirement is different, we kindly request you to provide more details on how the data is manipulated in your application, so that we can analyse on this further. 

Sample: https://www.syncfusion.com/downloads/support/forum/130367/ze/LiveChart2143830611   

Please let us know if you have any queries. 

Regards,
Parthiban S