Easily Create A Chart In Blazor With Syncfusion Component

Introduction


Blazor is a framework built by Microsoft for creating interactive client-side web UI with .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 also.
 
Syncfusion is a company founded in 2001, 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 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 latest 100 articles count to RSS feeds.
 
We can create a Blazor Server application using Visual Studio 2019. You can use Visual Studio Code also for creating the Blazor Server app.
 
Install the latest “Syncfusion.Blazor” library using NuGet package manager.
 
 
 
We can register this library inside the “ConfigureServices” method in “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
  1. namespace BlazorChart.Data  
  2. {  
  3.     public class RssFeed  
  4.     {  
  5.         public string PublishedDate { getset; }  
  6.     }  
  7.   
  8.     public class DateWiseCount  
  9.     {  
  10.         public string PublishedDate { getset; }  
  11.         public double Count { getset; }  
  12.     }  
  13. }  
We can create a new class “Articles” and create a method “ArticlesCounts” and write the logic for fetching data from C# Corner RSS feeds.
 
Articles.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Globalization;  
  4. using System.Linq;  
  5. using System.Xml.Linq;  
  6.   
  7. namespace BlazorChart.Data  
  8. {  
  9.     public class Articles  
  10.     {  
  11.         public List<DateWiseCount> ArticlesCounts()  
  12.         {  
  13.             CultureInfo culture = new CultureInfo("en-US");  
  14.             try  
  15.             {  
  16.                 XDocument doc = XDocument.Load("https://www.c-sharpcorner.com/rss/latestarticles.aspx");  
  17.                 var feeds = from item in doc.Root.Descendants().First(i => i.Name.LocalName == "channel").Elements().Where(i => i.Name.LocalName == "item")  
  18.                             select new RssFeed  
  19.                             {  
  20.                                 PublishedDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture).ToString("dd-MMM-yy")  
  21.                             };  
  22.   
  23.                 var feedGroups =  
  24.                 from p in feeds  
  25.                 orderby p.PublishedDate descending  
  26.                 group p by p.PublishedDate into g  
  27.                 select new { PublishedDate = g.Key, Count = g.Count() };  
  28.   
  29.                 List<DateWiseCount> dateWiseCounts = new List<DateWiseCount>();  
  30.                 foreach (var feed in feedGroups)  
  31.                 {  
  32.   
  33.                     dateWiseCounts.Add(new DateWiseCount { PublishedDate = feed.PublishedDate, Count = feed.Count });  
  34.                 }  
  35.                 return dateWiseCounts;  
  36.   
  37.             }  
  38.             catch (Exception)  
  39.             {  
  40.                 return null;  
  41.             }  
  42.         }  
  43.     }  
  44. }  
Create a new razor component “Chart” inside the “Pages” folder and write below code to display the chart in component.
 
Chart.razor
  1. @page "/chart"  
  2.   
  3. @using BlazorChart.Data  
  4. @using Syncfusion.Blazor.Charts  
  5.   
  6. <SfChart Title="C# Corner Daily Published Articles Analysis (Latest 100 only)">  
  7.     <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"  
  8.                        Title="Published Date">  
  9.     </ChartPrimaryXAxis>  
  10.     <ChartPrimaryYAxis Title="Total Aticles on Date">  
  11.     </ChartPrimaryYAxis>  
  12.     <ChartLegendSettings Visible="true"> </ChartLegendSettings>  
  13.     <ChartTooltipSettings Enable="true"></ChartTooltipSettings>  
  14.     <ChartSeriesCollection>  
  15.         <ChartSeries Type="ChartSeriesType.Spline" DataSource="@dateWiseCounts"  
  16.                      XName="PublishedDate" YName="Count" Name="Articles">  
  17.             <ChartMarker>  
  18.                 <ChartDataLabel Visible="true"> </ChartDataLabel>  
  19.             </ChartMarker>  
  20.         </ChartSeries>  
  21.     </ChartSeriesCollection>  
  22. </SfChart>  
  23.   
  24. @code {  
  25.     List<DateWiseCount> dateWiseCounts = new List<DateWiseCount>();  
  26.   
  27.     protected override void OnInitialized()  
  28.     {  
  29.         dateWiseCounts = new Articles().ArticlesCounts();  
  30.     }  
  31. }  
“SfChart” is the component name used by Syncfusion for charts.
 
Mainly it has 5 properties. “ChartPrimaryXAxis”, “ChartPrimaryYAxis”, “ChartLegendSettings” , “ChartTooltipSettings” and “ChartSeriesCollection”
 
ChartSeriesCollection provides the chart type and other details.
 
Currently they are providing 31 types of charts (as of 31st may 2020). We use Spline chart type in this application.
 
 
We can modify the “NavMenu” component to add a new navigation to Chart component
 
NavMenu.razor
  1. <div class="top-row pl-4 navbar navbar-dark">  
  2.     <a class="navbar-brand" href="">BlazorChart</a>  
  3.     <button class="navbar-toggler" @onclick="ToggleNavMenu">  
  4.         <span class="navbar-toggler-icon"></span>  
  5.     </button>  
  6. </div>  
  7.   
  8. <div class="@NavMenuCssClass" @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="counter">  
  17.                 <span class="oi oi-plus" aria-hidden="true"></span> Counter  
  18.             </NavLink>  
  19.         </li>  
  20.         <li class="nav-item px-3">  
  21.             <NavLink class="nav-link" href="fetchdata">  
  22.                 <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data  
  23.             </NavLink>  
  24.         </li>  
  25.         <li class="nav-item px-3">  
  26.             <NavLink class="nav-link" href="chart">  
  27.                 <span class="oi oi-list-rich" aria-hidden="true"></span> C# Corner Articles  
  28.             </NavLink>  
  29.         </li>  
  30.     </ul>  
  31. </div>  
  32.   
  33. @code {  
  34.     private bool collapseNavMenu = true;  
  35.   
  36.     private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;  
  37.   
  38.     private void ToggleNavMenu()  
  39.     {  
  40.         collapseNavMenu = !collapseNavMenu;  
  41.     }  
  42. }  
We can run the application and click the “C# Corner Articles” menu link.
 
 
 
 
You can see the Spline chart with published date and total articles count. You may notice that, there is a trial version warning message on the top of the chart. We can remove this warning message by giving proper license number.
 
You can get a 30 days trial license from Syncfusion website. You can check their entire Blazor component controls using this evaluation version license.
 
Please use this site https://www.syncfusion.com/downloads to download trial versions.
 
Add this license inside the “Configure” method of “Startup” class.
 
 
We can run the application again and load the chart component. You will not see that warning message again.
 
 
 
 You can see that this chart is very responsive also.
 
 

Conclusion


In this post, we have seen how to create a Spline chart using Syncfusion Blazor component library. We have used C# Corner RSS feeds to fetch daily published articles count data and showed as a chart. In my experience, Syncfusion components are very easy to use and high quality as well. I will use many of the other Blazor components from Syncfusion and show you how to use it very easily and quickly in my upcoming articles. Please feel free to give your valuable feedback as a comment so that, I can notice which area need more concentration for improvement.