Filter Data with a ComboBox

[Alessandro Cirignaco]

Hi,

I have a column chart that displays working hours for various employees of a given week, for 12 weeks. Each week has a start date, and it placed on the x-axis next to the employees name that i use to currently make the chart readible. 

I have added a Combobox that takes in the start date for each of the 12 weeks.

 eg 12/09/2022

      19/09/2022

      26/09/2022 etc

What i want to achieve is when i select a date from this combobox, I see all employee columns appear on the chart with that date that has been chosen. 

Thanks in advance

[Devakumar Dhanapoosanam]

Hi Alessandro Cirignaco,

We will validate and update complete details in two business days on or before September 16, 2022.

Regards,

Devakumar D

[Devakumar Dhanapoosanam]

Hi Alessandro Cirignaco,

We can show the filtered data by updating the series ItemsSource data collection value based on the provided selected data. Also, we can customize the chart axis range to show the particular range by using the Minimum and Maximum properties based on the combobox selected date to show the particular week column data as per in the below code example.

<ComboBox

          ItemsSource="{Binding Items}" Height="30"

          SelectedIndex="0" SelectionChanged="comboBox1_SelectionChanged"

          HorizontalAlignment="Right" VerticalAlignment="Center"

          VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>

<chart:SfChart Grid.Row="1">

    <chart:SfChart.PrimaryAxis>

        <chart:DateTimeAxis x:Name="xAxis" IntervalType="Days" Interval="1" PlotOffset="50"

                            Minimum="{Binding MinDateTime}" Maximum="{Binding MaxDateTime}"

                            ShowGridLines="False" LabelFormat="dd/MM/yyyy"/>

    </chart:SfChart.PrimaryAxis>

    …   

    <chart:ColumnSeries ItemsSource="{Binding Data}"

                      XBindingPath="XValue" YBindingPath="YValue"/>

</chart:SfChart>

private void comboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

    string selectedDate = (string)e.AddedItems[0];

    var date = Convert.ToDateTime(selectedDate);

    viewModel.MinDateTime = date;

    viewModel.MaxDateTime = date.AddDays(6);

}

https://help.syncfusion.com/wpf/charts/axis#datetimeaxis

https://help.syncfusion.com/wpf/charts/databinding

Please find the example sample in the attachment below and let us know if you need any further assistance.

Regards,

Devakumar D

Attachment: SF_177486_e5db68e9.zip