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

Overview

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.
You might also like...

A general purpose, real-time visualization library.

Epoch By Ryan Sandor Richards Epoch is a general purpose charting library for application developers and visualization designers. It focuses on two di

Dec 30, 2022

Simple HTML5 Charts using the canvas tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Jan 7, 2023

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs β€”

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs β€”

p5.js Welcome! πŸ‘‹ πŸ‘‹πŸΏπŸ‘‹πŸ½πŸ‘‹πŸ»πŸ‘‹πŸΎπŸ‘‹πŸΌ p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for a

Jan 1, 2023

Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

Dec 31, 2022

Progressive svg pie, donut, bar and line charts

Peity Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini svg pie, donut, line or bar chart. Basic Usage HTM

Jan 1, 2023

Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Dec 7, 2022

Compose complex, data-driven visualizations from reusable charts and components with d3

d3.compose Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. Advan

Jan 3, 2023

RocketTrades - Discord Stocks and Charts bot. Written for the RocketTrades Discord bot.

Rocket Trades RocketTrades, Discord Charts and Stocks bot. MORE DETAILS AND UPDATES TO COME SOON Getting started β€’ Installation β€’ Configuration β€’ Inte

Feb 4, 2022

Beautiful and interactive javascript charts for Java-based web applications.

Wicked Charts Beautiful and interactive JavaScript charts for Java-based web applications. Check out the Changelog Check out the Feature Overview with

Aug 23, 2022
Owner
Khalid Abuhakmeh
Loves @NicoleAbuhakmeh. πŸš€πŸ§  πŸ₯‘@JetBrains dev advocate #Photoshop Whisperer. #OSS supporter. @dotnet developer. @dotnet-foundation member. He/Him
Khalid Abuhakmeh
Makes waterfall charts easy with chartjs-2

Installation npm install --save chartjs-plugin-waterfall Here's what it looks like: Usage Just import the plugin and add it to any chart that you want

Ziegert Group 10 Jul 16, 2022
Crosshair plugin for ChartJS

Chart.js plugin to draw vertical crosshair, zoom, interpolate values and sync chart interactions. Requires Chart.js 3.4.0 or later. Documentation Inst

Abel Heinsbroek 118 Dec 12, 2022
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching ch

Joe Walnes 2.2k Dec 13, 2022
Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data.

Synchro Charts Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data. You can learn m

Amazon Web Services - Labs 60 Dec 29, 2022
Create beautiful charts with one line of JavaScript

Chartkick.js Create beautiful charts with one line of JavaScript See it in action Supports Chart.js, Google Charts, and Highcharts Also available for

Andrew Kane 1.2k Jan 2, 2023
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Dec 28, 2022
Create beautiful JavaScript charts with one line of Ruby

Chartkick Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries! See it in action Chartkick 4.0 was recen

Andrew Kane 6.1k Jan 8, 2023
Chart.js plugin to create charts with a hand-drawn, sketchy, appearance

chartjs-plugin-rough Chart.js plugin to create charts with a hand-drawn, sketchy, appearance Version 0.2 requires Chart.js 2.7.0 or later, and Rough.j

Akihiko Kusanagi 73 Dec 1, 2022
A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

freeboard freeΒ·board (noun) *\ˈfrΔ“-ˌbΘ―rd* the distance between the waterline and the main deck or weather deck of a ship or between the level of the w

freeboard 6.3k Dec 28, 2022
JavaScript toolkit for creating interactive real-time graphs

Rickshaw Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at Shutterstock Table of Contents Getting Started Ins

Shutterstock 6.5k Dec 28, 2022