SfChart on Tab Control only draws on top tab

[Paul Smeulders]

I have 2 SfCharts exactly the same, bound to different data series. When displayed say, on the same windows in a stackpanel, both data sets show as expected in the respective graphs.

When each chart is placed on a Tab control, one occupying a tab item and the other occupying the other tabitem, only the top most graph is drawn. Selecting the second tab SHOULD reveal the second graph on the tabitem, populated with its data. All I get is a blank graph as if it was given no data. The data are observablecollections of values and dates.

I also tried to use a radio button pair to control visibility of the two graphs, mutually exclusive to the checked button state. I bound visibility of the graphs to the buttons IsChecked states. Always the chart that begins life as "Visible" is populated with data. That is, I can control its visibility fine, but the one that starts as not-visible is always without populated data.

Is there a workaround please?

<TabControl Name="TabControlDayWeek" >

<TabItem Header="weekly">

<Border BorderBrush="#666666"

BorderThickness="2"

CornerRadius="5"

Margin="10">

<Grid Height="185">

<chart:SfChart Name="SfChartWeekly"

Height="175"

HorizontalAlignment="Center"

Margin="10"

VerticalAlignment="Center">

<chart:SfChart.Behaviors>

<chart:ChartZoomPanBehavior ZoomMode="X"></chart:ChartZoomPanBehavior>

</chart:SfChart.Behaviors>

<chart:SfChart.PrimaryAxis>

<chart:DateTimeAxis Header="Date"

LabelFormat="MMM-dd"

FontSize="10"></chart:DateTimeAxis >

</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis Header="Time (hrs)"

OpposedPosition="False"

Minimum="0"

LabelFormat="g"

FontSize="10"></chart:NumericalAxis>

</chart:SfChart.SecondaryAxis>

<chart:LineSeries Label="Duration"

ItemsSource="{Binding ThisPlannerView.WeeklyDurationsToDisplay, RelativeSource={RelativeSource AncestorType={x:Type Window}, Mode=FindAncestor}}"

XBindingPath="myDate"

YBindingPath="duration"

ShowTooltip="True"></chart:LineSeries>

<chart:LineSeries Label="Tss"

ItemsSource="{Binding ThisPlannerView.WeeklyTssToDisplay, RelativeSource={RelativeSource AncestorType={x:Type Window}, Mode=FindAncestor}}"

XBindingPath="myDate"

YBindingPath="Tss"

ShowTooltip="True">

<chart:LineSeries.YAxis>

<chart:NumericalAxis OpposedPosition="True"

Header="Tss"

FontSize="10"></chart:NumericalAxis >

</chart:LineSeries.YAxis>

</chart:LineSeries>

<chart:SfChart.Legend>

<chart:ChartLegend></chart:ChartLegend>

</chart:SfChart.Legend>

</chart:SfChart>

</Grid>

</Border>

</TabItem>

<TabItem Name="TabPanelDaily"

Header="daily">

<Border BorderBrush="#666666"

BorderThickness="2"

CornerRadius="5"

Margin="10">

<Grid Height="185">

<chart:SfChart Name="SfChartDaily"

Height="175"

HorizontalAlignment="Center"

Margin="10"

VerticalAlignment="Center">

<chart:SfChart.Behaviors>

<chart:ChartZoomPanBehavior ZoomMode="X"></chart:ChartZoomPanBehavior>

</chart:SfChart.Behaviors>

<chart:SfChart.PrimaryAxis>

<chart:DateTimeAxis Header="Date"

LabelFormat="MMM-dd"

FontSize="10"></chart:DateTimeAxis >

</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis Header="Time (hrs)"

OpposedPosition="False"

Minimum="0"

LabelFormat="g"

FontSize="10"></chart:NumericalAxis>

</chart:SfChart.SecondaryAxis>

<chart:ColumnSeries Label="Duration"

