DEV Community: S. Olusegun Ojo

Creating Stunning Charts for Your ASP.NET Applications - Part 2

S. Olusegun Ojo — Tue, 12 Mar 2024 15:26:43 +0000

Introduction

In my last post, I showed how to use ChartsJS to render data from an ASP.NET application. I also mentioned Highcharts as another possible option.

In this post, I will use Highcharts to display the same data as in my previous post: a bar chart and a pie chart.

About Highcharts

Developed by Highsoft, Highcharts has been around since 2009. Unlike ChartsJS, which uses HTML5 canvas, Highcharts uses SVG rendering.

Highcharts is very versatile and offers more functionality than ChartsJS. It also allows charts for stocks, maps, gantt and a dashboard feature. One In addition, it allows, using GPT, the creation of data visualisations with natural language prompts. By default, Highcharts' charts are interactive and it has helpful defaults, such as colour, which ChartsJS doesn't by default. Highcharts also has integrations for languages such as Python, C#, etc.

Unlike ChartsJS, Highcharts is not free software. It can be used for free, however, with a URL to the Highcharts website displayed on the rendered chart.

Using Highcharts

On the frontend, Highcharts uses svg rendering to display charts. Like ChartsJS, it allows data to be added in a regular JS array. It can also be richly customised.

Here is a sample use from the official documentation:

Highcharts.chart('container', {

    title: {
        text: 'U.S Solar Employment Growth',
        align: 'left'
    },

    subtitle: {
        text: 'By Job Category. Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>.',
        align: 'left'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },

    xAxis: {
        accessibility: {
            rangeDescription: 'Range: 2010 to 2020'
        }
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation & Developers',
        data: [43934, 48656, 65165, 81827, 112143, 142383,
            171533, 165174, 155157, 161454, 154610]
    }, {
        name: 'Manufacturing',
        data: [24916, 37941, 29742, 29851, 32490, 30282,
            38121, 36885, 33726, 34243, 31050]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 30000, 16005, 19771, 20185, 24377,
            32147, 30912, 29243, 29213, 25663]
    }, {
        name: 'Operations & Maintenance',
        data: [null, null, null, null, null, null, null,
            null, 11164, 11218, 10077]
    }, {
        name: 'Other',
        data: [21908, 5548, 8105, 11248, 8989, 11816, 18274,
            17300, 13053, 11906, 10073]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});

To use it with our dotnet application, we will simply supply our data from the backend as an array of values to the library.

Demo

This demo is in the same repository as that for the last post, https://github.com/shegzee/dotnet-charts. I am rendering the same sample data in another Razor page, ChartArrayBasic-Highcharts.

Models/BankData.cs

Just like before, the data I will be charting includes the bank name, colour for the bar or pie slice and transactions count (the actual data value to be charted).

namespace TransChartDemo.Models
{
    public class BankData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Colour { get; set; }
        public int Year { get; set; }
        public int TransactionsCount { get; set; }
    }
}

Repositories/IBankDataRepository.cs

using TransChartDemo.Models;

namespace TransChartDemo.Repositories
{
    public interface IBankDataRepository
    {
        BankData GetBankData(int id);
        void AddBankData(BankData bankData);
        void UpdateBankData(BankData bankData);
        void DeleteBankData(int id);
        List<BankData> GetAllBankData();

    }
}

Repositories/BankDataRepository.cs

using TransChartDemo.Models;

namespace TransChartDemo.Repositories
{
    public class BankDataRepository : IBankDataRepository
    {
        List<BankData> sampleBankData = new List<BankData>
        {
            new BankData { Id = 1, Name = "GTB", Colour = "Orange", TransactionsCount = 1923 },
            new BankData { Id = 2, Name = "UBA", Colour = "Red", TransactionsCount = 2011 },
            new BankData { Id = 3, Name = "FBN", Colour = "LightBlue", TransactionsCount = 1820 },
            new BankData { Id = 4, Name = "ZIB", Colour = "Black", TransactionsCount = 1500 },
            new BankData { Id = 4, Name = "ACC", Colour = "LightGreen", TransactionsCount = 1947 }
        };
        public void AddBankData(BankData bankData)
        {
            sampleBankData.Add(bankData);
        }

        public void DeleteBankData(int id)
        {
            sampleBankData.Remove(sampleBankData.FirstOrDefault(b => b.Id == id));
        }

        public List<BankData> GetAllBankData()
        {
            return sampleBankData;
        }

        public BankData GetBankData(int id)
        {
            return sampleBankData.FirstOrDefault(b => b.Id == id);
        }

        public void UpdateBankData(BankData bankData)
        {
            var oldBankData = sampleBankData.FirstOrDefault();
            if (oldBankData != null)
            {
                sampleBankData.Remove(oldBankData);
                sampleBankData.Add(bankData);
            }
        }
    }
}

Program.cs

using TransChartDemo.Repositories;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

builder.Services.AddScoped<IBankDataRepository, BankDataRepository>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Pages/ChartArrayBasic-ChartsJS.cshtml.cs

Here, I'm adding the data (the list of BankData objects I manually created in BankDataRepository.cs) to the ViewData dictionary so it is accessible from ChartArrayBasic-Highcharts.cshtml.

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Text.Json;
using TransChartDemo.Repositories;

namespace TransChartDemo.Pages
{
    public class ChartArrayBasicHighchartsModel : PageModel
    {
        private readonly IBankDataRepository bankDataRepository;

        public ChartArrayBasicHighchartsModel(IBankDataRepository _bankDataRepository)
        {
            bankDataRepository = _bankDataRepository;
        }

