TheLazy.Dev
Portfolio GitHub

Blog

blazor |chart |webdev |ui

Instantly Update a Real-Time Chart with SignalR in Blazor Server-Side App

jollenmoyani

Jollen Moyani

Posted on February 8, 2023

Instantly Update a Real-Time Chart with SignalR in Blazor Server-Side App

In this blog, we will learn how to create and update a real-time chart in a Blazor server-side app using SignalR communication.

What is SignalR?

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.

Prerequisites

Create a Blazor server-side app

Follow these steps to create a Blazor server-side application:

  1. Open Visual Studio and select create a new project.
  2. Then, select the Blazor Server App template and click Next.
  3. Name the project BlazorSignalRChartApp and click Next. Ensure the target framework is .NET 6.0.
  4. Finally, select Create.

Thus, we have created the Blazor server-side app.

Setting up SignalR in the Blazor server project

Let’s configure the SignalR communication library with the Blazor server-side app.

Step 1: Add SignalR client library.

Add the SignalR client library to the Blazor server-side project:

  1. In the Solution Explorer window, right-click the BlazorSignalRChartApp project and select Manage NuGet Packages. Select Manage NuGet Packages
  2. Now, confirm that the Package source is set to nuget.org. Set the Package source to nuget.org
  3. Search for and select the Microsoft.AspNetCore.SignalR.Client package and then install it. Select Microsoft.AspNetCore.SignalR.Client package

Step 2: Add SignalR hub to the project.

Let’s add the SignalR hub to the Blazor server-side project:

  1. In the Solution Explorer window, right-click the BlazorSignalRChartApp project and add a folder called Hubs. Then, add a class called ChartHub. The class should inherit from the SignalR’s Hub class, which is in the Microsoft.AspNetCore.SignalR namespace. Refer to the following code example. 
using Microsoft.AspNetCore.SignalR;
namespace BlazorSignalRChartApp.Server.Hubs
{
    public class ChartHub : Hub
    {

    }
}
Enter fullscreen mode Exit fullscreen mode

2.Finally, to complete the configuration for the SignalR, add the endpoint for the hub in the Program.** cs** file like in the following code example.

using BlazorSignalRChartApp.Server.Hubs;
builder.Services.AddSignalR();
app.MapHub<ChartHub>("/charthub");
app.MapFallbackToPage("/_Host");
Enter fullscreen mode Exit fullscreen mode

This code adds the SignalR to the request pipeline by pointing to the ChartHub class with the provided /charthub path.

Step 3: Add Syncfusion Blazor Charts to the project.

Next, we are going to use the Syncfusion Blazor Charts component to create a real-time chart. First, install the charts package:

  1. In the Solution Explorer window, right-click the BlazorSignalRChartApp project and select Manage NuGet Packages.
  2. Then, confirm that the Package source is set to nuget.org.
  3. Search for and select the Syncfusion.** Blazor.Chart package** and then install it.
  4. Open the ~/_Imports.razor file and import the Syncfusion.Blazor namespace in it. 
@using Syncfusion.Blazor
Enter fullscreen mode Exit fullscreen mode

5.Then, open the ~/Program.cs file and register the Syncfusion Blazor Service.

using BlazorSignalRChartApp.Server.Hubs;
using Syncfusion.Blazor;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddSignalR();
builder.Services.AddSyncfusionBlazor();
Enter fullscreen mode Exit fullscreen mode

a. Open the _Layout.cshtml file and add the following script reference in it.

<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>
Enter fullscreen mode Exit fullscreen mode

b. Add the Syncfusion Blazor Charts component in the Razor file. The Charts component is added in the ~/Pages/Index.razor file under the ~/Pages folder.

@using Syncfusion.Blazor.Charts
<SfChart>
</SfChart>
Enter fullscreen mode Exit fullscreen mode

c. Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. Then, the Syncfusion Blazor Charts component will be rendered in the default web browser.

Adding Syncfusion Blazor Charts Component in the Server-Side App

Adding Syncfusion Blazor Charts Component in the Server-Side App

Step 4: Updating data to the chart through SignalR.

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:

  1. First, create a class named ChartData with Date and Value as properties inside the Data folder. 
public class ChartData
{
    Public DateTime Date { get; set; }
    public int Value { get; set; }
}
Enter fullscreen mode Exit fullscreen mode

2.Inside the ChartHub class, add the UpdateData() hub method to send the list of ChartData to the client when called. Refer to the following code.

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) }
   };
}
Enter fullscreen mode Exit fullscreen mode

3.Next, create a connection to the hub ( charthub ) with the following code in the OnInitializedAsync method of the Index.razor file. Then, start the connection with the StartAsync method.

private HubConnection? hubConnection;
protected override async Task OnInitializedAsync()
{
   hubConnection = new HubConnectionBuilder()
      .WithUrl(NavigationManager.ToAbsoluteUri("/charthub"))
      .Build();     
        await hubConnection.StartAsync();
}
Enter fullscreen mode Exit fullscreen mode

4.The connection is established. Let’s replace the empty chart in the Index.razor file with a line chart. Refer to the following code example.

<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>
Enter fullscreen mode Exit fullscreen mode

5.Then, call the hub method on the server with the specified method name using SendAsync.

await hubConnection.SendAsync("UpdateData");
Enter fullscreen mode Exit fullscreen mode

6.Then, assign the data received by the client to the chart and map the XName and YName properties of the chart series.

<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);          
 });
}
Enter fullscreen mode Exit fullscreen mode

7.Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. Then, the Syncfusion Blazor Charts component with data from SignalR will be rendered in the default web browser.

Updating Real-Time Chart Data Using SignalR in Blazor Server-Side App

Updating Real-Time Chart Data Using SignalR in Blazor Server-Side App

8.Let’s create a timer that runs the AddData method to update the data in the chart through SignalR every two seconds. Now, every two seconds, the data from SignalR will be fed to the chart. Refer to the following GIF image.

Updating Real-Time Chart Data Every Two Seconds Using SignalR in Blazor Server App

Updating Real-Time Chart Data Every Two Seconds Using SignalR in Blazor Server App

GitHub reference

For the complete example, check out the creating a real-time chart using SignalR in a Blazor server-side app demo on GitHub.

Conclusion

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!

Related blogs

💖 💪 🙅 🚩
jollenmoyani
Jollen Moyani

Posted on February 8, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Instantly Update a Real-Time Chart with SignalR in Blazor Server-Side App
blazor Instantly Update a Real-Time Chart with SignalR in Blazor Server-Side App

February 8, 2023