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.