I have been trying to get a simple JSON data consumption to bind to a SyncFusion Line Chart. While I can easily download and parse JSON data in Xamarin for binding to other controls, I cannot get the JSON data to successfully bind to a SyncFusion Line Chart.
My goal is to download stock market price data and bind it to a chart using the LEAST amount of code possible. I want to use the absolute minimal amount of code required to get it working. I can then later add other complexities to it.
I have created a new test solution based off of an example I found for binding JSON data without a POCO object. The solution is pretty simple, but even with the sample data, I cannot get the data to appear. I can see the chart appear, but not the data being plotted.
Eventually I want to replace that sample JSON data with the actual data I am consuming. Here is an EXACT sample of the data that I am consuming:
BEGIN --
[{"date":"2019-08-23","minute":"09:30","label":"09:30 AM","high":46.35,"low":46.31,"open":46.35,"close":46.33,"average":46.333,"volume":1400,"notional":64865.6,"numberOfTrades":12},{"date":"2019-08-23","minute":"09:31","label":"09:31 AM","high":46.3,"low":46.16,"open":46.3,"close":46.17,"average":46.219,"volume":1408,"notional":65076.4,"numberOfTrades":12},{"date":"2019-08-23","minute":"09:32","label":"09:32 AM","high":46.23,"low":46.14,"open":46.185,"close":46.14,"average":46.174,"volume":1900,"notional":87730.5,"numberOfTrades":17},{"date":"2019-08-23","minute":"09:33","label":"09:33 AM","high":46.23,"low":46.16,"open":46.16,"close":46.2,"average":46.201,"volume":801,"notional":37007.2,"numberOfTrades":9},{"date":"2019-08-23","minute":"09:34","label":"09:34 AM","high":46.32,"low":46.265,"open":46.265,"close":46.32,"average":46.298,"volume":273,"notional":12639.345,"numberOfTrades":3},{"date":"2019-08-23","minute":"09:35","label":"09:35 AM","high":46.325,"low":46.23,"open":46.325,"close":46.235,"average":46.289,"volume":1701,"notional":78737.81,"numberOfTrades":12},{"date":"2019-08-23","minute":"09:36","label":"09:36 AM","high":46.185,"low":46.125,"open":46.185,"close":46.125,"average":46.164,"volume":693,"notional":31992.01,"numberOfTrades":12}]
END ---
I just want to plot the "minute" and "close" properties of this data on the chart.
Below is the example I created based off of a sample I found. I want to replace the JSONDATA found in this example with the data above. However, when I retrieve my actual stock data, it doesn't have the "\" keystroke before each quote (as you can see above). I don't know how to work around that. Be that as it may, here is the code below I have created, yet even with this I cannot get the X and Y values to actually plot. I'm not seeing what I am missing, although I'm sure it's probably simple.
Any advice is greatly appreciated. Here is my sample:
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Newtonsoft.Json;
using Syncfusion.SfChart.XForms;
using Xamarin.Forms;
namespace ChartTest_03
{
[DesignTimeVisible(false)]
public partial class MainPage : ContentPage
{
private SfChart chart;
private ViewModel viewModel;
public MainPage()
{
InitializeComponent();
chart = new SfChart();
viewModel = new ViewModel();
CategoryAxis primaryAxis = new CategoryAxis();
chart.PrimaryAxis = primaryAxis;
NumericalAxis secondaryAxis = new NumericalAxis();
chart.SecondaryAxis = secondaryAxis;
FastLineSeries fastLineSeries = new FastLineSeries()
{
ItemsSource = viewModel.DynamicCollection,
XBindingPath = "Values[OrderID]",
YBindingPath = "Values[EmployeeID]"
};
this.Content = chart;
}
}
public class ViewModel
{
public const string JsonData = "[{\"OrderID\":1,\"EmployeeID\":100,\"FirstName\":'Gina',\"LastName\":'Gable'}," +
"{\"OrderID\":2,\"EmployeeID\":300,\"FirstName\":'Danielle',\"LastName\":'Rooney'}," +
"{\"OrderID\":3,\"EmployeeID\":200,\"FirstName\":'Frank',\"LastName\":'Gable'},]";
public ObservableCollection<DynamicModel> DynamicCollection { get; set; }
public List<Dictionary<string, object>> DynamicJsonCollection { get; set; }
public ViewModel()
{
DynamicJsonCollection = JsonConvert.DeserializeObject<List<Dictionary<string, object>>>(JsonData);
DynamicCollection = PopulateData();
}
private ObservableCollection<DynamicModel> PopulateData()
{
var data = new ObservableCollection<DynamicModel>();
foreach (var item in DynamicJsonCollection)
{
var obj = new DynamicModel() { Values = item };
data.Add(obj);
}
return data;
}
}
public class DynamicModel : INotifyPropertyChanged
{
public Dictionary<string, object> data;
public event PropertyChangedEventHandler PropertyChanged;
public Dictionary<string, object> Values
{
get
{
return data;
}
set
{
data = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("Values"));
}
}
public DynamicModel()
{
this.data = new Dictionary<string, object>();
}
}
}