/AspNetCoreSignalRCharts

Using ASP.NET Core, SignalR, and ChartJs to create real-time updating charts

Primary LanguageJavaScriptMIT LicenseMIT

Real-time Charts with ASP.NET Core, SignalR, and Chart.js

chart example

This project shows how to update a real-time chart in your web browser using technologies like ASP.NET Core, SignalR, and Chart.js.

Note The backend is contrived using a Buffer type that is not thread-safe. Substitute your own implementation where data is derived from a database, web service, etc.

Getting Started

After installing the dotnet sdk, you can run the project.

dotnet run --project Charts -lp http

Then navigate to http://localhost:5296 if the browser did not open.

Thoughts

SignalR Setup

  • Setting up SignalR was relatively painless, but required some reading about what a Hub is and what a IHubContext<THub> is.
  • Using LibMan to manage JavaScript dependencies is nice. Check out libman.json in web project. There are several SignalR packages, so finding the right one was annoying.

Background Service

  • A background service is a nice approach to having a recurring event happen.

ASP.NET Core Razor Pages

  • I was able to do everything in Razor, but could have easily moved things to the IndexModel. By everything I mean injecting dependencies and generating the starting JSON for our Chart.JS element.
  • I ❤️ Razor Pages

Chart.Js

  • Relatively straightforward to set up and very responsive. The use of Canvas also allows for some interesting scenarios that I could explore later.
  • Getting data from the Razor Page/ASP.NET Core to ChartJs is an interesting challenge. I ended up using a script element with a type of application/json. Seems reasonable to me. The other choice was a global value on the window element.