Real Time Chart similar to Task Manager Performance Tab

[Roman Ranzmaier]

Hi.

I tried to add a chart similar to the Performance Tab in the Windows Task Manager.

1. Problem if I set the "Interval" property of an ChartPrimaryXAxis the chart to not render. I set the value to 1 in the example  below.

I thought I set the minimum and maximum to 60 and the interval to 1 so that I always show 60 seconds. But maybe the approach is wrong

Here my Code:

@page "/charttest"

@using System.Collections.ObjectModel

@using System.Threading

   

           

       

       

           

           

       

   

@code {

    public class ChartData

    {

        public DateTime TimeStamp { get; set; }

        public double Y  { get; set; }

    }

    private ObservableCollection _data = new ObservableCollection() { };

    private Timer _timer;

    private readonly Random _random = new Random();

    private async void AddData(object? state)

    {

        await InvokeAsync(() =>

        {

            _data.Add(new ChartData() {TimeStamp = DateTime.UtcNow, Y = _random.NextDouble()});

            base.StateHasChanged();

        });

    }

    protected override void OnInitialized()

    {

        _timer = new Timer(AddData, null, TimeSpan.FromSeconds(1), TimeSpan.FromSeconds(1));

        base.OnInitialized();

    }

}

Edit: It's a server side Blazor App

[Roman Ranzmaier]

I attached the project.

Attachment: SyncfusionChart_da1dfb53.zip

[Srihari Muthukaruppan]

Hi Roman,

We have analyzed your query. From that, we would like to let you know that we can achieve your requirement using RemoveAt() method. Based on your requirement we have prepared your sample for your reference. Please find the sample, code snippet, and screenshot.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorLiveData1561053172.zip

Code Snippet: 

  

// add your additional code here
    private async void AddData(object? state)

    {

        await InvokeAsync(() =>

        {

            if (_data.Count >= 60)

            {

                _data.RemoveAt(0);

            }

            _data.Add(new ChartData() { TimeStamp = DateTime.UtcNow, Y = _random.NextDouble() });

            base.StateHasChanged();

        });

    }

  

If still, this is not your exact requirement. kindly revert us with more information which will be helpful for further analysis and provide you solution sooner.

Regards, 

Srihari M 

[Roman Ranzmaier]

Not 100% the solution I need.

I want a X Axis with a fixed Timerange in my sample the last 60 seconds.

The first 60 entries in my collection change the XAxis and that does not look good.

If  I have 60 entries everthing looks good.

I have attached a video that maybe shows what I want better than I can explain.

Attachment: 222303_a54faa5f.zip

[Srihari Muthukaruppan]

Hi Roman,

We have analyzed your query. From that, we would like to let you know that we can achieve your requirement using multiple axis in the chart. Based on your requirement we have prepared your sample for your reference. Please find the sample, code snippet, and screenshot.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/LiveChart-230673475.zip

Code Snippet: 

  

// add your additional code here

<ChartPrimaryXAxis Visible="false" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Seconds">

</ChartPrimaryXAxis>
   <ChartAxes>

            <ChartAxis EdgeLabelPlacement="Syncfusion.Blazor.Charts.EdgeLabelPlacement.Shift" Minimum="0" Maximum="60" Interval="60" IsInversed="true" RowIndex="0" Name="xAxis" LabelFormat="{value}Seconds">

                <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

            </ChartAxis>

        </ChartAxes>

  

Screenshot:

If still, this is not your exact requirement. kindly revert us with more information which will be helpful for further analysis and provide you solution sooner.

Regards, 

Srihari M 

[Roman Ranzmaier]

Hi

With your sample I found a working solution. 

But the performance is to bad to use it for a professional application.

I have 3 charts with 60 datapoints and update every 1 second 

It flicker and produce a lot of traffic so it|s unussable for me. 

Server Side blazor is not designed for heavy graphic updates :- (

Thanks for your help

[Srihari Muthukaruppan]

Hi Roman, 

  

We have analyzed your query. We are validating the reported scenario, hence we will update the status within two business days (May 22, 2020). We appreciate your patience until then. 

  

Regards 

Srihari M 

[Srihari Muthukaruppan]

Hi Roman,

We have analyzed your query. From that, we would like to let you know that we were able to reproduce the issue and we have confirmed this as an improvement and logged a feature request. You can keep track of the bug from the feedback portal below.  

  

Feedback Link: https://www.syncfusion.com/feedback/13460

  

The fix will be available in our volume 2 release which is scheduled to be rolled out on or before the end of June. 

  

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.  

Thanks,  

Srihari.

[Roman Ranzmaier]

Hi

I have no access to the feedback portal

Access Denied

This private feedback is not associated with your account.

If you believe that this error message is incorrect, please feel free to contact us

[Srihari Muthukaruppan]

Hi Roman,

Sorry for the inconvenience.

We have analyzed your query. From that, we have included your email address for permission. Please keep track of the reported scenario using the below feedback link.

Feedback: https://www.syncfusion.com/feedback/13460

  

As stated earlier the fix will be available in our volume 2 release which is scheduled to be rolled out on or before the end of June. 

Let us know if you have any concerns.

Regards,

Srihari M

[Srihari Muthukaruppan]

Hi Roman, 

  

Thanks for being patience. 

  

We are glad to let you know that our volume 2 release is successfully rolled out. And, we suggest you to use the RefreshLiveData() method to achieve your requirement. Based on that we have also attached the sample for your reference. Please find the below sample, code snippet, and screenshot. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RealTimeChart249720185.zip 

  

Code Snippet 

  

<SfButton @ref="button" Content="Start" @onclick="@onChange"></SfButton> 

  

<SfChart Height="150px" @ref="Chart1"> 

        // add your additional code here 

    </SfChart> 

// add your additional code here 

  

  

@code { 

    public SfButton button; 

    public SfChart Chart1; 

    public SfChart Chart2; 

    public SfChart Chart3; 

    public SfChart Chart4; 

    public SfChart Chart5; 

    public SfChart Chart6; 

    public SfChart Chart7; 

    public SfChart Chart8; 

    public SfChart Chart9; 

    public SfChart Chart10; 

    public SfChart Chart11; 

    public SfChart Chart12; 

    int counter = 1; 

// add your additional code here 

  

void OnTimedEvent(Object source, ElapsedEventArgs e) 

    { 

        count++; 

        this.DataSource.RemoveAt(0); 

        this.DataSource.Add(new ChartData { XValue = count, YValue = 30, YValue1 = 35, Low = 20, High = 40 }); 

        this.Chart1.RefreshLiveData(); 

        this.Chart2.RefreshLiveData(); 

        this.Chart3.RefreshLiveData(); 

        this.Chart4.RefreshLiveData(); 

        this.Chart5.RefreshLiveData(); 

        this.Chart6.RefreshLiveData(); 

        this.Chart7.RefreshLiveData(); 

        this.Chart8.RefreshLiveData(); 

        this.Chart9.RefreshLiveData(); 

        this.Chart10.RefreshLiveData(); 

        this.Chart11.RefreshLiveData(); 

        this.Chart12.RefreshLiveData(); 

        //InvokeAsync(StateHasChanged); 

    } 

  

} 

Screenshot: 

 

Let us know if you need further assistance. 

  

Regards, 

Srihari M