0

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>();

        }
    }
}
4
  • the "\" are escape characters the IDE uses to differentiate enclosing quotes vs quotes that are actually part of the data Commented Aug 23, 2019 at 22:04
  • also, in general an ItemsSource needs to be an IEnumerable Commented Aug 23, 2019 at 22:07
  • The code above does not work as is. That said, I don't think you can use dictionary values as binding path, e.g. XBindingPath = "Values[OrderID]". I believe the binding path has to be to a property the item. Commented Aug 24, 2019 at 3:23
  • Thanks jgoldberger, I understand that the code does not work. I'm looking for a recommendation as to how it may be fixed in order to work. Commented Aug 24, 2019 at 3:56

1 Answer 1

0

We have analysed your requirement and we have prepared a simple sample by using the provided json data. If you want to directly give data in sample level, you have to pass the string in below format. Please refer the below code.

Code snippet [C#]:

string jsonData = "[{'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}]"; 

var jsonDataCollection = JsonConvert.DeserializeObject<ObservableCollection<ChartData>>(jsonData); 
viewModel.LineData = jsonDataCollection; 
chart.BindingContext = viewModel; 

Code snippet [XAML]:

<chart:SfChart.Series> 
    <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="CustomerID" YBindingPath="OrderID"> 
    </chart:ColumnSeries> 
</chart:SfChart.Series> 

Please use the below code, if you are trying to bind the data from URL.

Code snippet [C#]:

private const string Url = "https://ej2services.syncfusion.com/production/web-services/api/Orders";  
private readonly HttpClient _client = new HttpClient();  

protected override async void OnAppearing() 
{ 
    string content = await _client.GetStringAsync(Url); 
    var json_Datas = JsonConvert.DeserializeObject<ObservableCollection<Model>>(content); 
    viewModel.Data = json_Datas; 
    myChart.BindingContext = viewModel; 
    base.OnAppearing(); 
} 

Code snippet[XAML]:

<chart:SfChart.Series> 
    <chart:ColumnSeries ItemsSource="{Binding LineData}" XBindingPath="minute" YBindingPath="close"> 
    </chart:ColumnSeries> 
</chart:SfChart.Series> 

Sample - https://www.syncfusion.com/downloads/support/directtrac/246209/ze/Sample_jsondata1190695562.zip

Note: We have checked the sample in Mac Visual Studio 2019. It works fine.

If you still face any problem, can you revert us by modifying the attached sample based on your application scenario, this will help us to provide you a better solution at the earliest.

Regards, Muneesh Kumar G

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.