Introduction

In this post, we will create a simple Line Chart in Blazor using Chart JS. We will show the latest C# Corner article count by date in this chart. For creating a chart in Blazor, we will use a third-party library, BlazorComponents, created by Muqeet Khan. You can get the source code of this library from this Link.

About Chart JS
Chart.js is a JavaScript library that allows you to draw different types of charts by using the HTML5 canvas element. Since it uses canvas, you must include a polyfill to support older browsers. You can get more details on Chart JS from this URL.
About Blazor Framework
Blazor is (still an experimental) .NET web framework from Microsoft using C#/Razor and HTML that runs in the browser with Web Assembly. Blazor provides all the benefits of a client-side web UI framework using .NET on the client and optionally on the server.

I have already written many articles on Blazor for you good people on C# Corner. If you are new to it, please refer to the below articles to get started with Blazor.

Create a Blazor project in Visual Studio 2017

We can create a new Blazor project using Visual Studio 2017 (I am using the free community edition). Currently, there are three types of templates available for Blazor. We can choose Blazor (ASP.NET Core hosted) template.

Please make sure you are using Blazor version 0.7.0 or higher. Chart Component does not support previous versions of Blazor.
Create a Simple 📈Chart for Date wise C# Corner Latest Articles Count
Our solution will be ready shortly. Please note that there are three projects created in our solution - “Client”, “Server”, and “Shared”.
Create a Simple 📈Chart for Date wise C# Corner Latest Articles Count
By default, Blazor creates many files in these three projects. We can remove all the unwanted files like “Counter.cshtml”, “FetchData.cshtml”, “SurveyPrompt.cshtml” from the Client project, “SampleDataController.cs” file from the Server project, and remove “WeatherForecast.cs” file from the Shared project.

We need to install the BlazorComponents library in Client Project for creating the chart. Currently the NuGet package has some issues. So, I am adding the entire BlazorComponentproject to our Blazor solution.

We can add the BlazorComponent project reference to Client project.

Create a Simple 📈Chart for Date wise C# Corner Latest Articles Count

We must create a “Models” folder in Shared project and add “Feed” and ”DateWiseCount” classes to this folder. I am creating a single file “Classes.cs” and adding these two classes.

Classes.cs
  1. namespace BlazorLineChart.Shared.Models
  2. {
  3. public class Feed
  4. {
  5. public string PubDate { get; set; }
  6. }
  8. public class DateWiseCount
  9. {
  10. public string PubDate { get; set; }
  11. public double Count { get; set; }
  12. }
  13. }

These two classes are used for getting C# Corner's latest article count by date and passing it to our Razor view file. We will discuss more about these details later in this post.

We can create a “CsharpConerRssController” API controller in Server project. We will write the logic for the latest article count in this controller class.
CsharpConerRssController.cs
  1. using BlazorLineChart.Shared.Models;
  2. using Microsoft.AspNetCore.Mvc;
  3. using System;
  4. using System.Collections.Generic;
  5. using System.Globalization;
  6. using System.Linq;
  7. using System.Xml.Linq;
  9. namespace BlazorLineChart.Server.Controllers
  10. {
  11. [Route("api/[controller]")]
  12. public class CsharpConerRssController : Controller
  13. {
  14. readonly CultureInfo culture = new CultureInfo("en-US");
  16. [HttpGet]
  17. public List<DateWiseCount> GetLatestArticls()
  18. {
  20. try
  21. {
  22. XDocument doc = XDocument.Load("https://www.c-sharpcorner.com/rss/latestarticles.aspx");
  23. var feeds = from item in doc.Root.Descendants().First(i => i.Name.LocalName == "channel").Elements().Where(i => i.Name.LocalName == "item")
  24. select new Feed
  25. {
  26. PubDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture).ToString("dd-MMM-yy")
  27. };
  29. var feedGroups =
  30. from p in feeds
  31. orderby p.PubDate descending
  32. group p by p.PubDate into g
  33. select new { PubDate = g.Key, Count = g.Count() };
  35. List<DateWiseCount> dateWiseCounts = new List<DateWiseCount>();
  36. foreach (var feed in feedGroups)
  37. {
  39. dateWiseCounts.Add(new DateWiseCount { PubDate = feed.PubDate, Count = feed.Count });
  40. }
  41. return dateWiseCounts;
  43. }
  44. catch (Exception)
  45. {
  46. return null;
  47. }
  48. }
  49. }
  50. }

We are getting the data from C# Corner RSS feeds. Please note, C# Corner RSS feed returns a list of the 100 latest articles only.

Then we used a LINQ query to create a list and I stored it in a variable. After getting the data, we will return this list from API controller.

We can add a “LatestArticles.cshtml” Razor view file in Client project inside the Pages folder and add the below code to this view.

