Updating Blazor Bar Series Chart

Radzen.Blazor Components
1

I am sure I am just missing something but I have looked through the docs and played around with this for a while with no success.

I have a bar series chart that receives periodic updates. The bars themselves and corresponding tool-tips update just as I expect them to when new data is received and is added to the collections. What doesn't work as I expected is that axis numbers are not updating, so the bar can grow past the edge of the chart. I cannot seem to figure out how to update the x axis.

Here is a chart after a few updates, notice the value is greater than the x-axis, I would have expected the chart to re-calculate the best fit like it did with the initial data.

Screen Shot 2020-09-18 at 4.21.44 PM
Screen Shot 2020-09-18 at 4.21.44 PM768×264 8.62 KB

Can someone point me in a direction to clean this up?

Thanks much!

Jay

2

Hi @jaydeboer,

Welcome to the Radzen community!

The chart series update automatically when their Data property changes (by reference - if you just add / remove items it won't be detected as a change). In such cases you can use the Reload method of the chart - you need a reference to it.

<RadzenChart @ref="myChart" />

<RadzenButton Click=@OnClick />

@code {
     RadzenChart myChart;

     void Click()
     {
        myChart.Reload();
     }
}
3

That was what I was missing link. Thanks so much for the help.

Jay

4

I assume there is a similar trick to being able to remove series and add new ones back?
I was able to do this by replacing the data for the two series in the chart. but the more general question is how do i remove all existing series and add back new ones?

5

Here is what I did as an initial test of just swapping series and titles around.
Would like to know more about the possibility of creating series in code completely.

@page "/columnchart"
@using System.Globalization
@using Radzen.Blazor

<h1>Radzen Blazor Chart column series</h1>
<div class="row">
    <div class="col-md-6 col-sm-12 p-4">
        <RadzenChart @ref="chart">
            <RadzenColumnSeries Data="@values1" CategoryProperty="Quarter" Title="@title1" ValueProperty="Revenue" />
            <RadzenColumnSeries Data="@values2" CategoryProperty="Quarter" Title="@title2" ValueProperty="Revenue" />
            <RadzenColumnOptions Radius="5" />
            <RadzenValueAxis Formatter="@FormatAsUSD">
                <RadzenGridLines Visible="true" />
                <RadzenAxisTitle Text="Revenue in USD" />
            </RadzenValueAxis>
        </RadzenChart>
    </div>
</div>
<RadzenButton Click=@(args => OnClick("Button with text")) Text="Button" Style="margin-bottom: 20px; width: 150px" />
@code {

   private RadzenChart chart {get;set;}
    class DataItem
    {
        public string Quarter { get; set; }
        public double Revenue { get; set; }
    }

     protected override Task OnInitializedAsync()
     {

         series1 =values1;
         series1 =values2;

         return base.OnInitializedAsync();
      }

     DataItem[] series1 {get;set;}
     string title1 = "2019";
     DataItem[] series2 {get;set;}
     string title2 ="2020";
 
    string FormatAsUSD(object value)
    {
        return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US"));
    }

    DataItem[] values1 = new DataItem[] {
        new DataItem
        {
            Quarter = "Q1",
            Revenue = 234000
        },
        new DataItem
        {
            Quarter = "Q2",
            Revenue = 284000
        },
        new DataItem
        {
            Quarter = "Q3",
            Revenue = 274000
        },
        new DataItem
        {
            Quarter = "Q4",
            Revenue = 294000
        },
    };

    DataItem[] values2 = new DataItem[] {
        new DataItem
        {
            Quarter = "Q1",
            Revenue = 254000
        },
        new DataItem
        {
            Quarter = "Q2",
            Revenue = 324000
        },
        new DataItem
        {
            Quarter = "Q3",
            Revenue = 354000
        },
        new DataItem
        {
            Quarter = "Q4",
            Revenue = 394000
        },

    };

 DataItem[] values3 = new DataItem[] {
        new DataItem
        {
            Quarter = "Q1",
            Revenue = 334000
        },
        new DataItem
        {
            Quarter = "Q2",
            Revenue = 384000
        },
        new DataItem
        {
            Quarter = "Q3",
            Revenue = 374000
        },
        new DataItem
        {
            Quarter = "Q4",
            Revenue = 494000
        },
    };
    void OnClick(string buttonName)
    {
      values1 = values3;
      title1 = "2023";
      chart.Reload();
    }
}
6

I found this example. but was hoping for something i could do in code behind ?

<div class="row">
        <div class="col-md-6 col-sm-12 p-4">
            <RadzenChart ColorScheme="@colorScheme">
                @for (var year = 2013; year <= 2020; year++)
                {
                    var currentYearRevenue = revenue.Where(r => r.Year == year).ToList();
                    <RadzenColumnSeries Data="@currentYearRevenue" CategoryProperty="Quarter" Title="@year.ToString()" ValueProperty="Revenue" />
                }
                <RadzenColumnOptions Margin="0" />
                <RadzenValueAxis Formatter="@FormatAsUSD" />
            </RadzenChart>
        </div>
7

Blazor is a declarative framework. You are not supposed to do things in code behind.