Getting error while rendering the chart

[pankaj kumar jain]

@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)

[Swetha Babu]

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

[Swetha Babu]

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

[pankaj kumar jain]

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

[Swetha Babu]

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

[pankaj kumar jain]

Thanks Swetha.. I am good withit.

[Swetha Babu]

Hi Pankaj,

Most Welcome! Please get back to us if you need further assistance.

Regards,

Swetha