Line Series Won't Display

1 Answer 63 Views
Chart
Garrett
Top achievements
Rank 1
Garrett asked on 02 Aug 2023, 05:00 PM

I am trying to do a Line Series chart based on DateTimeAxis. Here is my XAML:

<StackLayout>
                    <telerik:RadCartesianChart
                        VerticalOptions="FillAndExpand">
                        <telerik:RadCartesianChart.HorizontalAxis>
                            <telerik:DateTimeContinuousAxis LabelFitMode="Rotate"
                                                            MajorStepUnit="Month" />
                        </telerik:RadCartesianChart.HorizontalAxis>
                        <telerik:RadCartesianChart.VerticalAxis>
                            <telerik:NumericalAxis
                                Maximum="{Binding StartWeight}"
                                Minimum="{Binding GoalWeight}"/>
                        </telerik:RadCartesianChart.VerticalAxis>
                        <telerik:RadCartesianChart.Series>
                            <telerik:LineSeries ValueBinding="Weight"
                                                CategoryBinding="Date"
                                                ItemsSource="{Binding SeriesData}" />
                        </telerik:RadCartesianChart.Series>
                    </telerik:RadCartesianChart>
                </StackLayout>

Here is where I create the observable collection:

private async Task<ObservableCollection<ProgressSeriesData>> GetCategoricalDataFromDbAsync()
    {
        var entries = await _database.GetItemsAsync(); // Retrieve all entries from database
        ObservableCollection<ProgressSeriesData> data = new();
        var ID = 0;

        foreach (var entry in entries)
        {
            ProgressSeriesData progressSeriesData = new()
            {
                Date = entry.Date,
                Weight = entry.Weight,
                ID = ID
            };
            data.Add(progressSeriesData);
            ID++;
        }

        return data;
    }

and here is what is displayed in the app:

 

I'm not sure why it won't plot the line for me? Here is what the data looks like in the model:

Any and all help is appreciated :)

 

Thanks!

1 Answer, 1 is accepted

Sort by
0
Accepted
Lance | Manager Technical Support
Telerik team
answered on 02 Aug 2023, 08:58 PM

Hello Garrett,

I am unable to give you a definitive answer with that minimal amount of code. It's seems that you have that view inside a DataTemplate for something like a CollectionView, so we'll need the rest of the XAML to understand the layout pressures imposed by the parents.

Impressions

For now, I can give you some of my initial impressions that might lead you to a solution without needing to see the rest of the code.

Impression 1 - Layout (highly likely)

A VerticalStackLayout is not very friendly to UI components that use UI virtualization or any sort of measurement from the layout parent. Although you've set FillAndExpand, this is not good enough with a VerticalStackLayout. You can learn more about this situation by reviewing the following article => Controls Are Not Appearing (don't worry that its form the Xamarin.Forms docs, the same problem still exists in .NET MAUI).

So, to eliminate this problem as the cause of your current issue, please try setting an explicit HeightRequest, or even better, change the Parent to a Grid and the chart needs to go into a RowDefinition with a star-sized height (as shown in the linked troubleshooting article)

An easy start would be to just try the HeightRequest,

<VerticalStackLayout>
    <telerik:RadCartesianChart HeightRequest="200">
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:DateTimeContinuousAxis LabelFitMode="Rotate"
                                            MajorStepUnit="Month" />
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:NumericalAxis
                Maximum="{Binding StartWeight}"
                Minimum="{Binding GoalWeight}"/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:LineSeries ValueBinding="Weight"
                                CategoryBinding="Date"
                                ItemsSource="{Binding SeriesData}" />
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>
</VerticalStackLayout>

If that resolves the issue, then I recommend thinking about redesigning your ItemTemplate to something more forgiving like a Grid.

Impression 2 - UI Thread

Another reason why this might not be working is due the items being added to the Chart's ObservableCollection in a background thread. If that method is being called in another place that is not the UI thread, then you can do this:

MainThread.BeginInvokeOnMainThread(async () =>
{
    SeriesData = await GetCategoricalDataFromDbAsync();
});

Docs => Run code on the main UI thread - .NET MAUI | Microsoft Learn

Impression 3 - Missing OnPropertyChanged

If you're replacing the entire SeriesData instance, make sure that the SeriesData property is invoking OnPropertyChanged. For example:

private ObservableCollection<ProgressSeriesData> seriesData;

public ObservableCollection<ProgressSeriesData> SeriesData
{
    get => seriesData;
    set => SetProperty(ref seriesData, value); // invokes OnPropertyChanged for "SeriesData" property
}

Alternatively, if you're never replacing the collection instance (i.e. it is a read-only property), just using the Add method is sufficient:

var chartData = await GetCategoricalDataFromDbAsync();

if(SeriesData.Any())
    SeriesData.Clear();

foreach(var item in chartData)
    SeriesData.Add(item);

Further Investigation

If none of my ideas resolve the issue, please consider opening a Technical Support Ticket, rather than a slower forum post, and sharing the rest of your code with us in a private setting. This will allow us to review the entire context of the situation and provide you with suggestions to move forward more rapidly than forums back-and-forth.

Regards,
Lance | Manager Technical Support
Progress Telerik

A brand new .NET MAUI course was just added to the Virtual Classroom. The training course is developed to help you get started with the Telerik UI for .NET MAUI components and features. It aims to put you in the shoes of an engineer who adds new features to an existing application. You can check it out at https://learn.telerik.com
Garrett
Top achievements
Rank 1
commented on 02 Aug 2023, 09:36 PM

As soon I changed the StackLayout to Grid everything works as expected. Thank you so much!!! Lesson learned :)
Lance | Manager Technical Support
Telerik team
commented on 02 Aug 2023, 09:47 PM

Fantastic! Please don't hesitate to reach out to us again if you have further issues.
Garrett
Top achievements
Rank 1
commented on 02 Aug 2023, 11:45 PM

Not sure if this is a bug or if I'm just missing something, but when I first load the app the chart looks like this:

but as soon as I change data, the chart refreshes and looks like this

So it's seeing the new data but now the X Axis is showing actual dates and not just the Month name.

Lance | Manager Technical Support
Telerik team
commented on 03 Aug 2023, 03:21 PM

Hi Garrett, looking at the horizontal axis, you have not explicitly defined a display format, only the tick spacing (with MajorStepUnit). 

So, if the data is presented in a way that has the full DateTime value, it may use it depending on the values. To avoid this possibility, explicitly set a LabelFormat to your desired display. see this documentation for more details:

For example, this will use only the month names:

<telerik:DateTimeContinuousAxis LabelFitMode="Rotate"
                                            MajorStepUnit="Month" 
                                            LabelFormat="MMMM"/>

Let me know if that resolved the issue.

Garrett
Top achievements
Rank 1
commented on 03 Aug 2023, 06:00 PM

Like a charm! Thanks again Lance!
Tags
Chart
Asked by
Garrett
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Share this question
or