Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to create a dynamic chart?

caf3caf3 Member ✭✭

Hello, I am new to Xamarin and C # and I got the code for a sample application that captures data and shows it regularly on the screen (as a string) and it is working fine. I am interested in inserting a line graph of this data in real-time on this same screen, but I tried to follow several data binding tutorials (using Microcharts, for example) but I cannot make it work with this code, since it is already more complex than starting from scratch. Could someone guide me on how I can make the data contained in CharacteristicValue appear in a chart? I will paste my ViewModel here, but let me know in case it is not enough. I can use any nuget as long as it's free. I will be very grateful for any help.

namespace BLE.Client.ViewModels
{
    public class CharacteristicDetailViewModel : BaseViewModel
    {
        private readonly IUserDialogs _userDialogs;
        private bool _updatesStarted;
        public ICharacteristic Characteristic { get; private set; }

        public string CharacteristicValue => Characteristic?.Value.ToHexString().Replace("-", " ");

        public ObservableCollection<string> Messages { get; } = new ObservableCollection<string>();

        public string UpdateButtonText => _updatesStarted ? "Stop updates" : "Start updates";


        public CharacteristicDetailViewModel(IAdapter adapter, IUserDialogs userDialogs) : base(adapter)
        {
            _userDialogs = userDialogs;
        }

        public override async void Prepare(MvxBundle parameters)
        {
            base.Prepare(parameters);

            Characteristic = await GetCharacteristicFromBundleAsync(parameters);
        }

        public override void ViewAppeared()
        {
            base.ViewAppeared();

            if (Characteristic != null)
            {
                return;
            }

            var navigation = Mvx.IoCProvider.Resolve<IMvxNavigationService>();
            navigation.Close(this);
        }
        public override void ViewDisappeared()
        {
            base.ViewDisappeared();

            if (Characteristic != null)
            {
                StopUpdates();
            }

        }


        public MvxCommand ToggleUpdatesCommand => new MvxCommand((() =>
        {
            if (_updatesStarted)
            {
                StopUpdates();
            }
            else
            {
                StartUpdates();
            }
        }));

        private async void StartUpdates()
        {
            try
            {
                _updatesStarted = true;

                Characteristic.ValueUpdated -= CharacteristicOnValueUpdated;
                Characteristic.ValueUpdated += CharacteristicOnValueUpdated;
                await Characteristic.StartUpdatesAsync();


                Messages.Insert(0, $"Start updates");

                await RaisePropertyChanged(() => UpdateButtonText);

            }
            catch (Exception ex)
            {
                await _userDialogs.AlertAsync(ex.Message);
            }
        }

        private async void StopUpdates()
        {
            try
            {
                _updatesStarted = false;

                await Characteristic.StopUpdatesAsync();
                Characteristic.ValueUpdated -= CharacteristicOnValueUpdated;

                Messages.Insert(0, $"Stop updates");

                await RaisePropertyChanged(() => UpdateButtonText);

            }
            catch (Exception ex)
            {
                await _userDialogs.AlertAsync(ex.Message);
            }
        }

        private void CharacteristicOnValueUpdated(object sender, CharacteristicUpdatedEventArgs characteristicUpdatedEventArgs)
        {

            RaisePropertyChanged(() => CharacteristicValue);
        }
    }
}

Answers

  • caf3caf3 Member ✭✭

    I am not able to post links yet, but I tried, for example to use the code from
    https:// * github.com/dotnet-ad/Microcharts/issues/30
    and I was not sure of what should I write instead of "myapi"

  • XavierPerseguersXavierPerseguers CHMember ✭✭✭

    "myapi" is used in that context:

    var values = await this.myapi.GetValuesAsync();
    

    well... isn't that obvious? it's anything on your own to provide data to be plotted... 🙄🤐

    I'm using SfChart from Syncfusion, tremendous!

  • caf3caf3 Member ✭✭

    Hello, XavierPerseguers
    Thank you for your reply. Well, if it was obvious to ME I would not be here making a question :)
    Yes, I am aware that myapi should be data provided by me, but I don't understand, exactly which form should it have. Do I need to create a list with variables or something?

  • XavierPerseguersXavierPerseguers CHMember ✭✭✭

    Don't know at all, but you better should ask your question in the corresponding project as it is not related to Xamarin.Forms but to the library you want to use, so better ask them directly!

  • caf3caf3 Member ✭✭

    This was only an example, I am open to any free library. I would only like some guidance on how to make something work with this code.

Sign In or Register to comment.