Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Blazor server-side Chartjs

I'm using blazor server-side and trying to display a chart with Blazor.Chartjs. The problem I have is that I have the form that the user enters date and the application will get data from database with the chosen date. For the first time the chart will be displayed but when user change date and I want to chart be changed with new data but I have this error:

Unhandled exception rendering component: Could not find a chart with the given id. c4e7005b-e203-46f1-9719-68c6d14d848f
Microsoft.JSInterop.JSException: Could not find a chart with the given id. c4e7005b-e203-46f1-9719-68c6d14d848f
   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit '268yoqwqVBLFanukxnq3R4LjrnKrEAgIdVkQSPnIgfY'.
Microsoft.JSInterop.JSException: Could not find a chart with the given id. c4e7005b-e203-46f1-9719-68c6d14d848f
   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
like image 927
The_Time_Bender Avatar asked Nov 16 '22 10:11

The_Time_Bender


1 Answers

I had the same problem for a long time. I finally found that i needed to clear the dataset and add the new data back into a new dataset then update the chart.

I am clearing the data set with _lineConfig.Data.Datasets.Clear();

then create a new version as below

TempProductionLineTotal = SqlProdData.GetProductionTotals(searchDate[0], searchDate[1]);

_productionDataSet = new LineDataset<TimeTuple<int>>   
{
BackgroundColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Orange),
BorderColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Orange),
Label = "Daily Total",
Fill = false,
BorderWidth = 2,
PointRadius = 1,
PointBorderWidth = 2,
SteppedLine = SteppedLine.False,
Hidden = false,
LineTension = 0.0   };

_productionDataSet.AddRange(TempProductionLineTotal

.Select(p => new TimeTuple<int>(new Moment(p.DateNTime),Convert.ToInt32(p.Daily_Lineal))));

_lineConfig.Data.Datasets.Add(_productionDataSet);
like image 89
Figit Avatar answered Apr 15 '23 05:04

Figit