Chart fails to bind data when properties have JsonPropertyName attribute

1 Answer 59 Views
Charts
michael
Top achievements
Rank 1
michael asked on 05 Nov 2024, 12:07 PM

We have a type that we are trying to bind to a column chart. The chart fails to bind if the properties are decorated with JsonPropertyName attribute. Remove the attribute the data binds Ok. Is there a work around that allows us to keep the attribute decoration?

<TelerikGridLayout>
    <GridLayoutColumns>
        <GridLayoutColumn Width="60%"></GridLayoutColumn>
        <GridLayoutColumn Width="40%"></GridLayoutColumn>
    </GridLayoutColumns>
        <GridLayoutItems>
        <GridLayoutItem Column="2">
            <TelerikChart>
                <ChartSeriesItems>
                    <ChartSeries Type="ChartSeriesType.Column" Name="Successful" Data=transactionByDateResponse2 Field=@nameof(TransactionSummaryResponse2.SuccessfulCount) CategoryField=@nameof(TransactionSummaryResponse2.TransactionDate)>
                        <ChartSeriesStack Group="ChartSeriesType.Column" />
                    </ChartSeries>
                    <ChartSeries Type="ChartSeriesType.Column" Name="Failed" Data=transactionByDateResponse2 Field=@nameof(TransactionSummaryResponse2.FailedCount)>
                        <ChartSeriesStack Group="ChartSeriesType.Column" />
                    </ChartSeries>
                    <ChartSeries Type="ChartSeriesType.Column" Name="Vend Failed" Data=transactionByDateResponse2 Field=@nameof(TransactionSummaryResponse2.VendFailedCount)>
                        <ChartSeriesStack Group="ChartSeriesType.Column" />
                    </ChartSeries>
                    <ChartSeries Type="ChartSeriesType.Column" Name="Expired" Data=transactionByDateResponse2 Field=@nameof(TransactionSummaryResponse2.ExpiredCount)>
                        <ChartSeriesStack Group="ChartSeriesType.Column" />
                    </ChartSeries>
                </ChartSeriesItems>
                <ChartLegend Position="ChartLegendPosition.Bottom"/>
            </TelerikChart>
        </GridLayoutItem>
    </GridLayoutItems>
</TelerikGridLayout>

 

namespace Poseidon.BackOffice.Blazor.Features.Transactions.Components
{
    public record TransactionSummaryResponse2
    {
        [JsonPropertyName("transactionDate")]
        public DateOnly TransactionDate { get; init; }

        [JsonPropertyName("expiredCount")]
        public long ExpiredCount { get; init; }

        [JsonPropertyName("expiredTotalAmountInMinorUnits")]
        public decimal ExpiredTotalAmountInMinorUnits { get; init; }

        [JsonPropertyName("successfulCount")]
        public long SuccessfulCount { get; init; }

        [JsonPropertyName("successfulTotalAmountInMinorUnits")]
        public decimal SuccessfulTotalAmountInMinorUnits { get; init; }

        [JsonPropertyName("failedCount")]
        public long FailedCount { get; init; }

        [JsonPropertyName("failedTotalAmountInMinorUnits")]
        public decimal FailedTotalAmountInMinorUnits { get; init; }

        [JsonPropertyName("vendFailedCount")]
        public long VendFailedCount { get; init; }

        [JsonPropertyName("vendFailedTotalAmountInMinorUnits")]
        public decimal VendFailedTotalAmountInMinorUnits { get; init; }
    }


    public partial class TransactionReportSummary
    {
        List<TransactionSummaryResponse2> transactionByDateResponse2 = new();

        protected override void OnInitialized()
        {
            TransactionSummaryResponse2 transactionSummaryResponse2item = new TransactionSummaryResponse2 { TransactionDate = new DateOnly(2024, 11, 5), ExpiredCount = 1, FailedCount = 2, SuccessfulCount = 3, VendFailedCount = 4 };
            transactionByDateResponse2.Add(transactionSummaryResponse2item);
            transactionSummaryResponse2item = new TransactionSummaryResponse2 { TransactionDate = new DateOnly(2024, 11, 4), ExpiredCount = 1, FailedCount = 2, SuccessfulCount = 3, VendFailedCount = 4 };
            transactionByDateResponse2.Add(transactionSummaryResponse2item);
            transactionSummaryResponse2item = new TransactionSummaryResponse2 { TransactionDate = new DateOnly(2024, 11, 3), ExpiredCount = 1, FailedCount = 2, SuccessfulCount = 3, VendFailedCount = 4 };
            transactionByDateResponse2.Add(transactionSummaryResponse2item);
        }
    }
}

1 Answer, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 08 Nov 2024, 07:13 AM

Hello Michael,

To bind a Chart to properties that are decorated with a JsonPropertyName attribute, is required to match the field names of the Chart with the serialized property names. For more information, refer to our KB article: Chart not working with Newtonsoft.Json properties

I hope you find the information in the article useful.

Regards,
Tsvetomir
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Charts
Asked by
michael
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Share this question
or