1. Home
  2. Forum
  3. Blazor
  4. SfAccumulationChart throws an exception about undefined 'throttle'

SfAccumulationChart throws an exception about undefined 'throttle'

Hello, I am using SfAccumulationChart in my Blazor project. After updating to SyncfusionBlazor 18.4.0.30, I cannot get it to work.
I created a simple project basing on https://blazor.syncfusion.com/documentation/accumulation-chart/getting-started

And I always get a following exception:

Microsoft.JSInterop.JSException: Cannot read property 'throttle' of undefined
TypeError: Cannot read property 'throttle' of undefined
    at https://localhost:44381/_content/Syncfusion.Blazor/scripts/sf-accumulation-chart-5f1ab0.min.js:1:1257
    at Object../modules/sf-accumulation-chart.js 

I attach this simple project for reference. I hope you could tell me what is wrong with it.
Best regards

Attachment: TestBlazorSfAccumulationChart_34089f21.rar

10 Replies 1 reply marked as answer
TR Travis December 22, 2020 04:28 AM UTC

Please see the following feedback bug report.
SfChart throwing JSInterop errors in Update 18.4.0.30 in Blazor | Feedback Portal (syncfusion.com)

The solution is to add a script reference to a js library named lodash.

SM Srihari Muthukaruppan Syncfusion Team December 22, 2020 06:07 AM UTC

Hi Andrzej, 
  
We look into your problem and request you to kindly include the lodash script in the HEAD element of the ~/Pages/_Host.cshtml page for server side blazor application. In case, if you are using WASM application, include it in the HEAD element of the ~/wwwroot/index.html page.  This will resolve the reported problem. 
 
Code Snippet 
<head> 
 
 
</head> 
 
​Screenshot: 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari 


AN Andrzej December 22, 2020 09:46 AM UTC

Thanks for the hint. 
Now _Host.cshtml looks like this:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TestBlazorSfAccumulationChart</title>
    <base rel='nofollow' href="~/" />
    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" />
    <link rel='nofollow' href="css/site.css" rel="stylesheet" />
    <link rel='nofollow' href="TestBlazorSfAccumulationChart.styles.css" rel="stylesheet" />
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
    <script src="https://cdn.syncfusion.com/blazor/18.1.36-beta/dist/syncfusion-blazor.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
</head>

The problem with undefined 'throttle' disappeared. However other errors appeared:

blazor.server.js:19 [2020-12-22T09:30:59.344Z] Error: System.NullReferenceException: Object reference not set to an instance of an object.
   at Syncfusion.Blazor.Charts.AccumulationChartSeries.FindSumOfPoints(IEnumerable`1 result, PropertyInfo yValue)
   at Syncfusion.Blazor.Charts.AccumulationChartSeries.GetPoints(IEnumerable`1 result, IAccumulationChart accChart)
   at Syncfusion.Blazor.Charts.SfAccumulationChart.ProcessData()
   at Syncfusion.Blazor.Charts.SfAccumulationChart.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Could it be Maybe the problem is that syncfusion-blazor.min.js is 18.1.36-beta, not a ver 18.4?


SM Srihari Muthukaruppan Syncfusion Team December 23, 2020 07:45 AM UTC

Hi Andrzej, 
 
We have analysed your query. From that we suggest you to provide get set for class created to overcome the reported scenario as shown in the below code snippet. Based on that we have prepared a sample for your reference. Please find the sample, code snippet and screenshot. 
 
 
Code Snippet: 
@using Syncfusion.Blazor.Charts 
 
<div style="padding:5px;text-align: right;"> 
    <SfAccumulationChart > 
        <AccumulationChartSeriesCollection> 
            <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals"> 
                <AccumulationDataLabelSettings Visible="true" Name="xValue" Position="AccumulationLabelPosition.Inside"></AccumulationDataLabelSettings> 
            </AccumulationChartSeries> 
        </AccumulationChartSeriesCollection> 
        <AccumulationChartTooltipSettings Enable="true" /> 
    </SfAccumulationChart> 
