Radzen X Axis Format Method

Question

X Axis Formatter Method

The user can select a specified DateRange label from a dropdown, which will then dynamically render sales data in between the given range. The DateRange labels are as follows: Today or Yesterday Current Week or Last Week Current Month or Last Month Current Year or Last Year

The x axis should be labeled as follows on user selection: Today or Yesterday (12am - 11:59pm) Current Week or Last Week (Sun - Mon) Current Month or Last Month (1 - 30 or 1- 31) Current Year or Last Year (Jan - Dec)

The code I currently have (Not working):

public string FormatXAxis(object value)
        {
            DateTime dateTime = (DateTime)value;

            if (selectedDateRange == "Today")
            {
                DateTime startOfDay = dateTime.Date;
                DateTime endOfDay = startOfDay.AddDays(1).AddTicks(-1);

                if (dateTime >= startOfDay && dateTime <= endOfDay)
                {
                    return dateTime.ToString("h tt", CultureInfo.InvariantCulture);
                }
            }
            else if (selectedDateRange == "Yesterday")
            {
                DateTime startOfYesterday = dateTime.Date.AddDays(-1);
                DateTime endOfYesterday = dateTime.Date.AddTicks(-1);

                if (dateTime >= startOfYesterday && dateTime <= endOfYesterday)
                {
                    return dateTime.ToString("h tt", CultureInfo.InvariantCulture);
                }
            }
            else if (selectedDateRange == "Current Week" || selectedDateRange == "Last Week")
            {
                DayOfWeek dayOfWeek = dateTime.DayOfWeek;

                if (dayOfWeek >= DayOfWeek.Monday && dayOfWeek <= DayOfWeek.Thursday)
                {
                    return dateTime.ToString("ddd", CultureInfo.InvariantCulture);
                }
            }
            else if (selectedDateRange == "Current Month" || selectedDateRange == "Last Month")
            {
                return dateTime.ToString("dd", CultureInfo.InvariantCulture);
            }
            else if (selectedDateRange == "Current Year" || selectedDateRange == "Last Year")
            {
                return CultureInfo.InvariantCulture.DateTimeFormat.GetAbbreviatedMonthName(dateTime.Month);
            }
            return string.Empty; // Return empty string if no match
        }

score 0 · Answer 1 · answered May 31 '23 at 08:29

Here is a quick and dirty example with data showing a range of a day or a week, depending on selected dropdown. Radzen uses for the datetime formatting the official way Microsoft Custom date and time format string or a more comfortable example here Example for date and time format strings

But of course, you still have to edit the period so that not too many values are displayed otherwise they overlap. As an idea you could calculate a factor depending on the amount of elements. For example if you always want 10 Elements to show on x-axis and you have 50 days you can calculate the timespan = amountofelements / 10 and round it to one decimal place. Then all data would be displayed in the chart and on the x-axis label only every 5th element would be displayed.

This is the c# example

public IEnumerable<string> SpanFilter;
public string SelectedSpan;
public List<DataModel> PeriodChartData;
public TimeSpan PeriodStep;
public TimeSpan TotalTimeSpan;

protected override void OnInitialized()
{
    SpanFilter = new string[] { "Today", "Week" };
    SelectedSpan = SpanFilter.FirstOrDefault();
    OnSelectionChanged();
}

public void OnSelectionChanged()
{
   PeriodChartData = new List<DataModel>();

    var hoursToCount = 23;
    if (SelectedSpan == "Week")
        hoursToCount = 168; 
        
    for (int i = 0; i < hoursToCount; i++)
    {
        var testData = new DataModel()
            {
                DatetimeFrom = DateTime.Now - TimeSpan.FromDays(1) + TimeSpan.FromHours(i),
                DatetimeTo = DateTime.Now - TimeSpan.FromDays(1) + TimeSpan.FromHours(i + 1),
                ExampleData = i
            };
        PeriodChartData.Add(testData);
    }
    TotalTimeSpan = PeriodChartData.Last().DatetimeTo - PeriodChartData.First().DatetimeFrom;
    if (TotalTimeSpan.TotalHours > 24)
        PeriodStep = TimeSpan.FromDays(1);
    else
        PeriodStep = TimeSpan.FromHours(1);

    StateHasChanged();
}

public class DataModel
{
    public int ExampleData
    {
        get; set;
    }

    public DateTime DatetimeFrom
    {
        get; set;
    }

    public DateTime DatetimeTo
    {
        get; set;
    }
}

This is the blazor code:

@if (PeriodChartData != null)
{
   <RadzenChart>
       <RadzenLineSeries Data="@PeriodChartData" Title="Example Data" ValueProperty="ExampleData" CategoryProperty="DatetimeFrom" />

       @if (TotalTimeSpan.TotalHours > 24)
       {
           <RadzenCategoryAxis FormatString="{0:dd/MM/yyyy}" Step=@PeriodStep Padding="20" />
       }
       else
       {
           <RadzenCategoryAxis FormatString="{0:HH:mm}" Step=@PeriodStep Padding="20" />
       }
   </RadzenChart>
}

If you select the Weekly output

Screenshot for one week

If you select the daily output:

Screenshot for one day

Radzen X Axis Format Method

1 Answers1