We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

9 point chart donot render for every second

Hi All,

I want to render chart for every second but after sometimes it start skippping the time. Please siggest the optimal way to generate the chart. Please refer the code I am using.


@using CommonLibrary

@using Newtonsoft.Json

@using Syncfusion.Blazor.Charts

@using Syncfusion.Blazor.Buttons

@using System.Collections.ObjectModel

@using System.Net.WebSockets

@using Syncfusion.Blazor.Lists

@using Syncfusion.Blazor.DropDowns

@using System.Text

@inject ILogger<MultipleRealTime> logger

<style>

    .e-chart {

        height: inherit !important;

        width: inherit !important;

    }


    .e-accumulationchart {

        height: inherit !important;

        width: inherit !important;

    }


    test123_svg {

        width: 800px !important;

    }

</style>


<SfListView DataSource="@points" ShowCheckBox="true" @ref="sfListView" Width="150px">

    <ListViewFieldSettings TValue="PointDataInfo" Id="PointId" Text="PointName"></ListViewFieldSettings>

</SfListView>


<SfButton @onclick="AddChartSeries">Real Time Chart</SfButton>


<div class="container" Width="100%">

    <SfChart @ref="liveChart" Width="100%" ID="test123">

        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory" LabelFormat="hh:mm:ss tt" Title="Time (s)">

        </ChartPrimaryXAxis>

        <ChartPrimaryYAxis Title="Usage" Minimum="-20" Interval="20" Maximum="120" LabelFormat="{value}">

        </ChartPrimaryYAxis>@*

        @*<ChartEvents SharedTooltipRender="SharedTooltipEvent"></ChartEvents>*@

        <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>

        <ChartSeriesCollection>

            @foreach (var series in SeriesCollection)

            {

                <ChartSeries Type="ChartSeriesType.Line" XName=@series.XName YName=@series.YName DataSource=@series.Data Name=@series.PointName>

                </ChartSeries>

            }

        </ChartSeriesCollection>

    </SfChart>

</div>




@code {

    private SfListView<PointDataInfo> sfListView;

    private SfChart liveChart;

    public Boolean isChartLoaded = false;

    public class SeriesData

    {

        public string XName

        {

            get;

            set;

        }

        public string YName

        {

            get;

            set;

        }

        public ObservableCollection<ChartDataPoint> Data

        {

            get;

            set;

        }

        public int PointId { get; set; }


        public string PointName { get; set; }

    }

    public PointDataInfo[] points = {

        new PointDataInfo { PointName ="Point 1", PointId = 123 },

        new PointDataInfo { PointName = "Point 2", PointId = 456 },

        new PointDataInfo { PointName = "Point 3", PointId = 789},

        new PointDataInfo { PointName = "Point 4", PointId = 111},

        new PointDataInfo { PointName = "Point 5", PointId = 222},

        new PointDataInfo { PointName = "Point 6", PointId = 333},

        new PointDataInfo { PointName = "Point 7", PointId = 444},

        new PointDataInfo { PointName = "Point 8", PointId = 555},

        new PointDataInfo { PointName = "Point 9", PointId = 666},


    };

    public class ChartDataPoint

    {

        public string Timestr { get; set; }

        //public double metrics { get; set; }

        public double metrics { get; set; }

    }


    ObservableCollection<SeriesData> SeriesCollection = new ObservableCollection<SeriesData>();


    public async Task AddChartSeries()

    {

        SelectedItems<PointDataInfo> items = await sfListView.GetCheckedItemsAsync();

        await Connection(items.Data);


    }


    protected override void OnInitialized()

    {

        base.OnInitialized();

    }


    public async Task Connection(List<PointDataInfo> reqList)

    {

        var timerPointChanges = new PeriodicTimer(TimeSpan.FromMilliseconds(1000));

        while (await timerPointChanges.WaitForNextTickAsync())

        {

            foreach (var x in GenerateData(reqList))

            {

                var seriesData = SeriesCollection.Where(y => x.PointId == y.PointId).FirstOrDefault();

                if (seriesData != null)

                {

                    if (seriesData.Data.Count > 10)

                    {

                        seriesData.Data.RemoveAt(0);

                    }


                    seriesData.Data.Add(new ChartDataPoint

                        {

                            Timestr = x.Timestr,

                            metrics = x.dataValue

                        });

                }

                else

                {

                    SeriesData SeriesData = new SeriesData();

                    SeriesCollection.Add(new SeriesData

                        {

                            XName = nameof(ChartDataPoint.Timestr),

                            YName = nameof(ChartDataPoint.metrics),

                            Data = new ObservableCollection<ChartDataPoint>

                            {

                                new ChartDataPoint

                                {

                                    Timestr = x.Timestr,

                                    metrics = x.dataValue

                                }

                            },

                            PointId = x.PointId,

                            PointName = x.PointName

                        });

                    StateHasChanged();

                }

            }

        }

    }


    private List<PointDataInfo> GenerateData(List<PointDataInfo> reqList)

    {

        Random rnd = new Random();

        List<PointDataInfo> pointDataInfoList = new List<PointDataInfo>();

        foreach (var pointDataInfo in reqList)

        {

            pointDataInfoList.Add(new PointDataInfo() { PointId = pointDataInfo.PointId, Timestr = DateTime.Now.ToLongTimeString(),

                                            dataValue = rnd.Next(1, 100) });

        }

        return pointDataInfoList;

    }

}




Pankaj


1 Reply

DG Durga Gopalakrishnan Syncfusion Team November 8, 2022 10:00 AM

Hi Pankaj,


We have validated your reported scenario. Please confirm us whether you need to create a new chart or need to add a series to a chart or need to add data point to required series for a second. We already have the documentation for adding the series.


UG : https://blazor.syncfusion.com/documentation/chart/how-to/add-remove


We have an online demo for live update of chart series data points. Please check with the below link.


Online Demo : https://blazor.syncfusion.com/demos/chart/live-chart?theme=fluent


If the provided suggestion doesn’t meet your requirement, please share us your requirement in detail so that it will be helpful to proceed further. Please revert us if you have any concerns.


Regards,

Durga Gopalakrishnan.


Loader.
Live Chat Icon For mobile
Up arrow icon