Building Predictive Analytics Dashboards with ML.NET and Chart.js: Turning Data into Real-Time Insights

Introduction

Predictive analytics enables organizations to extract actionable insights from historical data. By combining ML.NET, Microsoft’s machine learning framework for .NET developers, with Chart.js, a robust JavaScript visualization library, developers can build intelligent dashboards that display trends, forecast outcomes, and support data-driven decision-making.

This article outlines how to design and implement a predictive analytics dashboard using ML.NET for model training and Chart.js for visualization within an ASP.NET Core and Angular architecture.

Why Use ML.NET with Chart.js

Technology	Purpose	Key Advantages
ML.NET	Machine learning framework for .NET	Enables model training and prediction directly in C# without requiring Python or R
Chart.js	JavaScript charting library	Offers responsive, interactive data visualization
ASP.NET Core + Angular	Backend and frontend frameworks	Provides scalable, maintainable, and modular architecture for enterprise applications

The integration of ML.NET and Chart.js allows developers to train predictive models, expose results via APIs, and present insights visually through dynamic charts in real time.

Architecture Overview

The overall flow is as follows:

+-------------------+        +---------------------+
|   ML.NET Model    | <----> |   ASP.NET Core API  |
+-------------------+        +---------------------+
                                   |
                                   |
                           (REST JSON Data)
                                   |
                                   v
                        +----------------------+
                        |  Angular + Chart.js  |
                        +----------------------+

ML.NET is used to train and serve predictive models.
ASP.NET Core exposes prediction results through REST APIs.
Angular, using Chart.js, visualizes the predictions dynamically.

Step 1: Model Training with ML.NET

Assume the goal is to predict future sales based on historical data.

Model Classes

public class SalesData
{
    public float Month { get; set; }
    public float UnitsSold { get; set; }
}

public class SalesPrediction
{
    public float Score { get; set; }
}

Training Pipeline

using Microsoft.ML;
using Microsoft.ML.Data;

var mlContext = new MLContext();
var data = mlContext.Data.LoadFromTextFile<SalesData>("sales.csv", separatorChar: ',', hasHeader: true);

var pipeline = mlContext.Transforms.Concatenate("Features", "Month")
    .Append(mlContext.Regression.Trainers.Sdca(labelColumnName: "UnitsSold", maximumNumberOfIterations: 100));

var model = pipeline.Fit(data);

// Save the model
mlContext.Model.Save(model, data.Schema, "SalesModel.zip");

This pipeline trains a regression model that predicts the number of units sold based on the month.

Step 2: Creating a Prediction API in ASP.NET Core

Expose an endpoint that consumes input and returns predicted results.

[ApiController]
[Route("api/[controller]")]
public class PredictionController : ControllerBase
{
    private readonly MLContext _mlContext;
    private readonly ITransformer _model;
    private readonly PredictionEngine<SalesData, SalesPrediction> _engine;

    public PredictionController()
    {
        _mlContext = new MLContext();
        _model = _mlContext.Model.Load("SalesModel.zip", out var _);
        _engine = _mlContext.Model.CreatePredictionEngine<SalesData, SalesPrediction>(_model);
    }

    [HttpPost("predict")]
    public IActionResult Predict([FromBody] SalesData input)
    {
        var prediction = _engine.Predict(input);
        return Ok(new { Month = input.Month, PredictedSales = prediction.Score });
    }
}

This API returns predicted sales values when provided with input data.

Step 3: Visualizing Predictions in Angular with Chart.js

Install Chart.js in your Angular project:

npm install chart.js

sales-dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Chart } from 'chart.js/auto';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-sales-dashboard',
  templateUrl: './sales-dashboard.component.html'
})
export class SalesDashboardComponent implements OnInit {
  chart: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.loadPredictions();
  }

  loadPredictions() {
    const months = [1, 2, 3, 4, 5, 6];
    const predictions: number[] = [];

    months.forEach((month, index) => {
      this.http.post<any>('https://localhost:5001/api/prediction/predict', { month })
        .subscribe(res => {
          predictions.push(res.predictedSales);
          if (predictions.length === months.length) {
            this.renderChart(months, predictions);
          }
        });
    });
  }

  renderChart(months: number[], predictions: number[]) {
    this.chart = new Chart('salesChart', {
      type: 'line',
      data: {
        labels: months.map(m => `Month ${m}`),
        datasets: [{
          label: 'Predicted Sales',
          data: predictions,
          borderWidth: 2,
          borderColor: '#2E86C1',
          fill: false
        }]
      }
    });
  }
}

sales-dashboard.component.html

<div style="height: 400px;">
  <canvas id="salesChart"></canvas>
</div>

This renders a line chart showing predicted sales for each month.

Step 4: Adding Real-Time Data Updates

To make the dashboard dynamic, integrate SignalR to push live updates from the server whenever new predictions are generated. This ensures stakeholders always view the latest forecasts without manual refreshes.

Step 5: Securing Data Communication

Use HTTPS for all API communication to encrypt traffic.
Implement JWT authentication or API keys to control access.
Store model paths and configuration settings securely using Azure Key Vault or User Secrets in development.

Common Use Cases

Sales and revenue forecasting
Inventory demand prediction
Customer churn and retention analysis
Financial performance projections
Predictive maintenance in manufacturing

Conclusion

Integrating ML.NET with Chart.js through ASP.NET Core and Angular creates a powerful foundation for intelligent dashboards. This combination allows teams to move beyond static reporting toward real-time, predictive analytics that supports proactive decision-making.

By leveraging familiar technologies and minimal additional infrastructure, developers can deliver AI-driven insights directly into existing enterprise applications, enhancing visibility and efficiency across operations.