Setting ChartComponent in Blazor Radzen for count of properties of each value

Question

I have a

public IEnumerable<Project> Projects;

with projects having several properties, one of them being "projectStatus"

a project can have one of 5 status (open, closed, in progress, deleted, new)

I want to have a ChartComponent, that shows the amount of projects in each status.

however I don't know how to set this

                <RadzenChart>

                    <RadzenColumnSeries Data="@Projects" CategoryProperty="projectStatus" Title="Status" LineType="LineType.Dashed" ValueProperty="projectStatus.Count()">
                        <RadzenSeriesDataLabels Visible="true"/>
                    </RadzenColumnSeries>

                </RadzenChart>

I'm using as reference the documentation in https://blazor.radzen.com/docs/guides/components/chart.html

I want to have an X axis with 5 columns (with each status), and a Y axis with the amount of projects in each status

Ibrahim Timimi · Accepted Answer · 2022-11-08T03:07:45.113

You can create a separate list that will work with RadzenColumnSeries. The list will be of a class with two properties which are:

Status: as CategoryProperty (status value as string eg. open, close ...)
Projects: as ValueProperty (number of projects that fall in the current status)

Then create an item for each status and assign the number of projects that fall in that status.

projectStatus = new[]
{
    new DataItem()
    {
        Status = "Open"
        Projects = projects.Count(x => x.ProjectStatus == ProjectStatus.OPEN)
    },
    new DataItem()
    {
        Status = "Closed"
        Projects = projects.Count(x => x.ProjectStatus == ProjectStatus.CLOSED)
    },
    
    //...
};

Working example:

@page "/chart"

<div class="container">
    <div class="row">
        <div class="col-sm-12 my-5">
            <RadzenChart>
                <RadzenColumnSeries Data="@projectStatus" 
                                    CategoryProperty="Status" 
                                    Title="Projects" 
                                    LineType="LineType.Dashed" 
                                    ValueProperty="Projects">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenColumnSeries>
                <RadzenColumnOptions Radius="5" />
                <RadzenValueAxis Min="0" 
                                 Max="@maxValue"/>
            </RadzenChart>
        </div>
    </div>
</div>

@code {
    bool showDataLabels = true;
    List<Project> projects { get; set; }
    DataItem[] projectStatus { get; set; }
    int maxValue;
    
    protected override void OnInitialized()
    {
        projects = new List<Project>();
        projects.Add(new Project(ProjectStatus.OPEN));
        projects.Add(new Project(ProjectStatus.CLOSED));
        projects.Add(new Project(ProjectStatus.IN_PROGRESS));
        projects.Add(new Project(ProjectStatus.DELETED));
        projects.Add(new Project(ProjectStatus.NEW));
        projects.Add(new Project(ProjectStatus.NEW));
        projects.Add(new Project(ProjectStatus.OPEN));

        projectStatus = new[]
        {
            new DataItem()
            {
                Status = ProjectStatus.OPEN.ToString(),
                Projects = projects.Count(x => x.ProjectStatus == ProjectStatus.OPEN)
            },
            new DataItem()
            {
                Status = ProjectStatus.CLOSED.ToString(),
                Projects = projects.Count(x => x.ProjectStatus == ProjectStatus.CLOSED)
            },
            new DataItem()
            {
                Status = ProjectStatus.IN_PROGRESS.ToString(),
                Projects = projects.Count(x => x.ProjectStatus == ProjectStatus.IN_PROGRESS)
            },
            new DataItem()
            {
                Status = ProjectStatus.DELETED.ToString(),
                Projects = projects.Count(x => x.ProjectStatus == ProjectStatus.DELETED)
            },
            new DataItem()
            {
                Status = ProjectStatus.NEW.ToString(),
                Projects = projects.Count(x => x.ProjectStatus == ProjectStatus.NEW)
            }
        };

        maxValue = projectStatus.Max(x => x.Projects);
        base.OnInitialized();
    }

    class DataItem
    {
        public string Status { get; set; }
        public int Projects { get; set; }
    }

    public class Project
    {
        public Project(ProjectStatus status)
        {
            this.ProjectStatus = status;
        }
        
        public ProjectStatus ProjectStatus { get; set; }
    }

    public enum ProjectStatus
    {
        OPEN, 
        CLOSED, 
        IN_PROGRESS, 
        DELETED, 
        NEW
    }
}

Result:

this was perfect :) I thought about doing the separate object, but I wasn't sure, I was trying to figure it out from calling from the original object. thank you. — Baldie47, Nov 08 '22 at 11:09

Setting ChartComponent in Blazor Radzen for count of properties of each value

1 Answers1