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