Bar charts displaying months in wrong order

Radzen.Blazor Components
1

Hello.

I'm using radzen bar chart to create a chart based on the following json:

{"data":[{"quantity":2,"month":"January","groupID":4},{"quantity":2,"month":"February","groupID":4},{"quantity":22,"month":"May","groupID":3},{"quantity":44,"month":"June","groupID":3},{"quantity":2,"month":"June","groupID":4}],"success":true,"message":""}

However, the chart looks like this:

zEeVocW
zEeVocW1048×411 4.77 KB

This is my code:



@if (diseasesPerGroupPerMonth == null)
{
    <h1>Loading</h1>
}
else
{
    <RadzenChart TItem="GroupAnimalStats" Data="diseasesPerGroupPerMonth">
        <RadzenCategoryAxis ></RadzenCategoryAxis>
        <RadzenValueAxis></RadzenValueAxis>

        <!-- Iterate over the unique groupIDvalues -->
        @foreach (var groupId in diseasesPerGroupPerMonth.Select(x => x.GroupID).Distinct())
        {
            <RadzenBarSeries TItem="GroupAnimalStats"
                             ValueProperty="Quantity"
                             CategoryProperty="Month"
                             Title="@(string.Format("Group {0}", groupId))"

                             Data="@diseasesPerGroupPerMonth.Where(x => x.GroupID == groupId)">
                <RadzenSeriesDataLabels Visible="@showDataLabels"/>
            </RadzenBarSeries>
        }
    </RadzenChart>
}

@code {
    bool showDataLabels = false;

    private string FormatAsMonth(object value)
    {
        if (value != null && int.TryParse(value.ToString(), out int monthNumber))
        {
            if (monthNumber >= 1 && monthNumber <= 12)
            {
                return new DateTime(DateTime.Now.Year, monthNumber, 1).ToString("MMMM");
            }
        }

        return string.Empty;
    }

}

I've already tried using the formatter above but it didn't work.

Does anyone know a workaround?

Thanks in advance.

2

Hi @CMBoii,

You can try sorting the data and series. Use OrderBy(x => x.GroupID)

3

Hey @korchev.
Thank you so much for you reply.

Unfortunately, it's still the same.

I'm starting to think that the problem lies on how I send the data (string instead of datetime). Would it be better to send the data without grouping it by month?

So instead of having

{"data":[{"quantity":2,"month":"January","groupID":4},{"quantity":2,"month":"February","groupID":4},{"quantity":22,"month":"May","groupID":3},{"quantity":44,"month":"June","groupID":3},{"quantity":2,"month":"June","groupID":4}],"success":true,"message":""}

I would have something like this:

{"data":[{"quantity":2,"month":"15/01/2023","groupID":4},{"quantity":2,"month":"17/02/2023","groupID":4},{"quantity":22,"month":"15/05/2023","groupID":3},{"quantity":44,"month":"08/06/2023","groupID":3},{"quantity":2,"month":"12/06/2023","groupID":4}],"success":true,"message":""}
4

I am afraid I don't understand what the desired result is.

5

Displaying the months in order.

I've tried to show the data using the following json

 List<GroupAnimalStatsTest> data = new List<GroupAnimalStatsTest>
        {
            new GroupAnimalStatsTest
            {
                Quantity = 5,
                Month = new DateTime(2023, 1, 15),
                GroupID = 4
            },
            new GroupAnimalStatsTest
            {
                Quantity = 2,
                Month = new DateTime(2023, 2, 17),
                GroupID = 4
            },
            new GroupAnimalStatsTest
            {
                Quantity = 22,
                Month = new DateTime(2023, 5, 15),
                GroupID = 3
            },
            new GroupAnimalStatsTest
            {
                Quantity = 44,
                Month = new DateTime(2023, 6, 8),
                GroupID = 3
            },
            new GroupAnimalStatsTest
            {
                Quantity = 2,
                Month = new DateTime(2023, 6, 12),
                GroupID = 4
            }

and i got this result

S1YdO2s
S1YdO2s1100×422 6.32 KB

this is the code i used

<RadzenChart TItem="GroupAnimalStatsTest" Data="test">
        <RadzenCategoryAxis Formatter="FormatAsMonth2" ></RadzenCategoryAxis>
        <RadzenValueAxis></RadzenValueAxis>
         
        <!-- Iterate over the unique idGrupo values -->
        @foreach (var grouId in test.Select(x => x.GroupID).Distinct())
        {
            <RadzenStackedBarSeries TItem="GroupAnimalStatsTest"
                                    ValueProperty="Quantity"
                                    CategoryProperty="Month"
                                    Title="@(string.Format("Group {0} ", grouId))"
        
                                    Data="@test">
                <RadzenSeriesDataLabels Visible="@showDataLabels"/>
            </RadzenStackedBarSeries>
        }
    </RadzenChart>

  string FormatAsMonth2(object value)
    {
        if (value != null)
        {
            CultureInfo culture = new CultureInfo("en-US");
            
            return Convert.ToDateTime(value).ToString("MMMM", culture);
        }

        return string.Empty;
    }
6

DateTime categories aren't suitable for such type of chart IMHO - they are usually used with line and area charts. I recommend using strings. The categories are rendered in order of appearance in the data. Try to sort your data by category.