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
close icon

How would you bind jason data to circularGuage chart

public class RootObject
    {

        public List<Feed> Feeds { getset; }
    }

    public class Channel
    {
        public int Id { getset; }
        public string Name { getset; }
        public string Description { getset; }
        public string Latitude { getset; }
        public string Longitude { getset; }
        public string Field1 { getset; }
        public DateTime Created_at { getset; }
        public DateTime Updated_at { getset; }
        public string Elevation { getset; }
        public int Last_entry_id { getset; }
    }

    public class Feed
    {
        public DateTime Created_at { getset; }
        public int Entry_id { getset; }
        public string Field1 { getset; }
    }


    public partial class DripPage : TabbedPage
    {
        void Handle_Refreshing(object sender, System.EventArgs e)
        {
            postsListView.ItemsSource = _data;
            postsListView.EndRefresh();
        }

        private const string Url = "https://thingspeak.com/channels/301726/field/1.json";
        private HttpClient _client = new HttpClient();
        private ObservableCollection<Feed> _data;

    
        public DripPage()
        {
            InitializeComponent();
        }

        protected override async void OnAppearing()
        {
            var content = await _client.GetStringAsync(Url);
            var data = JsonConvert.DeserializeObject<RootObject>(content);

            _data = new ObservableCollection<Feed>(data.Feeds);
            postsListView.ItemsSource = _data;

    
            base.OnAppearing();
        }

        void OnAdd(object sender, System.EventArgs e)
        {
        }

        void OnUpdate(object sender, System.EventArgs e)
        {
        }

        void OnDelete(object sender, System.EventArgs e)
        {
        }
    }
}

5 Replies

PS Parthiban Sundaram Syncfusion Team September 29, 2017 12:29 PM UTC

Hi Carlo,

Thanks for using Syncfusion products.

We have achieved your requirement with provided JSON data using DoughnutSeries in SfChart. Please download the sample from following location.

Sample: http://www.syncfusion.com/downloads/support/forum/132917/ze/JSONSample1309713780

If your requirement is difference from this, please update us more details regarding about your requirement which will be helpful for providing better solution on this.

Regards,
Parthiban S


CC Carlo Chan September 30, 2017 09:02 AM UTC

hi,

Sorry i wanted the data to be really displayed on a sfcircular guage as the data that i am using is coming from a device i created that measures a water meter pulse. 

Is this possible? 

All i need is for the field1 data to show on the circular guage like an actual water meter

Thanks

Carlo chan 




NS Nitish Subramania Reddiar Syncfusion Team October 2, 2017 12:42 PM UTC

Hi Carlo,

Could you please confirm whether you want to create the CircularGauges for each of the JSON data or to which field in the JSON data the value of the circular gauge to be bound?

Could you please explain your scenario to provide a better solution?

Regards,
Nitish S


CC Carlo Chan October 2, 2017 11:06 PM UTC

Hi 

So i would like to bind data to only field 1. And only create a circular guage for Field1 jason Data.

see below 

Thanks


public class Feed 

    {
       

        public double Field1 { getset; } //This JASON field Only as the value of the needle pointer
       
        public DateTime Created_at { getset; }
        public int Entry_id { getset; }









My Scenario - Gauge Code behind 

using System.Net.Http;
using Newtonsoft.Json;
using Xamarin.Forms;
using System.Collections.ObjectModel;
using Syncfusion.SfGauge.XForms;
using System.Collections;
using System.Linq;
using System.Linq.Expressions;
using System.Text;
using System.Threading.Tasks;


namespace Drip
{


    public partial class Guage : ContentPage
    {
        private const string Url = "https://thingspeak.com/channels/301726/field/1.json"; // my JASON DATA
        private HttpClient _client = new HttpClient();
        private ObservableCollection<Feed> _data2;




        SfCircularGauge circular;
        NeedlePointer needlePointer;

        public Guage()
        {
            InitializeComponent();

            circular = new SfCircularGauge();
            circular.VerticalOptions = LayoutOptions.FillAndExpand;
            circular.BackgroundColor = Color.Black;

            Header header = new Header();
            header.Text = "Water Meter";
            header.TextSize = 20;
            header.Position = new Point(0.500.7);
            header.ForegroundColor = Color.Gray;
            circular.Headers.Add(header);

            ObservableCollection<Scale> scales = new ObservableCollection<Scale>();
            Scale scale = new Scale();
            scale.LabelPostfix = "Litres";
            scale.StartValue = 0;
            scale.EndValue = 100;
            scale.Interval = 10;
            scale.StartAngle = 135;
            scale.SweepAngle = 270;
            scale.RimThickness = 20;
            scale.RimColor = Color.White;
            scale.MinorTicksPerInterval = 0;
            scales.Add(scale);



            Range range = new Range();
            range.StartValue = 80;
            range.EndValue = 100;
            range.Color = Color.DarkRed;
            range.Thickness = 10;
            scale.Ranges.Add(range);
            circular.Scales = scales;


            ObservableCollection<NeedlePointer> needle = new ObservableCollection<NeedlePointer>();
            needlePointer = new NeedlePointer();
            needlePointer.Color = Color.Gray;
            needlePointer.KnobColor = Color.Red;
            needlePointer.Thickness = 5;
            needlePointer.KnobRadius = 20;
            needlePointer.LengthFactor = 0.8;
            needlePointer.Value = 37;


             
            scale.Pointers.Add(needlePointer);
        

            Content = circular;
        }


        protected override async void OnAppearing()
        {
            var content = await _client.GetStringAsync(Url);
            var data = JsonConvert.DeserializeObject<RootObject>(content);
            _data2 = new ObservableCollection<Feed>(data.Feeds);


            this.BindingContext = _data2[0];
            needlePointer.SetBinding(Pointer.ValueProperty, "Field1");





        }
    }
}

My Models from Jason data

    public class RootObject
    {

        public IList<Feed> Feeds { getset; }
    }

          public class Channel

    {
        public int Id { getset; }
        public string Name { getset; }
        public string Description { getset; }
        public string Latitude { getset; }
        public string Longitude { getset; }
        public string Field1 { getset; }
        public DateTime Created_at { getset; }
        public DateTime Updated_at { getset; }
        public string Elevation { getset; }
        public int Last_entry_id { getset; }
    }

  public class Feed 

    {

        
 public double Field1 { getset; } //want this JASON field to be binded with Needle pointer  
       
        public DateTime Created_at { getset; }
        public int Entry_id { getset; }






AK Ashwin Kumaravel Syncfusion Team October 3, 2017 12:02 PM UTC

Hi Carlo,

Thanks for the update,

We have validated your query “Need to bind needle data with Needle pointer” and created a sample using CircularGauge to achieve your requirement. In the attached sample, we have read the Json data and bound the latest values of Field1 and Entry_id with the needle pointer and header values. Gauge Start and End value is set based on the minimum and maximum values of the Field1 items. Can you please download the sample from the below link?

Sample Link- http://www.syncfusion.com/downloads/support/forum/132917/ze/CircularGaugeGettingStarted-1493162423  

We have validated the value which we are getting for _data[0] from json is 0. Please refer the following screenshot of the json data.

Screenshot-


In the above screenshot, we have highlighted the latest field1 item value from the collection. So, if you bound those value with the needle pointer it will point only the 0 value.

Please get back to us if you have any concern,

Regards,
Ashwin

 


Loader.
Live Chat Icon For mobile
Up arrow icon