We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SfChart on Tab Control only draws on top tab

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>


10 Replies

DA Devi Aruna Maharasi Murugan Syncfusion Team January 10, 2017 01:18 PM UTC

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 






PS Paul Smeulders January 10, 2017 03:03 PM UTC

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?


PS Paul Smeulders January 10, 2017 03:07 PM UTC

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


PS Paul Smeulders January 10, 2017 03:42 PM UTC

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


PS Paul Smeulders January 11, 2017 07:34 PM UTC

Still there? Please comment on my example


DA Devi Aruna Maharasi Murugan Syncfusion Team January 12, 2017 11:12 AM UTC

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 






PS Paul Smeulders January 12, 2017 11:52 AM UTC

Excellent thank you! I will indeed try that.


SS Sheik Syed Abthaheer M Syncfusion Team January 13, 2017 05:47 AM UTC

Hi Paul,

Thanks for the update.

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

Regards,
M.Sheik 



PS Paul Smeulders January 13, 2017 11:40 AM UTC

Works great!
Many thanks for the correction and tips.



PN Preethi Nesakkan Gnanadurai Syncfusion Team January 16, 2017 04:38 AM UTC

Hi Paul,  
  
Most Welcome. 
  
Regards,  
Preethi 


Loader.
Live Chat Icon For mobile
Up arrow icon