ItemsSource="{Binding ThisPlannerView.DailyDurationsToDisplay, RelativeSource={RelativeSource AncestorType={x:Type Window}, Mode=FindAncestor}}"

XBindingPath="myDate"

YBindingPath="duration"

ShowTooltip="True"></chart:ColumnSeries>

<chart:ColumnSeries Label="Tss"

ItemsSource="{Binding ThisPlannerView.DailyTssToDisplay, RelativeSource={RelativeSource AncestorType={x:Type Window}, Mode=FindAncestor}}"

XBindingPath="myDate"

YBindingPath="Tss"

ShowTooltip="True">

<chart:ColumnSeries.YAxis>

<chart:NumericalAxis OpposedPosition="True"

Header="Tss"

FontSize="10"></chart:NumericalAxis >

</chart:ColumnSeries.YAxis>

</chart:ColumnSeries>

<chart:SfChart.Legend>

<chart:ChartLegend></chart:ChartLegend>

</chart:SfChart.Legend>

</chart:SfChart>

</Grid>

</Border>

</TabItem>

</TabControl>

[Devi Aruna Maharasi Murugan]

Hi Paul, 

  

Thanks for conatacting Syncfusion Support. 

  

We have analyzed the provided code snippet. The reported problem has occurred, because the ItemsSource is not bound to the chart series. However, we have achieved your requirement by setting the DataContext property of window. We have prepared a demo sample by modifying the provided code snippet for your reference and it can be downloaded from below link, 

  

Sample: Tabcontrol 

  

Regards, 

Devi 

[Paul Smeulders]

Thank you, yes that sample works.

I guess I am not clear on why my binding statements

ItemsSource="{Binding ThisPlannerView.WeeklyDurationsToDisplay, RelativeSource={RelativeSource AncestorType={x:Type Window}, Mode=FindAncestor}}"

work to bind to the input series adequately to display the series when the charts are not placed in tabItems vs. when they are in tabItems. The ThisPlannerView a public property of the Window (ThisplannerView is instance of a class with a property WeeklyDurationsToDisplay as an observable collection) . C

Can it have to do some error in the RelativeSource= specification?

[Paul Smeulders]

I will try to create an example from yours and post it if I can.

[Paul Smeulders]

I have attached (hopefully successfully) a project that shows relative source binding correctly, (er...okay... if you dispute that it is correct, it at least demonstrates that it works) when the SfCharts are not populated on tabcontrol, but breaks when they are, by presenting an explicit side by side comparison.

Maybe you can please comment?

 

Attachment: Tabcontrol499358530ModifiedPAS_5d064297.zip

[Paul Smeulders]

Still there? Please comment on my example

[Devi Aruna Maharasi Murugan]

Hi Paul, 

  

As the chart series is the content of the SfChart, the RelativeSource binding does not occur for chart series properties in the next level of tab items. But the SfChart properties can resolve the relative source binding objects. 

  

To use relative source binding for series in Tab control, you can set binding for chart’s DataContext property as like in below code.  

 

<chart:SfChart Name="SfChartDaily" DataContext="{Binding SomeProperty, RelativeSource={RelativeSource AncestorType={x:Type Window}, Mode=FindAncestor} }"> 

 

   <chart:ColumnSeries ItemsSource="{Binding Collection1}"/> 

   <chart:ColumnSeries ItemsSource="{Binding Collection2}"/>      

     

<chart:SfChart  />                   

 

  

We have modified the provided sample and it can be downloaded from below link, 

  

Sample: Tabcontrol 

  

Regards, 

Devi 

[Paul Smeulders]

Excellent thank you! I will indeed try that.

[Sheik Syed Abthaheer M]

Hi Paul,

Thanks for the update.

Please let us know if you need any further assistence on this.

Regards,
M.Sheik 

[Paul Smeulders]

Works great!

Many thanks for the correction and tips.

[Preethi Nesakkan Gnanadurai]

Hi Paul,  

  

Most Welcome. 

  

Regards,  

Preethi