Blazor server-side Chartjs

user_13167545 0
Viewed 1626

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)
chart.js blazor-server-side
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);
user_128444260
Related