Introduction
Blazor is a framework built by Microsoft for creating interactive client-side web UI with a .NET codebase. We can write both client-side and server-side code in C#.NET itself. There are two hosting models available for Blazor. Blazor Server and Blazor WebAssembly. Blazor Server for production was already available. Recently, Microsoft released the production version of Blazor WebAssembly.
Syncfusion is a company founded in 2001 that offers over 1,600 components and frameworks for mobile, web, and desktop development. Their products are well received by all over the world clients.
We are using the Syncfusion Blazor chart component library to create our chart. Syncfusion is offering more than 65 native UI controls for Blazor. We will create an application to see the daily published articles count on C# Corner site with respective dates. We are fetching this data from C# Corner RSS feeds. Currently they are providing the latest 100 articles count to RSS feeds.
We can create a Blazor Server application using Visual Studio 2019. You can also use Visual Studio Code to create the Blazor Server app.
Install the latest “Syncfusion. Blazor” library using the NuGet package manager.
We can register this library inside the “ConfigureServices” method in the “Startup” class.
We need two classes, “RssFeed” and “DateWiseCount” to fetch C# Corner RSS feeds. I am creating these two classes inside a single file.
RssFeeds.cs
namespace BlazorChart.Data
{
public class RssFeed
{
public string PublishedDate { get; set; }
}
public class DateWiseCount
{
public string PublishedDate { get; set; }
public double Count { get; set; }
}
}
We can create a new class, “Articles” create a method, “ArticlesCounts” and write the logic for fetching data from C# Corner RSS feeds.
Articles. cs
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Xml.Linq;
namespace BlazorChart.Data
{
public class Articles
{
public List<DateWiseCount> ArticlesCounts()
{
CultureInfo culture = new CultureInfo("en-US");
try
{
XDocument doc = XDocument.Load("https://www.c-sharpcorner.com/rss/latestarticles.aspx");
var feeds = from item in doc.Root.Descendants().First(i => i.Name.LocalName == "channel").Elements().Where(i => i.Name.LocalName == "item")
select new RssFeed
{
PublishedDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture).ToString("dd-MMM-yy")
};
var feedGroups =
from p in feeds
orderby p.PublishedDate descending
group p by p.PublishedDate into g
select new { PublishedDate = g.Key, Count = g.Count() };
List<DateWiseCount> dateWiseCounts = new List<DateWiseCount>();
foreach (var feed in feedGroups)
{
dateWiseCounts.Add(new DateWiseCount { PublishedDate = feed.PublishedDate, Count = feed.Count });
}
return dateWiseCounts;
}
catch (Exception)
{
return null;
}
}
}
}
Create a new razor component, “Chart” inside the “Pages” folder and write the below code to display the chart in the component.
Join the conversation! Your thoughts help the community grow.