How to generete charts according to the user selection using Modern UI (Metro) Charts?

Question

I'm using Modern UI (Metro) Charts in my projects. You can find the library here http://modernuicharts.codeplex.com/

I have a combobox in my GUI and it contains types of charts. What I need to do is when user selects a chart type, I want to generate that chart. I can do it manually by just editing the xaml code which generates graph. But how can I do it according to user selection? Need help as soon as possible..

Answer 1

Here you have a working exemple :

MainWindow XAML :

<Window>
    <StackPanel>
        <ComboBox Width="100" ItemsSource="{Binding ChartTypes, Mode=TwoWay}"  SelectedItem="{Binding SimpleStringProperty, Mode=TwoWay}" Text="Select Option"></ComboBox>
        <Frame NavigationUIVisibility="Hidden" x:Name="FrameTest" Source="{Binding SelectedPageChart, Mode=TwoWay}">
        </Frame>            
    </StackPanel>
</Window>

MainWindow ViewModel:

public class MainViewModel : INotifyPropertyChanged
    {
        public ObservableCollection<string> ChartTypes { get; set; }

        public MainViewModel()
        {
            ChartTypes = new ObservableCollection<string>();      
            ChartTypes.Add("Pie");
            ChartTypes.Add("Doughnut");

        }

        private string _simpleStringProperty;
        public string SimpleStringProperty
        {
            get { return _simpleStringProperty; }
            set
            {
                _simpleStringProperty = value;
                if (value.Equals("Pie"))
                {
                    SelectedPageChart = new Uri("PageTest.xaml", UriKind.Relative);
                }
                if (value.Equals("Doughnut"))
                {
                    SelectedPageChart = new Uri("PageTest2.xaml", UriKind.Relative);
                }
                OnPropertyChanged("SimpleStringProperty");

            }
        }

        private Uri _selectedPageChart;   
        public Uri SelectedPageChart
        {
            get { return _selectedPageChart; }
            set
            {
                _selectedPageChart = value;
                OnPropertyChanged("SelectedPageChart");
            }
        }
        protected void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(name));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }

PageTest XAML :

<Page x:Class="WpfApplication1.PageTest"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:metroChart="clr-namespace:De.TorstenMandelkow.MetroChart;assembly=De.TorstenMandelkow.MetroChart" mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
    Title="PageTest">
<Grid>

    <metroChart:PieChart
    Style="{StaticResource MinimalChartStyle}"
    ChartTitle="Minimal Pie Chart"
    SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}" >
        <metroChart:PieChart.Series>
            <metroChart:ChartSeries
            SeriesTitle="Errors"
            DisplayMember="Category"
            ValueMember="Number"
            ItemsSource="{Binding Path=Errors}" />
        </metroChart:PieChart.Series>
    </metroChart:PieChart>

</Grid>

PageTest2 XAML:

  <Page x:Class="WpfApplication1.PageTest2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:metroChart="clr-namespace:De.TorstenMandelkow.MetroChart;assembly=De.TorstenMandelkow.MetroChart"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
    Title="PageTest2">

    <Grid>
        <metroChart:DoughnutChart
        Style="{StaticResource MinimalChartStyle}"
        ChartTitle="Minimal Pie Chart"
        ChartSubTitle="Chart with fixed width and height"
        SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}" >
            <metroChart:PieChart.Series>
                <metroChart:ChartSeries
                SeriesTitle="Errors"
                DisplayMember="Category"
                ValueMember="Number"
                ItemsSource="{Binding Path=Errors}" />
            </metroChart:PieChart.Series>
        </metroChart:DoughnutChart>
    </Grid>
</Page>

Pages have same viewmodel in order to display same chart:

 public class ChartViewModel
        {
                public ObservableCollection<TestClass> Errors { get; private set; }
                public ChartViewModel()
            {
                Errors = new ObservableCollection<TestClass>();
                Errors.Add(new TestClass() { Category = "Globalization", Number= 75 });
                Errors.Add(new TestClass() { Category = "Features", Number = 2 });
                Errors.Add(new TestClass() { Category = "ContentTypes", Number = 12 });
                Errors.Add(new TestClass() { Category = "Correctness", Number = 83 });
                Errors.Add(new TestClass() { Category = "Best Practices", Number = 29 });
            }

            private object selectedItem = null;
            public object SelectedItem
            {
                get
                {
                    return selectedItem;
                }
                set
                {
                    selectedItem = value;
                }
            }
        }

What I've done here is to use a frame to load dinamically pages containing desired charts. Hope it helps!