        public void OnGet()
        {
            var bankData = bankDataRepository.GetAllBankData();
            ViewData["allBankData"] = JsonSerializer.Serialize(bankData);
        }
    }
}

Pages/ChartArrayBasic-ChartsJS.cshtml

In this Razor page, I use Highcharts to render the data in ViewData["allBankData"].

@page
@model TransChartDemo.Pages.ChartArrayBasicHighchartsModel
@{

}
<div class="text-center">
    <h1 class="display-4">Charts.js Demo</h1>
    <p>Integrating Charts.js in ASP.NET Core - Highcharts</a>.</p>

    <div class="row">
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">
                    Bar Chart
                </div>
                <div class="card-body">
                    <div id="bar" class="my-4 h-25"></div>
                </div>
                <div class="card-footer">
                    Transactions across top-tier banks
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">
                    Pie Chart
                </div>
                <div class="card-body">
                    <div id="pie" class="my-4 h-25"></div>
                </div>
                <div class="card-footer">
                    Transactions among top-tier banks ;-)
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
    <script type="text/javascript">
        var jsonData = '@Html.Raw(ViewData["allBankData"])';
        var values = JSON.parse(jsonData);
        //var arr = [];
        // $.each(values, function (i, val) {
        //     var bankData = {};
        //     bankData.color = val.color;
        //     bankData.value = val.value;
        //     bankData.label = val.label;
        //     arr.push(bankData);
        // });

        var colours = {
            'GTB': 'rgba(200, 100, 0, 0.5)',
            'UBA': 'rgba(200, 50, 50, 0.5)',
            'ZIB': 'rgba(100, 50, 50, 0.5)',
            'FBN': 'rgba(50, 50, 200, 0.5)',
            'ACC': 'rgba(50, 200, 100, 0.5)',
        }

        document.addEventListener('DOMContentLoaded', function () {
            const chart = Highcharts.chart('bar', {
                chart: {
                    type: 'column'
                },
                plotOptions: {
                    column: {
                        colorByPoint: true,
                        colors: values.map(x =>
                            x.Colour
                        )
                    }
                },
                title: {
                    text: ''
                },
                xAxis: {
                    categories: values.map(x => x.Name)
                },
                yAxis: {
                    title: {
                        text: 'Bank Transactions'
                    }
                },
                series: [{
                    name: 'Bank Transactions',
                    data: values.map(x =>
                        x.TransactionsCount
                    ),
                    colors: values.map(x =>
                        x.Colour
                    )
                }]
            });
        });


        document.addEventListener('DOMContentLoaded', function () {
            Highcharts.chart('pie', {
                chart: {
                    type: 'pie'
                },
                title: {
                    text: 'Bank Transactions'
                },
                tooltip: {
                    valueSuffix: ''
                },
                subtitle: {
                    text:
                        'Bank Transactions for 2023'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}: {point.percentage:.1f}%'
                        },
                        showInLegend: true
                    }
                },
                series: [
                    {
                        name: 'Transactions',
                        colorByPoint: true,
                        data: values.map(x => ({ name: x.Name, y: x.TransactionsCount, color: x.Colour }))
                    }
                ]
            });
        })

    </script>
}

Here are the critical parts.

Bar Chart

For the bar chart, this div is created:

<div id="bar" class="my-4 h-25"></div>

The id is required by Highcharts:

