How to create line chart by Year

Question

Hello,I am new to the SyncFusion chart. I a dataset generated by SQL Server. My dataset spans multiple years. I want to plot my dataset year by year, but I don't know how to do it. Could you please help.This is what is generated by SychFunsion Chart. This is what I want.bestSaoAttachment: Hello_ce7e989b.zip

Swetha Babu · Answer

Hi Sao,Greetings from Syncfusion.We can achieve your requirement by filtering the data based on the year and get the Month from the date and the set the same in the XName property of the series. We have created a simple blazor application to demonstrate the same and it can be downloaded from the below link.Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/LineChartSample1684094367Code Snippet: @foreach (SeriesData series in SeriesCollection) { } protected override void OnInitialized() { base.OnInitialized(); foreach (var name in Years) { List filteredData = ChartPoints.Where(item => (DateTime.Parse((item.Date).ToShortDateString()).Year).ToString() == name).ToList(); foreach(var item in filteredData) { item.Month = (item.Date).ToString("MMM"); } SeriesCollection.Add(new SeriesData { XName = nameof(ChartData.Month), YName = nameof(ChartData.Value), Data = filteredData, Name = "FY" + name }); } } Screenshot:Kindly, revert us if you have any concerns.Regards,Swetha

Sao · Answer

Hi Swetha,I am having a hard time adopting your solution with my IEnumerable which taking data from SQL View. public IEnumerable<ChartData>? ChartData { get; set; }public class

ChartData

{        public int? Yr { get; set; }        public DateTime? DtDates { get; set; }        public double? YName { get; set; }    }Could you please help?Sao

Durga Gopalakrishnan · Answer

Hi Sao,We have changed the chart data type into IEnumerable as per
specified snippet. Chart series is rendered properly with filtered data. We
have attached the modified sample for your reference. Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/FilterData-781209964.zipWe also request you to share more information about your
requirement. We have changed the List type to IEnumerable type. Is it your
requirement or any other else? If so, please share those details. Kindly revert
us if you have any other concerns.Regards,Durga Gopalakrishnan.

Sao · Answer

Hello Durga,Thank you very much for helping me all along, Your solution is perfect. However, I don't know how to connect the static ChartPoint that you provide to the interface so that chart can use the data from the database instead of the static entry in the public IEnumerable ChartPoints = new List{-----------}Would appreciate if you could help me connecting the Chartpoint to use data from the Interface below.Below is the model, data services and interface for your reference.My Modelspublic class vChartStockOutForACT { public DateTime? Date { get; set; } public string? Month { get; set; } public double? Value { get; set; } }My Data Services is :public IEnumerable GetChartStockOutForACT() { try { return _context.ChartStockOutForACTs.ToList(); } catch { throw; } }And my interface is : IEnumerable GetChartStockOutForACT();Thank y

Sabitha Rajamani · Answer

Hi Sao,We can render the chart using the Database based on your
requirement. We can set the IEnumerable in the interface where we are getting
the data from database. We have created a simple blazor application to demonstrate
the same and it can be downloaded from the below link.Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartDBSample1978125314Code Snippet:

public IEnumerable<Order> GetAllOrders()
         
  {
             
  try
             
  {
                  
  return db.Orders;
             
  }
             
  catch
             
  {
                 
  throw;
             
  }
          }

In the above sample, we are getting the data from the
database in the OrderDataAccessLayer.cs file. So we have defined the
IEnumerable in this file.Screenshot:Kindly, revert us if you have any concerns.Note: I have used my own database in the above sample. So we
have rendered based on that. You can change the connection string based on the
location of your database file.Regards,Swetha

Sao · Answer

Dear Swetha,Thank you for your assistance. Can you help by putting the chart by year as shown below? I am not good at looping through IENum datasets.regards

Swetha Babu · Answer

Hi Sao,We have filtered the data that we get from the database and
render the chart based on your requirement. We have created a simple blazor
application to demonstrate the same and it can be downloaded from the below
link.Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartYEarData61897617Code Snippet:

protected override void OnInitialized()
      {
         
  base.OnInitialized();
          var data =
  (OrderData.GetAllOrders()).ToList();
          foreach (var
  name in Years)
          {
             
  List<OrderContext.Order> filteredData = data.Where(item =>
  (DateTime.Parse((item.OrderDate).ToShortDateString()).Year).ToString()
  ==  name).ToList();
             
  foreach(var item in filteredData)
             
  {
                 
  item.CustomerID = (item.OrderDate).ToString("MMM");
             
  }
             
  SeriesCollection.Add(new SeriesData
             
  {
                 
  XName = nameof(OrderContext.Order.CustomerID),
                 
  YName = nameof(OrderContext.Order.Freight),
                 
  Data = filteredData,
                 
  Name = "FY" + name
             
  });
         
  }        
      }

Screenshot:In the above sample, we have get the data from the database
and filtered the data based on year and then converted the same to month in
order to render the data based on the year.Note: We have used our own database to render the above
chart. So the chart looks like this. You can create the database based on your
data.Kindly, revert us if you have any concerns.Regards,Swetha