The sample project for the date chart works fine. I'm trying to replicate it in my own UWP app however, I cannot get the data to display. As far as I can tell I had a copy of the sample chart including "DateTimeAxisViewModel". I've tried several things to get my own data and the sample data, however still no data :(
The sample project for the date chart works fine. I'm trying to replicate it in my own app however, I cannot get the data to display. As far as I can tell I had a copy of the sample chart including "DateTimeAxisViewModel". I've tried several things to get my own data and the sample data, however still no data :(
Page frontend code
<chart:SfChart HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" x:Name="SfChart">
<chart:SfChart.Margin>
<OnPlatform x:TypeArguments="Thickness" WinPhone="0,0,15,0" />
</chart:SfChart.Margin>
<chart:SfChart.Title>
<chart:ChartTitle Text="Weight Log" Font="15"/>
</chart:SfChart.Title>
<chart:SfChart.PrimaryAxis>
<chart:DateTimeAxis LabelRotationAngle="-45" EdgeLabelsDrawingMode="Shift">
<chart:DateTimeAxis.Title>
<chart:ChartAxisTitle Text ="Date">
<chart:ChartAxisTitle.Margin>
<OnPlatform x:TypeArguments="Thickness" Android="0,10,0,0"/>
</chart:ChartAxisTitle.Margin>
</chart:ChartAxisTitle>
</chart:DateTimeAxis.Title>
<chart:DateTimeAxis.LabelStyle>
<chart:ChartAxisLabelStyle LabelFormat = "MM/dd/yyyy"/>
</chart:DateTimeAxis.LabelStyle>
</chart:DateTimeAxis>
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis Minimum="0" Maximum="500" Interval="10" x:Name="YAxis">
<chart:NumericalAxis.Title>
<chart:ChartAxisTitle Text ="Weight">
<chart:ChartAxisTitle.Margin>
<OnPlatform x:TypeArguments="Thickness" Android="0,0,10,0"/>
</chart:ChartAxisTitle.Margin>
</chart:ChartAxisTitle>
</chart:NumericalAxis.Title>
<chart:NumericalAxis.LabelStyle>
<chart:ChartAxisLabelStyle LabelFormat = "##.##"/>
</chart:NumericalAxis.LabelStyle>
</chart:NumericalAxis>
</chart:SfChart.SecondaryAxis>
<chart:SfChart.Series>
<chart:LineSeries ItemsSource="{Binding ChartValues}" XBindingPath="Date" YBindingPath="Value" EnableTooltip="True">
</chart:LineSeries>
</chart:SfChart.Series>
</chart:SfChart>
Page backend code
public partial class MyPage
{
private readonly IMyService _myService;
public MyPage()
{
InitializeComponent();
_myService = App.Resolve<IMyService>();
AddItemButton.Icon = AssetExtensions.AssetPathForPlatform("plus.png");
var chartDataModels = GetData();
BindingContext = new MyVM
{
ChartValues = chartDataModels
};
}
private ObservableCollection<ChartDataModel> GetData()
{
var chartDataModels = new ObservableCollection<ChartDataModel>();
var items = _myService.Search(new EntitySearchDTO
{
DateStart = DateTime.UtcNow.AddDays(-7).StartOf(DateTimeParts.Day),
DateEnd = DateTime.UtcNow.EndOf(DateTimeParts.Day)
}).OrderBy(x => x.DateAdded);
var maxHeight = 0;
foreach (var item in items)
{
if (item.Amount > maxHeight) maxHeight = (int)item.Amount;
chartDataModels.Add(new ChartDataModel(item.DateAdded, (double)item.Amount));
}
YAxis.Maximum = maxHeight + 50;
return chartDataModels;
}
private async void AddItem_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new AddEditWeightPage());
}
}
MyVM:
public class MyVM : ViewModelBase //inherits INotifyPropertyChanged
{
private ObservableCollection<ChartDataModel> _chartValues;
public ObservableCollection<ChartDataModel> ChartValues
{
get => _chartValues;
set
{
_chartValues = value;
RaisePropertyChanged(nameof(ChartValues));
}
}
}
ChartDataModel:
public class ChartDataModel
{
public DateTime Date { get; set; }
public double Value { get; set; }
public ChartDataModel(DateTime dateTime, double value)
{
Date = dateTime;
Value = value;
}
}