---
title: "How do you create a dashboard with real-time data on .net?"  
description: "How do you create a dashboard with real-time data on .net?"  
author: "Ravi Vishwakarma"  
published: 2024-10-18  
updated: 2024-11-20  
canonical: https://www.mindstick.com/forum/161013/how-do-you-create-a-dashboard-with-real-time-data-on-dot-net  
category: ".net"  
tags: ["c#", ".net"]  
reading_time: 4 minutes  

---

# How do you create a dashboard with real-time data on .net?

How do you create a [dashboard](https://answers.mindstick.com/qa/34007/reports-and-dashboard-limitations-in-salesforce) with **real-time [data](https://www.mindstick.com/articles/13050/salesforce-aiming-to-dominate-predictive-analytics-with-data-science)** on .net?

![Analytics - Start using an advanced analytics platform - Opentracker](https://www.opentracker.net/wp-content/uploads/2017/10/header.png)

## Replies

### Reply by Anubhav Sharma

To create a real-time dashboard in .NET, you can use several approaches depending on the nature of the real-time data and the client-server interaction model you need. Here’s a high-level guide on how to implement it:

### Key Components

1. **ASP.NET (MVC or Web API)**: Used to serve the dashboard's front-end and provide real-time data updates via APIs.
2. **SignalR**: A library for adding real-time web functionality, allowing the server to push updates to the client instantly.
3. **Frontend (HTML, JavaScript, and possibly a framework like React, Angular, or Vue.js)**: Used to display data on the dashboard and handle user interactions.
4. **Database**: To store data and retrieve the latest information. SQL Server, MongoDB, or any other database can be used.
5. **Background Services**: If you need to fetch real-time data from external APIs, background services can help with data collection.

### Step-by-Step Approach

#### 1. Set up ASP.NET MVC or Web API

- Create a new ASP.NET MVC project or an ASP.NET Web API project.
- Set up controllers and views for displaying the dashboard.

#### 2. Add SignalR for Real-Time Updates

SignalR enables bi-directional communication between the server and the client, which is essential for real-time dashboards.

## Install the SignalR NuGet package:

```cs
Install-Package Microsoft.AspNet.SignalR
```

Set up the SignalR Hub:

```cs
public class DashboardHub : Hub
{
    public async Task SendUpdate(string message)
    {
        await Clients.All.SendAsync("ReceiveUpdate", message);
    }
}
```

Configure SignalR in your `Startup.cs` (or `Program.cs` if using newer versions):

```cs
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<DashboardHub>("/dashboardHub");
    });
}
```

#### 3. Client-Side Integration

Set up SignalR on the client-side by installing the SignalR JavaScript package.

## Add this to your HTML/JavaScript files:

```javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.9/signalr.min.js"></script>
```

## Initialize the SignalR connection:

```cs
const connection = new signalR.HubConnectionBuilder()
    .withUrl("/dashboardHub")
    .build();

connection.on("ReceiveUpdate", (message) => {
    console.log("Data received:", message);
    // Update your dashboard UI with the new data
});

connection.start().catch(err => console.error(err.toString()));
```

#### 4. Fetch and Push Real-Time Data

**Background Services**: If you're collecting real-time data from an external API, you might want to create a background service using `IHostedService` or `BackgroundService`.

## Example background service to fetch and push data:

```cs
public class RealTimeDataService : BackgroundService
{
    private readonly IHubContext<DashboardHub> _hubContext;

    public RealTimeDataService(IHubContext<DashboardHub> hubContext)
    {
        _hubContext = hubContext;
    }

    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        while (!stoppingToken.IsCancellationRequested)
        {
            var newData = await FetchDataFromExternalSource();
            await _hubContext.Clients.All.SendAsync("ReceiveUpdate", newData);
            await Task.Delay(5000); // Push data every 5 seconds
        }
    }

    private Task<string> FetchDataFromExternalSource()
    {
        // Simulate fetching real-time data
        return Task.FromResult(DateTime.Now.ToString());
    }
}
```

Don’t forget to register the background service in `Startup.cs`:

```cs
services.AddHostedService<RealTimeDataService>();
```

#### 5. Dashboard UI (Optional)

1. Use JavaScript, along with SignalR, to dynamically update dashboard charts, graphs, or tables with real-time data.
2. You can use charting libraries like **Chart.js**, **Highcharts**, or **D3.js** for data visualization.

## Example to update a chart using Chart.js:

```javascript
connection.on("ReceiveUpdate", (data) => {
    myChart.data.datasets[0].data.push(data);  // Update the chart's data
    myChart.update();  // Redraw the chart
});
```

#### 6. Deploy and Monitor

- Deploy your ASP.NET dashboard to a web server (like IIS or Kestrel).
- Set up logging and monitoring to track real-time updates and background tasks.

### Alternative: Use WebSockets (if needed)

If SignalR is overkill or you're more comfortable with WebSockets, you can directly use the WebSocket protocol for real-time communication, but SignalR simplifies the process and handles many complexities like connection fallbacks.

This setup will provide you with a real-time, dynamically updated dashboard in . NET.


---

Original Source: https://www.mindstick.com/forum/161013/how-do-you-create-a-dashboard-with-real-time-data-on-dot-net

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.