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
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
Rank 1
Rank 1
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.
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.
Rank 1