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.
Unfortunately, activation email could not send to your email. Please try again.

How to bind data with the SfCircular Gauge

Thread ID:

Created:

Updated:

Platform:

Replies:

132972 Oct 2,2017 01:13 AM Oct 4,2017 06:07 AM Xamarin.Forms 10
loading
Tags: SfCircularGauge
Carlo Chan
Asked On October 2, 2017 01:13 AM

This is my current code for binding data to the sfCircularGauge specifically the needle pointer value. 
However when i run the application the gauge still shows zero and doesent change value as my data changes. Would anyone know how to solve this? Greatly appreciated.
Guess what im trying to do is make the sfCirculargauge updat dynamically with jason data.

CODE BEHIND FOR circular Gauge 

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";
        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 = 30;
            scale.Interval = 2;
            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 = 20;
            range.EndValue = 30;
            range.Color = Color.DarkRed;
            range.Thickness = 10;
            scale.Ranges.Add(range);
            circular.Scales = scales;



            needlePointer = new NeedlePointer();
            needlePointer.Color = Color.Gray;
            needlePointer.KnobColor = Color.Red;
            needlePointer.Thickness = 5;
            needlePointer.KnobRadius = 20;
            needlePointer.LengthFactor = 0.8;
            needlePointer.Value = 20;




            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");// Binding data






}


        }
    }
}




MODELS

using System.Collections.Generic;


namespace Drip
{
    public class RootObject
    {

        public List<Feed> Feeds { getset; }
    }


}

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace Drip
{
    public class Feed : INotifyPropertyChanged

    {
        private double _field1 = 0;
        public double Field1

        {
            get
            {
                return _field1;
            }
            set
            {
                if (_field1 != value)
                {
                    _field1 = value;
                    OnPropertyChanged();
                }


            }


        }
        public DateTime Created_at { getset; }
        public int Entry_id { getset; }


        public event PropertyChangedEventHandler PropertyChanged;

        private void OnPropertyChanged([CallerMemberNamestring propertyField1 = null)
        {
            {
                var handler = PropertyChanged;
                if (handler != null)
                {
                    PropertyChangedEventArgs propertyChangedEvent
                    = new PropertyChangedEventArgs(propertyField1);
                    handler(this, propertyChangedEvent);
                }
            }
        }
    }
}


THANKS 

Ashwin Kumaravel [Syncfusion]
Replied On October 3, 2017 06:26 AM

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 random 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/132972/ze/CircularGaugeGettingStarted699796166  

Screenshot-
 
  
Please get back to us if you have any concern.

Regards,
Ashwin
 


Carlo Chan
Replied On October 3, 2017 07:36 AM

Hi Thanks so much for the reply 

It seems it goes through a a random loop of all the jason data  and the needle is constantly moving which is not what i was aiming for, how could you adjust this so that it only shows the latest jason data value 

Regards 



Ashwin Kumaravel [Syncfusion]
Replied On October 3, 2017 07:47 AM

Hi Carlo,

Thanks for the update,

Can you please get the latest Json value by referring the below code snippet?

Code Snippet-

var Value = _data[0].Field1;

We have modified our existing sample file and can you please replace the below attached CS file with the existing project files?

Link- http://www.syncfusion.com/downloads/support/forum/132972/ze/CircularGaugeGettingStartedPage.xaml-1604539278  

Note-

We have validated the value which we are getting from _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.

Regards,
Ashwin 


Carlo Chan
Replied On October 3, 2017 08:03 AM

Hey Thanks for the quick Reply!

I believe that is the 1st data  as the entry id is 1, the latest would be entry id 41 which gives a value of 18. 

is there a solution to show newest value only so maybe largest entry id? 


Thanks 


Ashwin Kumaravel [Syncfusion]
Replied On October 3, 2017 08:13 AM

Hi Carlo,

Thanks for the update,

Can you please refer the following code snippet so that you can get the latest value from the json data?

Code Snippet-

var Value = _data[_data.Count-1].Field1;

Please get back to us if you have any concern,

Regards,
Ashwin


Carlo Chan
Replied On October 3, 2017 08:30 AM

do i apply this to the last cs code you provided or the first one?

 public partial class Guage2 : ContentPage
    {
        public partial class CircularGaugeGettingStartedPage : ContentPage
        {
            private const string Url = "https://thingspeak.com/channels/301726/field/1.json";
            private HttpClient _client = new HttpClient();
            private ObservableCollection<Feed> _data;
            Feed model;
            string content;
            public CircularGaugeGettingStartedPage()
            {
                model = new Feed();
                this.BindingContext = model;
                InitializeComponent();
                var Value = _data[_data.Count - 1].Field1;

            }

            protected override async void OnAppearing()
            {
                content = await _client.GetStringAsync(Url);
                RootObject data = JsonConvert.DeserializeObject<RootObject>(content);
                _data = new ObservableCollection<Feed>(data.Feeds);
                model.Min = (int)_data.Min(x => x.Field1);
                model.Max = (int)_data.Max(x => x.Field1);
                model.Field1 = _data[0].Field1;
                model.Header = _data[0].Entry_id.ToString();
                base.OnAppearing();
            }
        }
    }
}
  


Carlo Chan
Replied On October 3, 2017 08:35 AM

Hey 

Sorry I don't quite understand where to refer the latest code snippet?

Thanks 

Kind Regards



Ashwin Kumaravel [Syncfusion]
Replied On October 3, 2017 08:42 AM

Hi Carlo,

We have modified our existing sample to achieve your requirement. Can you Please download the latest sample from the below link?

Sample Link- http://www.syncfusion.com/downloads/support/forum/132972/ze/CircularGaugeGettingStarted1393279746  

Please refer the code snippet to get the latest value in the collection,

Code Snippet-

var Value = _data[_data.Count-1].Field1;

Regards,
Ashwin
 
  
  


Carlo Chan
Replied On October 3, 2017 08:54 AM

Hi 

This works perfectly! Thanks 

Just one more thing, just want to understand how you got it to point to the latest value

could you explain the snippet code? 

Thanks


Ashwin Kumaravel [Syncfusion]
Replied On October 4, 2017 06:07 AM

Hi Carlo,

Thanks for the update,

Query- “just want to understand how you got it to point to the latest value”

We are deserializing the Json data’s from the link which you have provided ”https://thingspeak.com/channels/301726/field/1.json"

The deserialized datas are stored in a collection named as _data.Therefore _data will contains all the items from the Json data’s.

Code Snippet-

The following code snippet to get the latest value in the _data collection,

var Value = _data[_data.Count-1].Field1;

If _data collection count is 10,then we can get the latest item by,

_data[_data.Count-1] =>_data[9]  //This will fetch the last item from the _data collection

Regards,
Ashwin


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;