</div> 
 
 
@code { 
    private int currentCount = 0; 
 
    private void IncrementCount() 
    { 
        currentCount++; 
    } 
    public class ChartData 
    { 
        public string Country { get; set; } 
        public double Medals { get; set; } 
    } 
    public List<ChartData> MedalDetails = new List<ChartData> 
    { 
        new ChartData { Country= "United States of America", Medals= 46000 }, 
        new ChartData { Country= "Great Britain", Medals= 27000 }, 
        new ChartData { Country= "China", Medals= 26000 }, 
        new ChartData { Country= "United Kingdom", Medals= 23000 }, 
        new ChartData { Country= "Australia", Medals= 16000 }, 
        new ChartData { Country= "India", Medals= 36000 }, 
        new ChartData { Country= "Nigeria", Medals= 12000 }, 
        new ChartData { Country= "Brazil", Medals= 20000 }, 
     }; 
} 
 
Screenshot: 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari 


Marked as answer
AN Andrzej December 23, 2020 09:38 AM UTC

Thanks. Before I used the code from your page 'getting-started'. Now it seems to work.

SM Srihari Muthukaruppan Syncfusion Team December 24, 2020 05:05 AM UTC

Hi Andrzej, 
 
Most Welcome. 
 
Kindly get in touch with us if you need further assistance on this. 
 
Regards, 
Srihari 


GÁ Gábor February 4, 2021 06:54 PM UTC 


This example works with 18.4.0.31, but does not work for after the update 18.4.0.41



blazor.server.js:8 Uncaught (in promise) Error: System.NullReferenceException: Object reference not set to an instance of an object.
   at Syncfusion.Blazor.Charts.SfAccumulationChart.RemoveElements()
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.InvokeSynchronously(JSRuntime jsRuntime, DotNetInvocationInfo& callInfo, IDotNetObjectReference objectReference, String argsJson)
   at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.BeginInvokeDotNet(JSRuntime jsRuntime, DotNetInvocationInfo invocationInfo, String argsJson)
    at Object.endInvokeDotNetFromJS (https://localhost:44369/_framework/blazor.server.js:8:31863)
    at e.<anonymous> (https://localhost:44369/_framework/blazor.server.js:8:104999)
    at https://localhost:44369/_framework/blazor.server.js:1:20052
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44369/_framework/blazor.server.js:1:20022)
    at e.processIncomingData (https://localhost:44369/_framework/blazor.server.js:1:18006)
    at e.connection.onreceive (https://localhost:44369/_framework/blazor.server.js:1:11091)
    at WebSocket.i.onmessage (https://localhost:44369/_framework/blazor.server.js:1:39007)


System.InvalidOperationException: Sequence contains no elements
   at System.Linq.ThrowHelper.ThrowNoElementsException()
   at System.Linq.Enumerable.First[TSource](IEnumerable`1 source)
   at Syncfusion.Blazor.Charts.SfAccumulationChart.DoGroupingProcess()
   at Syncfusion.Blazor.Charts.SfAccumulationChart.RefreshChart()
   at Syncfusion.Blazor.Charts.SfAccumulationChart.ResizeChart()
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_0(Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.<>c.<.cctor>b__23_0(Object state)
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location where exception was thrown ---
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)

SM Srihari Muthukaruppan Syncfusion Team February 5, 2021 05:12 AM UTC

Hi Gábor, 
 
We have analyzed your query. From that, we suggest you add the below code snippet in the startup.cs page to overcome the reported scenario in the latest version 18.4.41. We have also attached the sample for your reference. Please find the sample and screenshot below. 
 
 
Code Snippet: 
public void ConfigureServices(IServiceCollection services) 
        { 
            services.AddSignalR(e => { 
                e.MaximumReceiveMessageSize = 102400000; 
            }); 
            services.AddRazorPages(); 
            services.AddServerSideBlazor(); 
            services.AddSyncfusionBlazor(); 
            services.AddSingleton<WeatherForecastService>(); 
        }  
Screenshot: 
 
 
If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.  
 
  1. Try to reproduce the reported scenario in the provided sample 
  2. Share the details if you have done any other customization
 
Regards, 
Srihari M  


KE Kambiz Ezzati replied to Koch Gábor June 21, 2021 08:55 PM UTC

Thanks. The sample resolved my problem to use Blazor Server offline.


SM Srihari Muthukaruppan Syncfusion Team June 22, 2021 04:52 AM UTC

Hi Kambiz, 
 
Most welcome. 
 
Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   
   
Thanks,   
Srihari 


Loader.
Up arrow icon