@using CommonLibrary
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons
@using System.Collections.ObjectModel
@using System.Net.WebSockets
<div class="container">
<SfChart>
<ChartSeriesCollection>
@foreach (var series in SeriesCollection)
{
@*<ChartSeries Type="ChartSeriesType.Line" XName=@series.XName YName=@series.XName DataSource=@series.Data>
</ChartSeries>*@
<ChartSeries Type="ChartSeriesType.Line"
DataSource="@series.Data" XName="@nameof(ChartDataPoint.Timestr)" YName="@nameof(ChartDataPoint.metrics)" Name="@nameof(series.PointId)">
</ChartSeries>
}
</ChartSeriesCollection>
</SfChart>
</div>
@code {
private SfChart liveChart;
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 class ChartDataPoint
{
public string Timestr { get; set; }
//public double metrics { get; set; }
public int metrics { get; set; }
}
ObservableCollection<SeriesData> SeriesCollection = new ObservableCollection<SeriesData>();
public void Connection()
{
List<PointDataInfo> reqList = new List<PointDataInfo>();
reqList.Add(new PointDataInfo { PointId = 1234 });
reqList.Add(new PointDataInfo { PointId = 3456 });
//var clientConnection = new ChartClientConnection(new ClientWebSocket(), new Uri("wss://localhost:7222/DirectConnect/123"));
//var cts = new CancellationTokenSource();
Random r = new Random();
for (int i = 0; i < 100; i++)
{
int pointid=i%2==0?1234:3456;
var seriesData = SeriesCollection.Where(y => pointid == y.PointId).FirstOrDefault();
if (seriesData != null)
{
seriesData.Data.Add(new ChartDataPoint
{
Timestr = DateTime.Now.ToString("hh:mm:ss tt"),
metrics = r.Next(1,100)
});
}
else
{
SeriesData SeriesData = new SeriesData();
SeriesCollection.Add(new SeriesData
{
XName = nameof(ChartDataPoint.Timestr),
YName = nameof(ChartDataPoint.metrics),
Data = new ObservableCollection<ChartDataPoint>
{
new ChartDataPoint
{
Timestr = DateTime.Now.ToString("hh:mm:ss tt"),
metrics = r.Next(1,100)
}
},
PointId = pointid
});
}
}
}
}
Error Details:
blazor.webassembly.js:1
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Input string was not in a correct format.
System.FormatException: Input string was not in a correct format.
at System.Number.ThrowOverflowOrFormatException(ParsingStatus status, TypeCode type)
at System.Number.ParseDouble(ReadOnlySpan`1 value, NumberStyles styles, NumberFormatInfo info)
at System.Double.Parse(String s, IFormatProvider provider)
at System.Convert.ToDouble(String value, IFormatProvider provider)
at System.String.System.IConvertible.ToDouble(IFormatProvider provider)
at System.Convert.ToDouble(Object value, IFormatProvider provider)
at Syncfusion.Blazor.Charts.Internal.ChartSeriesRenderer.GetSetXValue(Point point, Int32 index)
at Syncfusion.Blazor.Charts.Internal.ChartSeriesRenderer.ProcessObjectData(Type firstDataType, String x_Name, String y_Name, IEnumerable`1 currentViewData)
at Syncfusion.Blazor.Charts.Internal.ChartSeriesRenderer.ProcessData()
at Syncfusion.Blazor.Charts.Internal.ChartSeriesRendererContainer.ProcessData()
at Syncfusion.Blazor.Charts.SfChart.ProcessData()
at Syncfusion.Blazor.Charts.SfChart.PerformLayout()
at Syncfusion.Blazor.Charts.SfChart.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
Hi Pankaj,
Greetings from Syncfusion.
We have created a blazor application with the latest package (v20.3.49) using the provided code snippet in the WASM to test the reported scenario. But, we are unable to reproduce the same. Please find the below tested sample for your reference.
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorWASMApp979925332
Code Snippet:
<SfChart> <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"></ChartPrimaryXAxis> <ChartSeriesCollection>
@foreach (var series in SeriesCollection) {
<ChartSeries Type="ChartSeriesType.Line" XName=@series.XName YName=@series.XName DataSource=@series.Data>
</ChartSeries> }
</ChartSeriesCollection>
</SfChart> |
Screenshot:
If the reported scenario still persists, please modify the above sample to replicate the reported scenario. It will be helpful for us to analyze further and assist you better.
Regards,
Swetha
Hi Pankaj,
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.
Regards,
Swetha
Hi Swetha,
That's works but I had to click twice to generate chart.
On first Click the Message in Red get disappeared and second click the chart gets generated.
Is it is due to the trail version?
Also I am uanable to increase the Width of Chart. Please suggest
On Load:
First Time click :
Second click :
Thanks
Pankaj
Hi Pankaj,
We have created a simple blazor application using the Chart and button to reproduce the reported scenario. But, we are unable to reproduce the same. When rendering the chart in the button click, the Chart gets rendered in the first click. Please find the below tested sample link for your reference. We can set the width of the Chart by using the Width property in the chart.
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorWASMApp1319927014
Code Snippet:
@if(isChartLoaded) { <SfChart> <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"></ChartPrimaryXAxis> <ChartPrimaryYAxis Minimum="0" Maximum="100" Interval="20"></ChartPrimaryYAxis> <ChartSeriesCollection> <ChartSeries DataSource="ChartPoints" XName="XName" YName="YName" Type="ChartSeriesType.Line"></ChartSeries> </ChartSeriesCollection> </SfChart> } |
Screenshot:
On Load:
After button click:
If the reported scenario still persists, please modify the above sample to replicate the reported scenario. It will be helpful for us to analyze further and assist you better.
Regards,
Swetha
Thanks Swetha.. I am good withit.
Hi Pankaj,
Most Welcome! Please get back to us if you need further assistance.
Regards,
Swetha