Update Chart When Picker Changed

[Abdulvahap]

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; }
  }

[Lance | Manager Technical Support]

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

[Abdulvahap]

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.

[Lance | Manager Technical Support]

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       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