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
- ASP.NET Core 6.0 - Homegrown Analytics
- ASP.NET Core 6.0 - Analytics Schema and Integration
- ASP.NET Core 6.0 - Data Collection
- ASP.NET Core 6.0 - Data Filters
- ASP.NET Core 6.0 - Data Visualization
- ASP.NET Core 6.0 - World Heat Map
- ASP.NET Core 6.0 - Homegrown TagHelpers
- ASP.NET Core 6.0 - Client End Of Day
ASP.NET Core 5.0
- ASP.NET Core 5.0 - Homegrown Analytics
- ASP.NET Core 5.0 - Analytics Schema and Integration
- ASP.NET Core 5.0 - Cookie Consent and GDPR
- ASP.NET Core 5.0 - Analytic Data Collection
- ASP.NET Core 5.0 - Not Found Errors
- ASP.NET Core 5.0 - Preferred UserAgents
- ASP.NET Core 5.0 - Analytic Dashboard
- ASP.NET Core 5.0 - Online User Count with SignalR
- ASP.NET Core 5.0 - Is Human with Google reCAPTCHA
- ASP.NET Core 5.0 - Log Maintenance with Hangfire
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);
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.
Width
The chart pages include links to the listing page with the artifact and current filters selected.
Width
References:
Ken Haggerty
Created 09/19/22
Updated 09/28/22 01:51 GMT
Log In or Reset Quota to read more.
Successfully completed. Thank you for contributing.
Processing...
Something went wrong. Please try again.
Contribute to enjoy content without advertisments.
You can contribute without registering.
Not accepting new comments.
Your comment has been submitted.
You will be emailed when approved.
Submit your comment. Comments are moderated.
Comments(0)