We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Chart has no data

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;
}
}

2 Replies

JP Jonathan Peterson October 22, 2017 12:53 AM UTC

I've created an MVP project on github. https://github.com/Eonasdan/syncfusiontest/tree/master It's nearly a direct copy paste of the Sample Browser app. No markers are displayed



DS Durgadevi Selvaraj Syncfusion Team October 23, 2017 11:17 AM UTC

Hi Jonathan, 
 
Thanks for contacting Syncfusion Support. 
Query 1:  several things to get my own data and the sample data, however still no data  
 
We have checked with the provided set of codes and found you are using services to get the data and making a datasource, since we don’t have any information on the services you have used we couldn’t reproduce the issue. However, we have tried with simple data set in that sample and the chart displaying data properly. Could you please double check whether getting data from service is working properly and then added to the data collection in your sample? 
 
Please find output screenshot below, 
 
Please find the reference sample from below location, 
If you are still able to reproduce the same problem then please revert us with more information about the exact problem or modifying the above sample to reproduce the issue, it would be more helpful for us to provide a solution as sooner. 
 
Query 2: I've created an MVP project. It's nearly a direct copy paste of the Sample Browser app. No markers are displayed 
 
We have analyzed the provided sample and there were no codes for displaying data markers. To displaying data marker to the series, we need to specify the code as like in the below, 
XAML: 
<xForms:LineSeries.DataMarker> 
 
       <xForms:ChartDataMarker > 
           <xForms:ChartDataMarker.LabelStyle> 
 
              <xForms:DataMarkerLabelStyle LabelPosition="Center"/> 
 
           </xForms:ChartDataMarker.LabelStyle> 
       </xForms:ChartDataMarker> 
 
</xForms:LineSeries.DataMarker> 

Please find the output screenshot below, 
 
We have attached the modified sample for your reference and it can be downloaded from the below link, 
  
Regards, 
Durgadevi

Loader.
Up arrow icon