LatestArticles.cshtml
  1. @page "/latestarticles"
  2. @using BlazorComponents.Shared
  3. @using BlazorLineChart.Shared.Models
  4. @using BlazorComponents.ChartJS
  5. @addTagHelper *,BlazorComponents
  7. @inject HttpClient Http
  9. <div class="container">
  11. <h4>Date wise Latest C# Corner Articles Count Chart using Blazor</h4>
  12. <p>(It lists latest 100 articles only)</p>
  13. @if (pageLoading)
  14. {
  15. <p><em>Loading...</em></p>
  16. }
  17. else
  18. {
  19. <ChartJsLineChart ref="lineChartJs" Chart="@blazorLineChartJS" Width="600" Height="300" />
  20. }
  22. </div>
  24. @functions {
  26. public ChartJSLineChart blazorLineChartJS { get; set; } = new ChartJSLineChart();
  27. ChartJsLineChart lineChartJs;
  29. bool pageLoading;
  31. protected override async Task OnInitAsync()
  32. {
  33. pageLoading = true;
  34. List<string> pubDates = new List<string>();
  35. List<double> counts = new List<double>();
  36. List<DateWiseCount> dateWiseCounts = new List<DateWiseCount>();
  38. dateWiseCounts = await Http.GetJsonAsync<List<DateWiseCount>>("/api/CsharpConerRSS");
  41. foreach (var data in dateWiseCounts)
  42. {
  43. pubDates.Add(data.PubDate);
  44. counts.Add(data.Count);
  45. }
  47. blazorLineChartJS = new ChartJSLineChart()
  48. {
  49. ChartType = "line",
  50. CanvasId = "LineChart",
  51. Options = new ChartJsOptions()
  52. {
  53. Text = "Date wise Latest Articles",
  54. Display = true,
  55. Responsive = false
  56. },
  57. Data = new ChartJsLineData()
  58. {
  59. Labels = pubDates,
  60. Datasets = new List<ChartJsLineDataset>()
  61. {
  62. new ChartJsLineDataset()
  63. {
  64. BackgroundColor = new List<string>(){"#ff6384" },
  65. BorderColor = "#ff6384",
  66. Label = "# of Articles on the Day",
  67. Data = counts,
  68. Fill = false,
  69. BorderWidth = 2,
  70. PointRadius = 3,
  71. PointBorderWidth=1
  72. }
  73. }
  74. }
  75. };
  76. pageLoading = false;
  77. }
  79. }

We can slightly modify the “NavMenu.cshtml” file with the below code. We have added the navigation to the latest articles Razor view.

NavMenu.cshtml
  1. <div class="top-row pl-4 navbar navbar-dark">
  2. <a class="navbar-brand" href="">Simple Chart in Blazor</a>
  3. <button class="navbar-toggler" onclick=@ToggleNavMenu>
  4. <span class="navbar-toggler-icon"></span>
  5. </button>
  6. </div>
  8. <div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>
  9. <ul class="nav flex-column">
  10. <li class="nav-item px-3">
  11. <NavLink class="nav-link" href="" Match=NavLinkMatch.All>
  12. <span class="oi oi-home" aria-hidden="true"></span> Home
  13. </NavLink>
  14. </li>
  15. <li class="nav-item px-3">
  16. <NavLink class="nav-link" href="latestarticles">
  17. <span class="oi oi-list-rich" aria-hidden="true"></span> Latest Articles Chart
  18. </NavLink>
  19. </li>
  20. </ul>
  21. </div>
  23. @functions {
  24. bool collapseNavMenu = true;
  26. void ToggleNavMenu()
  27. {
  28. collapseNavMenu = !collapseNavMenu;
  29. }
  30. }

Very importantly, we must include the reference for Chart.js inside the index.html file inside the wwwroot folder.

Index.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width">
  6. <title>Simple Chart in Blazor</title>
  7. <base href="/" />
  8. <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  9. <link href="css/site.css" rel="stylesheet" />
  10. </head>
  11. <body>
  12. <app>Loading...</app>
  13. <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
  14. <script src="//cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
  15. <script src="_framework/blazor.webassembly.js"></script>
  16. </body>
  17. </html>

Well, we have completed the coding part. We can check the chart functionality now.

Create a Simple 📈Chart for Date wise C# Corner Latest Articles Count

We can click the “Latest Articles Chart” link and open the chart page.

Create a Simple 📈Chart for Date wise C# Corner Latest Articles Count

Deployed on Azure

I have deployed this Blazor application on Azure. If you want to check the simple line chart, please run this Live App.
Conclusion
In this post, we have created a sample chart using Chart JS. We have taken the latest article details from C# Corner RSS feeds and using LINQ query we have taken the article count by date and showed the data in the chart. For chart creation we have used a third-party library, BlazorComponents. The source code of this library is available in GitHub.
We will see more exciting charts using Chart JS with Blazor project in upcoming posts.