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
close icon

Getting error while rendering the chart

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


6 Replies

SB Swetha Babu Syncfusion Team October 17, 2022 01:52 AM

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



SB Swetha Babu Syncfusion Team October 17, 2022 01:54 AM

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




PK pankaj kumar jain replied to Swetha Babu October 17, 2022 02:18 PM

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



SB Swetha Babu Syncfusion Team October 18, 2022 07:19 AM

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



PK pankaj kumar jain October 20, 2022 09:37 AM

Thanks Swetha.. I am good withit.



SB Swetha Babu Syncfusion Team October 21, 2022 01:30 AM

Hi Pankaj,


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


Regards,

Swetha


Loader.
Live Chat Icon For mobile
Up arrow icon