In this blog, we will learn how to create and update a real-time chart in a Blazor server-side app using SignalR communication.
SignalR is an open-source software library used to send asynchronous notifications to client-side applications. The library includes both server-side and client-side components.
SignalR works great in any kind of web app, but the best use cases are generally apps that need dynamically changing real-time data to be presented in the UI.
We are going to create a real-time chart in a Blazor server-side app using the Syncfusion Blazor Charts component and SignalR.
Follow these steps to create a Blazor server-side application:
Thus, we have created the Blazor server-side app.
Let’s configure the SignalR communication library with the Blazor server-side app.
Add the SignalR client library to the Blazor server-side project:
Let’s add the SignalR hub to the Blazor server-side project:
using Microsoft.AspNetCore.SignalR; namespace BlazorSignalRChartApp.Server.Hubs { public class ChartHub : Hub { } }
using BlazorSignalRChartApp.Server.Hubs; builder.Services.AddSignalR(); app.MapHub<ChartHub>("/charthub"); app.MapFallbackToPage("/_Host");
This code adds the SignalR to the request pipeline by pointing to the ChartHub class with the provided /charthub path.
Next, we are going to use the Syncfusion Blazor Charts component to create a real-time chart. First, install the charts package:
@using Syncfusion.Blazor
using BlazorSignalRChartApp.Server.Hubs; using Syncfusion.Blazor; var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddSignalR(); builder.Services.AddSyncfusionBlazor();
<script src="https://cdn.syncfusion.com/blazor/syncfusion-blazor-base.min.js"></script> <script src="https://cdn.syncfusion.com/blazor/20.3.47/syncfusion-blazor.min.js"></script>
@using Syncfusion.Blazor.Charts <SfChart> </SfChart>
We have configured the SignalR server and added the Syncfusion Blazor Charts control in the client. Next, let’s see how to populate data to the chart through SignalR client:
public class ChartData { Public DateTime Date { get; set; } public int Value { get; set; } }
public async Task UpdateData() { await Clients.All.SendAsync("ReceiveMessage", GetData()); } public static List<ChartData> GetData() { var r = new Random(); return new List<ChartData>() { new ChartData { Date = new DateTime(2022, 2, 2), Value = r.Next(1, 40) }, new ChartData { Date = new DateTime(2022, 3, 2), Value = r.Next(1, 40) }, new ChartData { Date = new DateTime(2022, 4, 2), Value = r.Next(1, 40) }, new ChartData { Date = new DateTime(2022, 5, 2), Value = r.Next(1, 40) } }; }
private HubConnection? hubConnection; protected override async Task OnInitializedAsync() { hubConnection = new HubConnectionBuilder() .WithUrl(NavigationManager.ToAbsoluteUri("/charthub")) .Build(); await hubConnection.StartAsync(); }
<SfChart Title="Stock Price Analysis of Product X"> <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea> <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"> <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines> </ChartPrimaryXAxis> <ChartPrimaryYAxis Title="Price" Minimum="0" Maximum="40" Interval="4" LabelFormat="${value}"> <ChartAxisLineStyle Width="0"></ChartAxisLineStyle> <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines> </ChartPrimaryYAxis> <ChartTooltipSettings Enable="true"></ChartTooltipSettings> <ChartSeriesCollection> <ChartSeries Type="ChartSeriesType.Line"> </ChartSeries> </ChartSeriesCollection> </SfChart>
await hubConnection.SendAsync("UpdateData");
<ChartSeriesCollection> <ChartSeries DataSource="@Data" XName="Date" Width="2" YName="Value" Type="ChartSeriesType.Line"> </ChartSeries> </ChartSeriesCollection> @code { public List<ChartData> Data; hubConnection.On<List<ChartData>>("ReceiveMessage", (data) => { Data = data; InvokeAsync(StateHasChanged); }); }
For the complete example, check out the creating a real-time chart using SignalR in a Blazor server-side app demo on GitHub.
Thanks for reading! In this blog, we’ve seen how to create and update a real-time chart in a Blazor server-side app using the Syncfusion Blazor Charts component and SignalR communication. Try out the steps in this blog and leave your valuable feedback in the comments section.
Essential Studio for Blazor offers over 80+ UI components and file-format libraries. Use them to build world-class applications!
For questions, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!