ASP.NET Core 6.0 - Data Visualization

This article will describe the implementation of Chart.js to visualize data over time. I will assume you have downloaded the ASP.NET Core 6.0 - Homegrown Analytics Project.

Homegrown Analytics Project and Article Series

The Homegrown Analytics Project (HAP) is designed and organized to allow easy integration with existing projects. V2 simplifies the process with an Analytics area folder. The analytics schema can be implemented with SQL scripts or EF Core migration. See ASP.NET Core 6.0 - Analytics Schema and Integration. The HAP details page includes the version change log.

ASP.NET Core 6.0

Updated with links as the articles become published.

KenHaggerty.Com has been logging requests for over 3 years. The listing pages with filters are effective at analyzing artifacts by drilling down the data. Charting uses common artifacts to represent the data over time. The first chart I developed implemented D3 Data-Driven Documents. Before I added new chart pages to analytics, I decided to use Chart.js. Both are JavaScript libraries. D3 is based on Scalable Vector Graphics (SVG) while Chart.js is based on HTML5 Canvas.

The typical plot of a line chart is a set of aggregate values based on segments of time. I developed utilities to slice a span of time into equal segments and generate date labels. A radio button group selects an option from 24 Hours, 7 Days, 5 Weeks, 6 Months, or 4 Quarters. The HAP V2 implements charts for the most popular paths and referrers from filtered queries of PageHits and Sessions. The artifact count per segment is the plot's dataset. Multiple datasets produces multiple plots. The HAP V2 implements a list of colors and a color index to assign a color to each dataset. I developed a SafeColorScheme list from the safe color scheme at CARTO - CARTOCOLORS

public static readonly List<string> SafeColorScheme = new() { "#88CCEE", "#CC6677", "#DDCC77", "#117733",
    "#332288", "#AA4499", "#44AA99", "#999933", "#882255", "#661100", "#6699CC", "#888888" };

With Chart.js and C# classes with Chart.js properties, the HAP V2 constructs the chart configuration with data, labels, and options on the server. The chart configuration is serialized and assigned to the LineChartConfigJson string property.

LineChartConfig lineChartConfig = new();
lineChartConfig.Data.Labels = labelList;
lineChartConfig.Data.Datasets = dataSetList;
lineChartConfig.Options.Plugins.Title.Text = "Page Hits";
lineChartConfig.Options.Responsive = true;
lineChartConfig.Options.MaintainAspectRatio = false;

LineChartConfigJson = JsonSerializer.Serialize(lineChartConfig);
Chart Models.

A link to the Chart.js library is required. The HAP V2 implements an CDN link with integrity check and local fallback.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"
    asp-fallback-src="~/lib/chartjs/chart.min.js" asp-fallback-test="window.Chart"
    integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA=="
    crossorigin="anonymous" referrerpolicy="no-referrer">
</script>

A canvas element is required.

<canvas class="paths-chart" width="400" height="600" aria-label="Path Chart" role="img"></canvas>

The Chart constructor is added to JavaScript on the page using the server generated configuration.

const pathsChart = new Chart(document.querySelector('.paths-chart'), @Html.Raw(Model.LineChartConfigJson);

The HAP V2 implements an _AnalyticsLayout.cshtml and css classes to display data up to 1900 px wide on chart pages. The images display the AnalyticsSampleData derived from a KenHaggerty.Com db backup.

Page Hits Chart Wide. Page Hits Chart Desktop. Page Hits Chart Mobile.
Width

The chart pages include links to the listing page with the artifact and current filters selected.

Page Hit Filters Wide. Page Hit Filters Desktop.