This is a migrated thread and some comments may be shown as answers.
Update Chart When Picker Changed
3 Answers 59 Views
This is a migrated thread and some comments may be shown as answers.
Abdulvahap
Top achievements
Rank 1
Abdulvahap asked on 05 Jul 2018, 01:30 AM

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

3 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 05 Jul 2018, 04:57 PM
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
0
Abdulvahap
Top achievements
Rank 1
answered on 05 Jul 2018, 05:48 PM

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.

0
Lance | Manager Technical Support
Telerik team
answered on 05 Jul 2018, 07:13 PM
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
Tags
Chart
Asked by
Abdulvahap
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Abdulvahap
Top achievements
Rank 1
Share this question
or