Update Chart When Picker Changed

4 posts, 0 answers
  1. Abdulvahap
    Abdulvahap avatar
    3 posts
    Member since:
    Apr 2011

    Posted 04 Jul 2018 Link to this post

    Hi,

    My question actually is simple, I have a chart and I want to change/refresh it when change the picker but I am getting NoData

    Here is my code

    .xaml

      <Picker x:Name="picker" Title="Select a monkey" SelectedIndexChanged="picker_SelectedIndexChanged" SelectedIndex="{Binding Selectedindex, Mode=TwoWay}" VerticalOptions="StartAndExpand" Margin="4">
                    <Picker.ItemsSource>
                        <x:Array Type="{x:Type x:String}">
                            <x:String>Baboon</x:String>
                            <x:String>Capuchin Monkey</x:String>
                            <x:String>Blue Monkey</x:String>
                            <x:String>Squirrel Monkey</x:String>
                            <x:String>Golden Lion Tamarin</x:String>
                            <x:String>Howler Monkey</x:String>
                            <x:String>Japanese Macaque</x:String>
                        </x:Array>
                    </Picker.ItemsSource>
                </Picker>
     
    <telerikChart:RadCartesianChart x:Name="chart" HorizontalOptions="CenterAndExpand">
                        <telerikChart:RadCartesianChart.BindingContext>
                            <local:Models.Chart/>
                        </telerikChart:RadCartesianChart.BindingContext>
                        <telerikChart:RadCartesianChart.HorizontalAxis>
                            <telerikChart:CategoricalAxis />
                        </telerikChart:RadCartesianChart.HorizontalAxis>
                        <telerikChart:RadCartesianChart.VerticalAxis>
                            <telerikChart:NumericalAxis />
                        </telerikChart:RadCartesianChart.VerticalAxis>
                        <telerikChart:RadCartesianChart.Series>
                            <telerikChart:BarSeries CategoryBinding="Category"
                            ValueBinding="Value"
                            ItemsSource="{Binding Data}" />
                        </telerikChart:RadCartesianChart.Series>
                    </telerikChart:RadCartesianChart>

     

     

     

    Chart.cs

    public class Chart
      {
          public Chart()
          {
              this.Data = GetCategoricalData();
          }
     
          public ObservableCollection<CategoricalData> Data { get; set; }
     
          private static ObservableCollection<CategoricalData> GetCategoricalData()
          {
              var data = new ObservableCollection<CategoricalData>  {
              new CategoricalData { Category = "A", Value = 0.63 },
              new CategoricalData { Category = "B", Value = 0.85 },
              new CategoricalData { Category = "C", Value = 1.05 },
              new CategoricalData { Category = "D", Value = 0.96 },
              new CategoricalData { Category = "E", Value = 0.78 },
          };
     
              return data;
          }
      }
     
      public class CategoricalData
      {
          public object Category { get; set; }
     
          public double Value { get; set; }
      }
  2. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1195 posts

    Posted 05 Jul 2018 Link to this post

    Hello Ammoti,

    From the code provided, I do not see how the chart's items source would be changed. Does this happen in picker_SelectedIndexChanged or in the view model with SelectedIndex?

    Ultimately, if you're updating Data, it needs to have PropertyChanged wired up:

    public class Chart : NotifyPropertyChangedBase
      {
          public Chart(
          {
              this.Data = GetCategoricalData();
          }
      
        private ObservableCollection<CategoricalData> data
        public ObservableCollection<CategoricalData> Data
        {
            get => data;
            set
           {
               if(data == value) return;
               data = value;
               OnPropertyChanged(); 
            }
    }
      
          private static ObservableCollection<CategoricalData> GetCategoricalData()
          {
              var data = new ObservableCollection<CategoricalData>  {
              new CategoricalData { Category = "A", Value = 0.63 },
              new CategoricalData { Category = "B", Value = 0.85 },
              new CategoricalData { Category = "C", Value = 1.05 },
              new CategoricalData { Category = "D", Value = 0.96 },
              new CategoricalData { Category = "E", Value = 0.78 },
          };
      
              return data;
          }
      }


    Regards,
    Lance | Tech Support Engineer, Sr.
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Abdulvahap
    Abdulvahap avatar
    3 posts
    Member since:
    Apr 2011

    Posted 05 Jul 2018 in reply to Lance | Manager Technical Support Link to this post

    Lance thank you for reply,

    you are right, I am sorry, yes I will use viewmodel with SelectedIndex.
    I will test your code as soon as possible and I will add my review.

    Thank you again.

  4. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1195 posts

    Posted 05 Jul 2018 Link to this post

    Hello Ammoti,

    Thank you for clarifying. I have built you a demo that shows one way to accomplish what you're looking for. Since you need access to the Picker items int eh view model, I've moved the items source there as well.

    Find the demo attached, I'll paste the code below for your convenience.

    View

           xmlns:telerikChart="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"
           xmlns:portable="clr-namespace:PickerAndChart.Portable;assembly=PickerAndChart.Portable"
           x:Class="PickerAndChart.Portable.MainPage">
     
        <ContentPage.BindingContext>
            <portable:MainViewModel/>
        </ContentPage.BindingContext>
     
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
     
            <Picker x:Name="picker"
                Title="Select a monkey"
                ItemsSource="{Binding PickerItems}"
                SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
                Margin="4"/>
      
            <telerikChart:RadCartesianChart x:Name="chart"
                             Grid.Row="1">
                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:CategoricalAxis LabelFitMode="Rotate"/>
                </telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:NumericalAxis />
                </telerikChart:RadCartesianChart.VerticalAxis>
                <telerikChart:RadCartesianChart.Series>
                    <telerikChart:BarSeries CategoryBinding="Category"
                                 ValueBinding="Value"
                                 ItemsSource="{Binding MonkeyData}" />
                </telerikChart:RadCartesianChart.Series>
            </telerikChart:RadCartesianChart>
        </Grid>
    </ContentPage>

    ViewModel and Model

    public class MainViewModel : NotifyPropertyChangedBase
    {
        private readonly Random rand;
        private ObservableCollection<CategoricalData> data;
        private int selectedIndex;
     
        public MainViewModel()
        {
            rand = new Random();
        }
     
        public int SelectedIndex
        {
            get => selectedIndex;
            set
            {
                if(selectedIndex == value) return;
                selectedIndex = value;
                OnPropertyChanged();
     
                // UPDATE CHART
                MonkeyData = SetMonkeyData(PickerItems[selectedIndex]);
            }
        }
     
        public ObservableCollection<CategoricalData> MonkeyData
        {
            get => data ?? (data = SetMonkeyData(PickerItems[selectedIndex]));
            set
            {
                if(data == value) return;
                data = value;
                OnPropertyChanged();
            }
        }
     
        public List<string> PickerItems { get; set; } = new List<string>
        {
            "Baboon",
            "Capuchin Monkey",
            "Blue Monkey",
            "Squirrel Monkey",
            "Golden Lion Tamarin",
            "Howler Monkey",
            "Japanese Macaque"
        };
     
        private ObservableCollection<CategoricalData> SetMonkeyData(string speciesName)
        {
            return new ObservableCollection<CategoricalData>  {
                new CategoricalData { Category = $"{speciesName} A", Value = rand.NextDouble() },
                new CategoricalData { Category = $"{speciesName} B", Value = rand.NextDouble() },
                new CategoricalData { Category = $"{speciesName} C", Value = rand.NextDouble() },
                new CategoricalData { Category = $"{speciesName} D", Value = rand.NextDouble() },
                new CategoricalData { Category = $"{speciesName} E", Value = rand.NextDouble() },
            };
        }
    }
     
    public class CategoricalData
    {
        public object Category { get; set; }
        public double Value { get; set; }
    }

    Run-time

    Initial Launch




    After Picker Selection



    Regards,
    Lance | Tech Support Engineer, Sr.
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top