//...
document.addEventListener('DOMContentLoaded', function () {
    const chart = Highcharts.chart('bar', {
//...

To have distinct colours for each column, the colorByPoint field must be set to true. The colours may then be specified in the plotOptions field. Alternatively, they can be set in the colors field for each series as will be shown below.

//...
plotOptions: {
    column: {
        colorByPoint: true,
        colors: values.map(x =>
            x.Colour
        )
    }
},
//...

The categories field under xAxis contain the names of each bar.

//...
xAxis: {
    categories: values.map(x => x.Name)
},
//...

Then the data is specified under the series field.

The colours can also be supplied in an array. This will affect only this series as opposed to using the option under plotOptions which applies to all the series when not otherwise specified.

//...
series: [{
    name: 'Bank Transactions',
    data: values.map(x =>
        x.TransactionsCount
    ),
    colors: values.map(x =>
        x.Colour
    )
}]
//...

Here is what the output looks like:

Pie Chart

For the pie chart, this div is used:

<div id="pie" class="my-4 h-25"></div>

This id is supplied to Highcharts.

//...
document.addEventListener('DOMContentLoaded', function () {
    Highcharts.chart('pie', {
        chart: {
            type: 'pie'
        },        
//...

The data option in the series allows you to supply the plot data as an array of objects.

//...
series: [
    {
        name: 'Transactions',
        colorByPoint: true,
        data: values.map(x => ({ name: x.Name, y: x.TransactionsCount, color: x.Colour }))
    }
]
//...

plotOptions allows customisation.

//...
plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            format: '{point.name}: {point.percentage:.1f}%'
        },
        showInLegend: true
    }
},
//...

The final output looks like this:

Conclusion

So far, we have used ChartsJS and Highcharts to render data fetched in C#, in a bar chart and a pie chart. This should show some of the differences between these two leading charting libraries.

The code for this demo is available at https://github.com/shegzee/dotnet-charts.

Thank you for reading, and I hope you learnt something new! I would love to know if you have used Highcharts or ChartsJS before, and which you prefer.

originally posted here

Creating Stunning Charts for Your ASP.NET Applications

S. Olusegun Ojo — Mon, 12 Feb 2024 17:51:09 +0000

Introduction

Charts are ~~fast becoming~~ an essential part of user interfaces as more and more software requires users to be able to view/visualize data. While the most obvious examples are financial and numerical data, apps in other fields such as health, fitness, transportation, blogging and even social media feature graphical means of displaying data.

There have, consequently, been an increase in the number and quality of charting software and add-ons. Microsoft's Charts Helper was a relatively convenient means of creating graphs in ASP.NET applications; however, it is no longer the recommended means of creating charts.

Newer frontend libraries such as ChartsJS and Highcharts provide robust means of creating charts. They can be used with ASP.NET conveniently, with the data simply being supplied to these charting libraries on the frontend.

Using ChartsJS in .NET

With over 60k stars on GitHub and over 2 million npm downloads (as at the time of writing), ChartsJS is the most popular charting library for Javascript. It works with the HTML5 Canvas element, allowing data and configuration be passed in as regular Javascript.

Plus ChartJS has nice animations (which you can turn off if you don't want) that make the charts look and feel even nicer. 😁

Here's an example from the ChartsJS documentation:

new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

The labels are supplied as an array of strings, the chart data values are also an array of numbers. The colours can also be provided so.

To use ChartsJS with our ASP.NET application simply requires us to provide the data from our backend to ChartsJS as arrays of values.

Demo

In this demo, available on GitHub at https://github.com/shegzee/dotnet-charts, I use ASP.NET's Razor pages to disiplay sample data in a bar chart and a pie chart.

Models/BankData.cs

In the data I will be charting, I include the bank name, colour for bar or pie slice and transactions count (the actual data value to be charted).

namespace TransChartDemo.Models
{
    public class BankData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Colour { get; set; }
        public int Year { get; set; }
        public int TransactionsCount { get; set; }
    }
}

Repositories/IBankDataRepository.cs

using TransChartDemo.Models;

namespace TransChartDemo.Repositories
{
    public interface IBankDataRepository
    {
        BankData GetBankData(int id);
        void AddBankData(BankData bankData);
        void UpdateBankData(BankData bankData);
        void DeleteBankData(int id);
        List<BankData> GetAllBankData();

    }
}

Repositories/BankDataRepository.cs

Here's the actual implementation of the IBankDataRepository. I simply have a list of BankData objects containing the relevant values.

using TransChartDemo.Models;

namespace TransChartDemo.Repositories
{
    public class BankDataRepository : IBankDataRepository
    {
        List<BankData> sampleBankData = new List<BankData>
        {
            new BankData { Id = 1, Name = "GTB", Colour = "Orange", TransactionsCount = 1923 },
            new BankData { Id = 2, Name = "UBA", Colour = "Red", TransactionsCount = 2011 },
            new BankData { Id = 3, Name = "FBN", Colour = "LightBlue", TransactionsCount = 1820 },
            new BankData { Id = 4, Name = "ZIB", Colour = "Black", TransactionsCount = 1500 },
            new BankData { Id = 4, Name = "ACC", Colour = "LightGreen", TransactionsCount = 1947 }
        };
        public void AddBankData(BankData bankData)
        {
            sampleBankData.Add(bankData);
        }

        public void DeleteBankData(int id)
        {
            sampleBankData.Remove(sampleBankData.FirstOrDefault(b => b.Id == id));
        }

        public List<BankData> GetAllBankData()
        {
            return sampleBankData;
        }

        public BankData GetBankData(int id)
        {
            return sampleBankData.FirstOrDefault(b => b.Id == id);
        }

        public void UpdateBankData(BankData bankData)
        {
            var oldBankData = sampleBankData.FirstOrDefault();
            if (oldBankData != null)
            {
                sampleBankData.Remove(oldBankData);
                sampleBankData.Add(bankData);
            }
        }
    }
}

Program.cs

In additional to the boilerplate, I configured Dependency Injection for IBankDataRepository.

using TransChartDemo.Repositories;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

builder.Services.AddScoped<IBankDataRepository, BankDataRepository>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Pages/ChartArrayBasic.cshtml.cs

In this file, I'm simply adding the data (the list of BankData objects I manually created in BankDataRepository.cs) to the ViewData dictionary so it is accessible from ChartArrayBasic.cshtml. I went the route of using these almost redundant repository interface and implementation to demonstrate how easy it is to use ChartsJS with any ASP.NET application.

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Text.Json;
using TransChartDemo.Repositories;

namespace TransChartDemo.Pages
{
    public class ChartArrayBasicModel : PageModel
    {
        private readonly IBankDataRepository bankDataRepository;

        public ChartArrayBasicModel(IBankDataRepository _bankDataRepository)
        {
            bankDataRepository = _bankDataRepository;
        }

        public void OnGet()
        {
            var bankData = bankDataRepository.GetAllBankData();
            ViewData["allBankData"] = JsonSerializer.Serialize(bankData);
        }
    }
}

Here, the bank data is serialized as a JSON string and passed to the ViewData dictionary in the line:

...
ViewData["allBankData"] = JsonSerializer.Serialize(bankData);
...

Pages/ChartArrayBasic.cshtml

This is the Razor Page containing the frontend.

@page
@model TransChartDemo.Pages.ChartArrayBasicModel
@{

}
<div class="text-center">
    <h1 class="display-4">Charts.js Demo</h1>
    <p>Integrating Charts.js in ASP.NET Core</a>.</p>

    <div class="row">
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">
                    Bar Chart
                </div>
                <div class="card-body">
                    <canvas id="bar" class="my-4 h-25"></canvas>
                </div>
                <div class="card-footer">
                    Transactions across top-tier banks
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">
                    Pie Chart
                </div>
                <div class="card-body">
                    <canvas id="pie" class="my-4 h-25"></canvas>
                </div>
                <div class="card-footer">
                    Transactions among top-tier banks ;-)
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script type="text/javascript">
    var jsonData = '@Html.Raw(ViewData["allBankData"])';
    var values = JSON.parse(jsonData);
    //var arr = [];
    // $.each(values, function (i, val) {
    //     var bankData = {};
    //     bankData.color = val.color;
    //     bankData.value = val.value;
    //     bankData.label = val.label;
    //     arr.push(bankData);
    // });

    var colours = {
        'GTB': 'rgba(200, 100, 0, 0.5)',
        'UBA': 'rgba(200, 50, 50, 0.5)',
        'ZIB': 'rgba(100, 50, 50, 0.5)',
        'FBN': 'rgba(50, 50, 200, 0.5)',
        'ACC': 'rgba(50, 200, 100, 0.5)',
    }

    var barChartCanvas = document.getElementById('bar').getContext('2d');
    //var barChart = new Chart(barChartCanvas).Bar(arr);

    var barChart = new Chart(barChartCanvas, {
        type: 'bar',
        data: {
            labels: values.map(x => x.Name),
            datasets: [{
                barThickness: 10,
                label: 'Bar Chart',
                data: values.map(x => 
                    x.TransactionsCount
                ),
                backgroundColor: values.map(x =>
                    x.Colour
                )
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var pieChartCanvas = document.getElementById('pie').getContext('2d');
    var pieChart = new Chart(pieChartCanvas, {
        type: 'pie',
        data: {
            labels: values.map(x => x.Name),
            datasets: [{
                label: 'Pie Chart',
                    data: values.map(x =>
                        x.TransactionsCount
                    ),
                    backgroundColor: values.map(x =>
                        colours[x.Name]
                    )
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: false
                    }
                }]
            }
        }
    })

</script>
}

Here is the breakdown of this file:

In the main section of the page, we have two HTML5 Canvas elements.

<canvas id="bar" class="my-4 h-25"></canvas>

This canvas element is what will be used for the ChartsJS bar chart.

...
var barChartCanvas = document.getElementById('bar').getContext('2d');
var barChart = new Chart(barChartCanvas, {
    type: 'bar',
        data: {
...

...
<canvas id="pie" class="my-4 h-25"></canvas>
...

This element is used to render the ChartsJS pie chart.

...
var pieChartCanvas = document.getElementById('pie').getContext('2d');
var pieChart = new Chart(pieChartCanvas, {
    type: 'pie',
    data: {
...

The data passed in the ViewData dictionary is output as a JSON string

...
var jsonData = '@Html.Raw(ViewData["allBankData"])';
...

It is then parsed as a Javascript object.

...
var values = JSON.parse(jsonData);
...

Next, I created a dictionary of colours (for use in the pie chart).

...
var colours = {
    'GTB': 'rgba(200, 100, 0, 0.5)',
    'UBA': 'rgba(200, 50, 50, 0.5)',
    'ZIB': 'rgba(100, 50, 50, 0.5)',
    'FBN': 'rgba(50, 50, 200, 0.5)',
    'ACC': 'rgba(50, 200, 100, 0.5)',
}
...

Next, I created an instance of a Chart, configuring it as a bar chart.

...
var barChart = new Chart(barChartCanvas, {
    type: 'bar',
    data: {
...

Next, I supplied the labels, using the values sent from the JSON data.

...
labels: values.map(x => x.Name),
...

The labels are a list of the bank names.

Here is the complete section creating the bar chart:

...
var barChart = new Chart(barChartCanvas, {
    type: 'bar',
    data: {
        labels: values.map(x => x.Name),
        datasets: [{
            barThickness: 10,
            label: 'Bar Chart',
            data: values.map(x => 
                x.TransactionsCount
            ),
            backgroundColor: values.map(x =>
                x.Colour
            )
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
...

The next property, datasets contains the datasets. For a mixed chart, this property can contain multiple datasets of different types to be rendered together.

...
data: values.map(x => 
    x.TransactionsCount
),
...

For the data property of the dataset, I pass an array containing values of the TransactionsCount field in the bankData list.

For the backgroundColor property, I also passed an array from the bankData list from the backend. I did something different for the pie chart.

Here is what the result looks like:

For the Pie chart, I did something similar.

...
var pieChartCanvas = document.getElementById('pie').getContext('2d');
var pieChart = new Chart(pieChartCanvas, {
    type: 'pie',
    data: {
        labels: values.map(x => x.Name),
        datasets: [{
            label: 'Pie Chart',
                data: values.map(x =>
                    x.TransactionsCount
                ),
                backgroundColor: values.map(x =>
                    colours[x.Name]
                )
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: false
                }
            }]
        }
    }
})
...

The main difference, here, is that I used the colours dictionary I created earlier, using the bank names as keys, to populate the backgroundColor property of the dataset.

Here is the result:

Conclusion

In this post, I detailed how I used ChartsJS to display data in a Razor page in ASP.NET.

Hopefully, this demonstrated how easily this can be done and how to go about it.

The code for this demo is available at https://github.com/shegzee/dotnet-charts.

I would appreciate feedback about this post, questions, comments and suggestions.

Thanks a lot for reading!

(This post was originally posted on LinkedIn)

Background Processing with Hangfire

S. Olusegun Ojo — Thu, 25 Jan 2024 15:03:55 +0000

Introduction

In developing applications, it is essential to ensure a smooth and responsive user experience. This is particularly important in web development where client-server communication can cause enough delay. However, some tasks, such as sending emails, processing data, media conversion or performing maintenance operations, can be time-consuming, impacting the user's interaction with your application. Background processing is important to maintain a smooth user experience by handling such time-consuming tasks in the background.

Hangfire is a powerful tool in the ASP.NET Core ecosystem for handling background processes.

Why Background Processing?

Background processing is needed for the following scenarios:

Handling long-running processes so that the main app execution is not blocked
To maintain smooth user interaction
To keep execution load small: executing only as many tasks as possible per time
For batch processing
To handle scheduled jobs
For notification systems
For queue processing
Maintenance and cleanup tasks
Retry and error handling

Examples of tasks where background processing is needed include: payment notification, report generation, temporary file cleanup, file processing e.g. media conversion, IoT sensor data processing, search indexing, resume parsing for job boards, task scheduling, thumbnail generation, etc.

What is Hangfire?

Hangfire is an open source library for .NET that enables tasks be processed in the background in a flexible and reliable way. This allows time-consuming or repetitive tasks be offloaded from the main thread of the application, maintaining a seamless user experience.

It works with any .NET application and allows background processes be run with no substantial changes. It works with several database systems, supporting RDBMS and NoSQL. It comes with a dashboard that allows monitoring of jobs and queues. It is also scalable, allowing Hangfire servers be added or removed easily as required. Hangfire, by default, retries tasks: when a task fails, it is automatically enqueued again. This can also be manually done via the dashboard.

A major advantage of Hangfire is that it works within a .NET application, removing the need for a separate service.

Features of Hangfire

Easy Integration: Hangfire seamlessly integrates with ASP.NET Core applications, making it easy to adopt in your existing projects.
Persistent Storage: Jobs and tasks are stored in a persistent storage (such as a database), ensuring that scheduled tasks are not lost during application restarts.
Dashboard for Monitoring: Hangfire provides a web-based dashboard that allows you to monitor background jobs, track their progress, and manage recurring tasks.
Recurring Jobs: Schedule jobs to run at specific intervals or on a recurring basis, automating repetitive tasks.
Support for Different Job Types: Hangfire supports various types of jobs, including fire-and-forget, delayed, recurring, batch, and continuations.

Hangfire Job Types

There are different types of jobs supported by Hangfire.

Fire-and-forget
Delayed
Recurring
Continuations
Batches
Batch continuations
Background processes

Fire-and-Forget

This is a job that happens once. It is added to the queue and executed once.

var jobId = BackgroundJob.Enqueue( () => Console.WriteLine(“One Time!"));

Delayed

A delayed job is scheduled for a specific time. Helpers are available to make scheduling easy.

var jobId = BackgroundJob.Schedule( () => Console.WriteLine(“Wait for it!"), TimeSpan.FromDays(7));

Recurring

A recurring job happens repeatedly according to a determined schedule. Hangfire uses CRON to schedule recurring jobs.

RecurringJob.AddOrUpdate( "myrecurringjob", () => Console.WriteLine("Recurring!"), Cron.Daily);

Demo Project: Media Watermarking Application

This application applies a watermark to a media file. It allows the user to upload a media file (image, pdf or video) and a watermark image and creates a watermarked version of the file.

Because this could be a resource-intensive process as the size of the media file may vary, the processing is handled in the background. The user is able to view the status of the task and, when processing is complete, the user is given a link to download the result file.

Here is a sketch of how it works:

The code is available on Github at https://github.com/shegzee/Watermarker.

The media processing job is enqueued once the user uploads the media files. This is a fire-and-forget job.

In addition to this, a job is scheduled to clean out all files and jobs older than 30 minutes (or as configured in appsettings). This is a recurring job.

I will include the relevant code in this post.

Program.cs

using HangfireWatermarker.Data;
using HangfireWatermarker.Jobs;
using HangfireWatermarker.Repositories;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Hangfire;
using Hangfire.SqlServer;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();

builder.Services.AddControllers();

// Add services to the container.
builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")).EnableSensitiveDataLogging(),
    ServiceLifetime.Transient
);
builder.Services.AddScoped<IJobStatusRepository, SqlJobStatusRepository>();
builder.Services.AddScoped<WatermarkJob>();

builder.Services.AddHangfire(config => config.UseSqlServerStorage(builder.Configuration.GetConnectionString("HangfireConnection")));
builder.Services.AddHangfireServer();



var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseHangfireDashboard();

RecurringJob.AddOrUpdate<CleanupJob>(Guid.NewGuid().ToString(), j => j.CleanExpiredJobs(), Cron.MinuteInterval(app.Configuration.GetValue<int>("Settings:CleanupJobInterval", 30)));

app.UseRouting();

app.UseAuthorization();

app.MapControllers();

app.MapRazorPages();

app.Run();

We can see that the CleanupJob is added just before the program starts. This is the code for the job.

CleanupJob.cs

using HangfireWatermarker.Repositories;
using Microsoft.Extensions.Configuration;

namespace HangfireWatermarker.Jobs
{
    public class CleanupJob
    {
        private readonly IJobStatusRepository _jobStatusRepository;
        private readonly IConfiguration _configuration;

        public CleanupJob(IJobStatusRepository jobStatusRepository, IConfiguration configuration)
        {
            _jobStatusRepository = jobStatusRepository;
            _configuration = configuration;
        }

        public void CleanExpiredJobs()
        {
            DateTime expiryTime = DateTime.Now;
            var jobExpiryMinutes = _configuration.GetValue<int>("Settings:JobExpiryMinutes", 30);
            var outdatedJobItems = _jobStatusRepository.GetOutdatedJobItems(jobExpiryMinutes, expiryTime);

            var inputFilesDirectory = _configuration.GetValue<string>("FileDirectories:Input");
            var outputFilesDirectory = _configuration.GetValue<string>("FileDirectories:Output");

            foreach (var jobItem in outdatedJobItems)
            {
                var inputFile = Path.Combine(inputFilesDirectory, jobItem.InputFileName);
                var watermarkFile = Path.Combine(inputFilesDirectory, jobItem.WatermarkFileName);
                var outputFile = Path.Combine(outputFilesDirectory, jobItem.ResultFileName);
                File.Delete(inputFile);
                File.Delete(watermarkFile);
                File.Delete(outputFile);
            }
            _jobStatusRepository.DeleteOutdatedJobItems(jobExpiryMinutes, expiryTime);
        }
    }
}

The main job to watermark the media files is added when the files are uploaded.

Index.cshtml

@page
@using HangfireWatermarker.Models;
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<h2>File Processing</h2>

<form method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="inputfile">Choose a File:</label>
        <input type="file" id="inputfile" name="inputfile" class="form-control" required />
        <label for="watermarkfile">Choose a Watermark Image:</label>
        <input type="file" id="watermarkfile" name="watermarkfile" class="form-control" required />
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

<h3>Job Status</h3>
<div class="table-striped">
@foreach (var job in Model.JobStatusList)
{
    <div class="d-sm-table-row">
        Job: @job.InputFileName - 
        <span class="">Status: @job.Status</span> 
        @if (job.Status == JobStatus.Completed)
        {
            <a href="Download?jobId=@job.JobId">Download Result</a>
        }
    </div>
}
</div>

Index.cshtml.cs

public IActionResult OnPost()
{
    if (InputFile != null && WatermarkFile != null)
    {
        try
        {
            if (!IsValidFileType(InputFile) || !IsValidFileSize(InputFile))
            {
                TempData["ErrorMessage"] = "Invalid file type or size.";
                return RedirectToPage("/Index");
            }

            if (!IsValidWatermarkFileType(WatermarkFile) || !IsValidWatermarkFileSize(WatermarkFile))
            {
                TempData["ErrorMessage"] = "Invalid watermark file type or size.";
                return RedirectToPage("/Index");
            }

            var inputFilesDirectory = _configuration.GetValue<string>("FileDirectories:Input");
            if (!Directory.Exists(inputFilesDirectory))
            {
                Directory.CreateDirectory(inputFilesDirectory);
            }

            var originalFileName = InputFile.FileName;
            var inputFilePath = Path.Combine(inputFilesDirectory, UniqueFileName(InputFile.FileName));
            using (var stream = new FileStream(inputFilePath, FileMode.Create))
            {
                InputFile.CopyTo(stream);
            }

            // copy uploaded watermark image file (?)
            //var watermarkFilePath = Path.GetTempFileName();
            var watermarkFilePath = Path.Combine(inputFilesDirectory, UniqueFileName(WatermarkFile.FileName));
            using (var stream = new FileStream(watermarkFilePath, FileMode.Create))
            {
                WatermarkFile.CopyTo(stream);
            }

            var jobId = System.Guid.NewGuid();

            var sanitizedFileName = Path.GetFileName(inputFilePath);
            var sanitizedWatermarkFileName = Path.GetFileName(watermarkFilePath);

            // Update job status to enqueued
            _jobStatusRepository.AddJobItem(new JobItem
            {
                JobId = jobId,
                InputFileName = sanitizedFileName,
                WatermarkFileName = sanitizedWatermarkFileName,
                Status = JobStatus.Enqueued,
                CreatedOn = DateTime.Now,
            });

            // output file path
            var outputFilesDirectory = _configuration.GetValue<string>("FileDirectories:Output");
            if (!Directory.Exists(outputFilesDirectory))
            {
                Directory.CreateDirectory(outputFilesDirectory);
            }

            var outputFileNameWithoutExtension = "watermarked_" + originalFileName;
            var fileExtension = GetFileExtension(sanitizedFileName);
            var timestamp = DateTime.Now.ToFileTime();
            var outputFilePath = Path.Combine(outputFilesDirectory, $"{UniqueFileName(outputFileNameWithoutExtension)}");

            BackgroundJob.Enqueue(() => _watermarkJob.Process(jobId, fileExtension, inputFilePath, watermarkFilePath, outputFilePath));

            return RedirectToPage("/Index");
        }
        catch (System.Exception ex)
        {
            Console.WriteLine(ex.ToString());
            TempData["ErrorMessage"] = "An error occurred while processing the file.";
            return RedirectToPage("/Index");
        }
    }

    TempData["ErrorMessage"] = "No file selected.";
    return RedirectToPage("/Index");
}

The function, BackgroundJob.Enqueue(), adds the job to Hangfire.

The class, WatermarkJob.cs, contains methods to add the watermark for the different types of input media files. These are called by the Process method based on the input file type.

...
    public class WatermarkJob
    {
        private readonly IJobStatusRepository _jobStatusRepository;

        public WatermarkJob(IJobStatusRepository jobStatusRepository)
        {
            _jobStatusRepository = jobStatusRepository;
        }

        public void Process(Guid jobId, string fileExtension, string filePath, string watermarkPath, string outputPath)
        {
            try
            {
                var jobItem = _jobStatusRepository.GetJobItem(jobId);
                jobItem.Status = JobStatus.Processing;
                // Update job status to processing
                _jobStatusRepository.UpdateJobItem(jobItem);
                var originalFileName = jobItem.InputFileName;
                var fileType = GetFileType(fileExtension);

                // Apply watermark based on file type
                if (fileType.Equals("other", StringComparison.OrdinalIgnoreCase))
                {
                    throw new FileLoadException("Unsupported File Type");
                }

                CreateOutputFile(outputPath);

                if (fileType.Equals("pdf", StringComparison.OrdinalIgnoreCase))
                {
                    ApplyWatermarkToPdf(filePath, outputPath, watermarkPath);
                }
                else if (fileType.StartsWith("image", StringComparison.OrdinalIgnoreCase))
                {
                    ApplyWatermarkToImage(filePath, outputPath, watermarkPath);
                }
                else if (fileType.StartsWith("video", StringComparison.OrdinalIgnoreCase))
                {
                    ApplyWatermarkToVideo(filePath, outputPath, watermarkPath);
                }


                jobItem = _jobStatusRepository.GetJobItem(jobId);
                jobItem.ResultFileName = Path.GetFileName(outputPath);
                jobItem.Status = JobStatus.Completed;

                // Update job status to completed
                _jobStatusRepository.UpdateJobItem(jobItem);
            }
            catch (Exception ex)
            {
                var jobItem = _jobStatusRepository.GetJobItem(jobId);

                // Update job status to failed
                jobItem.Status = JobStatus.Failed;
                _jobStatusRepository.UpdateJobItem(jobItem);

                // let Hangfire know it failed
                throw new InvalidOperationException("Job Failed/n" + ex.Message);
            }
        }

        // other methods are implemented
        ...

    }

There are other files to handle download, the user interface, etc. The rest of the source code can be seen in Github

Conclusion

Hangfire is a reliable tool for background task processing. I personally like the fact that it requires minimal setup and requirements as you can see in the "Watermarker" example, as it plugs into my .NET application and uses any database system. This removes the need for a separate queue or a separate service as it works asynchronously within the .NET application.

With Hangfire, handling background processes is a breeze, as this example shows. If you haven't explored Hangfire yet, now is the time to use it to take your ASP.NET applications to the next level.

(This post was originally posted on LinkedIn)

Creating Real-Time Applications with SignalR

S. Olusegun Ojo — Wed, 13 Dec 2023 16:07:26 +0000

Introduction

In this post, I will use a simple example to show how SignalR can be used to create real-time applications. First, we will look at what SignalR is and why it exists, we will also see possible uses of SignalR. Then we will make a simple collaborative whiteboard application using SignalR. This application will enable a number of users to draw on a canvas and have the same drawings displayed for all connected users.

As the world grows increasingly remote, a greater number of applications need to consider online collaboration, many times, requiring real-time systems to achieve near-instantaneous communication to achieve similar results as would be achieved by in-person communication. Traditional communication over the web involves a client making a request to a server and the server returning a response. This means that the client can only receive a response when it makes a request. Some applications, however, require consistent, real-time updates. These include resource usage dashboards, chat applications, warehouse applications, security systems, theft-detection systems, weather monitoring and alert systems, stock trading applications, gaming software, smart home systems, other IoT applications and other apps that use notifications.

Techniques for Real-time Applications

A solution to this is HTTP polling, where the client makes requests at regular intervals to fetch updates from the server. This requires the creation of a new connection every time the client makes a request. This is unsuitable for some applications, such as security systems or medical monitoring systems, where notifications have to be delivered almost instantaneously.

An alternative is long polling, where the client maintains a connection for a bit longer than a regular request, leaving a wider time window for the server to respond with updates. This is an improvement on regular polling but still may not be suitable for some applications.

Websockets provides a way for the client and server to maintain a persistent, bidirectional connection. This means that the server can send information to the client instantaneously, without the client having to make a new request. SignalR is a .NET library that implements Websockets to ensure that real-time communication can be implemented conveniently without worrying about the underlying technology. In addition to this, SignalR implements regular HTTP polling for clients that do not support websockets. This provides resilience and wide support.

SignalR libraries exist for several clients including Javascript (for web clients), Java, .NET, Swift, and C++. The server side works on ASP.NET Core.

Furthermore, SignalR is very resilient, working even where the client does not support websockets by falling back to server-sent requests or long polling. It can also be deployed to Azure using Azure SignalR Service, which provides automatic scaling based on demand.

Demo Project: Simple Collaborative Whiteboard

To demonstrate SignalR, we will create a simple whiteboard application using Javascript canvas. We will create it using ASP.NET Core.

To begin, create a new ASP.NET Core application.

Here are the critical files:

Program.cs

using Microsoft.AspNetCore.SignalR;
using SignalRDemo;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddCors(options => // to add Cross-Origin Resource Sharing, especially if your frontend is in a different location
{
    options.AddPolicy("CorsPolicy", builder =>
    {
        builder.AllowAnyMethod()
        .AllowAnyHeader()
        .WithOrigins("https://localhost")
        .AllowCredentials();
    });
});

builder.Services.AddSignalR(options => // activate SignalR
{
    options.EnableDetailedErrors = true; // Detailed errors on the frontend for debugging. Remove this when deploying.
});

builder.Services.AddControllers();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.UseCors("CorsPolicy");

app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<WhiteboardHub>("/whiteboardHub"); // The SignalR Hub
    endpoints.MapControllers();
});

app.MapRazorPages();

app.Run();

In Program.cs, we configure SignalR. I also left Razor Pages configured as I am hosting the frontend from within the same ASP.NET Core application.

WhiteboardHub.cs

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRDemo
{
    public class WhiteboardHub : Hub
    {
        // the SendDraw action is to be invoked by the client when the user draws in the canvas
        // it receives data of type DrawData which must conform to the data being sent by the client
        public async Task SendDraw(DrawData data)
        {
            try
            {
                await Clients.Others.SendAsync("ReceiveDraw", data); // this invokes the ReceiveDraw action on all the connected clients.
                // Console.WriteLine("Drawn: {0}, {1}", data.X, data.Y);
            }
            catch(Exception ex)
            {
                Console.Error.WriteLine($"Error in SendDraw: {ex.Message}");
            }
        }
    }

    // the data from the client is an object containing two doubles referring to the [relative] coordinates being drawn on on the canvas
    public class DrawData
    {
        public double X { get; set; }
        public double Y { get; set; }
    }
}

Here, the SignalR hub is defined. This is the component on the server responsible for communicating and managing the clients.

Index.cshtml

@page
@model IndexModel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collaborative Whiteboard</title>
    <style>
        #whiteboard {
            border: 1px solid #000;
        }
    </style>
</head>

    <canvas id="whiteboard" width="800" height="600"></canvas>
    <script type="text/javascript" src="~/js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.5/signalr.min.js"></script>
    <script type="text/javascript" src="~/js/app.js"></script>

On this page, we linked to the canvas and the SignalR library. Finally, I included app.js, the script where our application's behaviour and SignalR code will be.

app.js


document.addEventListener("DOMContentLoaded", function () {
    const canvas = document.getElementById("whiteboard"); // fetch the canvas
    const context = canvas.getContext("2d"); // the context for drawing on the whiteboard

    // connect to SignalR hub
    const connection = new signalR.HubConnectionBuilder()
        .withUrl("/whiteboardHub") // this is what was configured in Program.cs
        .configureLogging(signalR.LogLevel.Information) // logging settings can be modified to help with debugging
        .build();

    connection.start() // connection to SignalR Hub
        .then(() => console.log("Connected to Hub"))
        .catch(err => console.error(err.toString()));

  // drawing actions and behaviour
    let isDrawing = false;
    canvas.addEventListener("mousedown", startDrawing);
    canvas.addEventListener("mousemove", mouseDraw);
    canvas.addEventListener("mouseup", stopDrawing);
    canvas.addEventListener("mouseout", stopDrawing);

  // the ReceiveDraw action invoked by the SignalR Hub in WhiteboardHub.cs
    connection.on("ReceiveDraw", data => {
        // const event = new MouseEvent("mousedown", { clientX: data.x, clientY: data.y });
        remoteDraw(data); // the function to be called to draw the received canvas coordinates on the client canvas
    });

  // function to draw when the mouse is clicked
    function startDrawing(event) {
        isDrawing = true;
        mouseDraw(event);
    }

  // function to draw received canvas coordinates sent from SignalR
    function remoteDraw(data) {
        draw(data.x, data.y);
    }

  // function to render the client's drawings on the canvas and send to the SignalR hub
    function mouseDraw(event) {
        if (!isDrawing) return; // only draw when mouse is clicked

        // get relative x and y coordinates for canvas
        const x = event.clientX - canvas.getBoundingClientRect().left;
        const y = event.clientY - canvas.getBoundingClientRect().top;

        draw(x, y);

        // send coordinates to SignalR Hub
        connection.invoke("SendDraw", { x, y })
            .catch(err => console.error(err.toString()));
    }

  // function to draw on the canvas
    function draw(x, y) {
        // drawwwwwwwwwww
        context.beginPath();
        context.arc(x, y, 2, 0, 2 * Math.PI);
        context.fillStyle = "#000";
        context.fill();
        context.stroke();
        context.closePath();
    }

  // called on mouseup to stop drawing on the canvas
    function stopDrawing() {
        isDrawing = false;
    }
})

This file contains the main functionality on the frontend. It instantiates a HubConnection using the SignalR library which must be included. The app, in the mouseDraw function, reads the coordinates of the points on the canvas on which the user draws, rendering these on the canvas and sending them to the SignalR Hub by invoking the Hub's SendDraw method.

Notice that the data sent { x, y } is identical to the DrawData class defined in WhiteboardHub.cs.

In addition, the app awaits the ReceiveDraw invocation from the SignalR Hub. When this is invoked, the received coordinates are also rendered on the canvas.

Demo

Here is the application in action:

In the console, we see the Websockets connection made to the Hub:

[2023-12-13T11:35:31.341Z] Information: Normalizing '/whiteboardHub' to 'https://localhost:7157/whiteboardHub'.
signalr.min.js:1 [2023-12-13T11:35:31.402Z] Information: WebSocket connected to wss://localhost:7157/whiteboardHub?id=Z9PXu0pKwlGorkavnlhpfa.
signalr.min.js:1 [2023-12-13T11:35:31.402Z] Information: Using HubProtocol 'json'.
app.js:13 Connected to Hub

To test over the internet, I made the demo application accessible via the web using ngrok and here are the results.

Conclusion

In this post, we examined, using a simple demo whiteboard application, SignalR's functionality, giving a basic overview of SignalR's use and outlining possible applications of the library. SignalR provides more functionality that can help you group clients, send results to specific clients, etc. For more, visit the official documentation at https://learn.microsoft.com/en-gb/aspnet/core/signalr/

The code for this demo project is available on GitHub at https://github.com/shegzee/SignalRDemo-Whiteboard

(This post was originally posted on LinkedIn)