Trying to do Multi-Columns with different Name/Number of Class Fields

[Andrew]

I've been trying to find a way to do this column chart with multiple columns but nothing looks like it will work so posting here.  My problem is that it's not always the same each time the report will be run.  So I'm building an attendance report which is based on the value and number of items selected from 2 listboxes on a previous form.  So what is sent over to the report will vary, sometimes it may only be 1 person and 1 type of event, other times it could be 5 people at 3 different events.  I need a way that it can see what events the user wants to get the attendance for and create a column for each event for each person that is selected.  Any help would be greatly appreciated.

Thanks,

Andrew King

[Durga Gopalakrishnan]

Hi Andrew, 

Greetings from Syncfusion. 

We have analyzed your required query. We suggest you to use category value type for x axis with isIndexed as true which is used to display the points in multiple columns with same x value. We already have an online demo using this type. Kindly ensure whether this suggestion satisfies your requirement. Please check with the below link. 

Online Demo : https://blazor.syncfusion.com/demos/chart/indexed-category-axis?theme=bootstrap5 

UG : https://blazor.syncfusion.com/documentation/chart/category-axis#indexed-category-axis 

Please revert us if you have any concerns. 

Regards, 

Durga G 

[Andrew]

Thanks for the quick response.  So that kinda works, it looks like your example has multiple lists, one for each GDP year.  For me I can't do that, I'm sending one list into the chart.  I have pasted the code, list contents and the graph it generates.

<SfChart Title="@ReportTitle" >

        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" IsIndexed="true" ></ChartPrimaryXAxis>

        <ChartSeriesCollection>

            <ChartSeries DataSource="@reportDataList" Name="EventTypesData" XName="MemberIDNameData" YName="AttendedNumberData" Type="ChartSeriesType.Column" ></ChartSeries>

        </ChartSeriesCollection>

        <ChartLegendSettings Visible="true" ></ChartLegendSettings>

    </SfChart>

List Item 1:

List Item 2:

List Item 3:

List Item 4:

Graph:

So the names aren't grouping to show one bar for each service. The name is just EventTypesData instead of the name of the events.  Any advice is greatly appreciated.

[Swetha Babu]

Hi Andrew, 

  

Greetings from Syncfusion. 

  

We have analyzed the reported scenario. Based on the requirement, we have added two series to chart one for Sunday service and another for Saturday Service, based on the service we have skipped the points for the person using the "OnPointRender" event in ChartsEvents. We have created the 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/ChartSample-2053378717 

  

Screenshot: 

  

 

  

Kindly revert us, if it doesn’t meet your requirement. 

  

Thanks, 

Swetha 

[Andrew]

Thanks for the sample. The only problem is everything you are doing is hard coded.  I cannot hard code any of it.  It has to loop through the list that is sent to it and then generate A chartSeries for each EventType. These EventTypes could be different each time the report is ran.   I've tried to do a foreach loop in the CharSeriesCollection but I keep getting an error, I've gotten it for int and string also:

Severity Code Description Project File Line Suppression State

Error (active) CS1503 Argument 1: cannot convert from 'RCManagement.Pages.Program.AdminsManagersStaffOnly.AttendanceReport.ReportDataItems' to 'System.Collections.Generic.IEnumerable<object>' RCManagement c:\RCManagement\Pages\Program\AdminsManagersStaffOnly\AttendanceReportDisplay.razor 12

This is what I'm trying to do:

<ChartSeriesCollection>

            @foreach(var reportData in reportDataList)

            {

                <ChartSeries DataSource=@reportData Name="EventTypesData" XName="MemberIDNameData" YName="AttendedNumberData" Type="ChartSeriesType.Column" ></ChartSeries>

            }

        </ChartSeriesCollection>

Thanks,

Andrew 

[Swetha Babu]

Hi Andrew, 

  

Greetings from Syncfusion. 

  

We have analyzed the reported s​cenario. Based on the requirement, we have added two series using the foreach loop. Using the OnPointRender event in ChartEvents, we have skipped the points for the person. In foreach loop, we have stored each value of EventTypeData in an array and skipped the name. Please find the below code snippet the same. 

  

@foreach (SalesInfo report in reportDataList) 

        { 

            Values.Add(report.EventTypesData); 

            @if (report.EventTypesData != Values[Values.Count - 1]) 

            { 

                <ChartSeries DataSource=@reportDataList Name="@report.EventTypesData" XName="MemberIDNameData" YName="AttendedNumberData" Type="ChartSeriesType.Column"></ChartSeries> 

            } 

        } 

  

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CharSample485010069 

  

Screenshot: 

  

 

  

Kindly revert us, if it doesn’t meet your requirement. 

  

Thanks, 

Swetha 

[Andrew]

Thank you for the assistance.  Just wanted to let you know that I was able to get it to work, you were close.  First thing is that your sample didn't work at all the way it was coded.  The only reason your graph is showing anything was because you left the hard coded Chart Series in the First collection.  If you comment those 2 hard coded series then the graph is blank.  This is because your check for the report.EventTypesData != Values[Values.Count -1] will always fail, the report.EventTypesData always equals the Values[Values.Count -1] because it was just added to that list.  I tweaked your code and this is how it worked, I first had it check to see if the EventType it's trying to add is in the list, if it isn't, then it adds the ChartSeries and then adds that event type to the list.  This makes it only add 1 Chart series for each event type in the list.  I wouldn't have thought to do it this way without your sample so I really appreciate the time you put into this.

<SfChart Title="Events between 1/2/2022 - 1/9/2022">

    <ChartEvents OnPointRender="PointRenderEvent"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>

    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>

    <ChartSeriesCollection>

        @*<ChartSeries DataSource="@reportDataList" Name="Saturday Service" XName="MemberIDNameData" YName="AttendedNumberData" Type="ChartSeriesType.Column"></ChartSeries>

        <ChartSeries DataSource="@reportDataList" Name="Sunday Service" XName="MemberIDNameData" YName="AttendedNumberData" Type="ChartSeriesType.Column"></ChartSeries>*@

    </ChartSeriesCollection>

    <ChartSeriesCollection>

        @foreach (SalesInfo report in reportDataList)

        {

            @if (!Values.Contains(report.EventTypesData))

            {

                <ChartSeries DataSource=@reportDataList Name="@report.EventTypesData" XName="MemberIDNameData" YName="AttendedNumberData" Type="ChartSeriesType.Column"></ChartSeries>

            }

            Values.Add(report.EventTypesData);

        }

    </ChartSeriesCollection>

    <ChartLegendSettings Visible="true"></ChartLegendSettings>

</SfChart>

[Swetha Babu]

Hi Andrew,

Greetings from Syncfusion.

Sorry for the inconvenience caused. We have forgot to comment the old Chart Series collection in the sample that we have provided. I hope you have got the sample work. 

Kindly, let us know if need any further assistance.

Thanks,
Swetha Babu

[Andrew]

Swetha,

It was no inconvenience at all, I only noted it for your information only.  I tried a foreach loop multiple times before reaching out so you were able to get me in the right direction, so I really appreciate all the time you put into helping me.  You can consider this ticket resolved.

Thanks,

Andrew

[Swetha Babu]

Hi Andrew,

Thank you for your update.

We are happy to hear that the reported issue gets resolved. Please let us know if you need further assistance.

Regards,

Swetha