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.
Unfortunately, activation email could not send to your email. Please try again.

SfChart on Tab Control only draws on top tab

Thread ID:

Created:

Updated:

Platform:

Replies:

128229 Jan 9,2017 03:11 PM Jan 15,2017 11:38 PM WPF 10
loading
Tags: SfChart
Paul Smeulders
Asked On January 9, 2017 03:11 PM

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 [Syncfusion]
Replied On January 10, 2017 08:18 AM

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
Replied On January 10, 2017 10:03 AM

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
Replied On January 10, 2017 10:07 AM

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

Paul Smeulders
Replied On January 10, 2017 10:42 AM

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
Replied On January 11, 2017 02:34 PM

Still there? Please comment on my example

Devi Aruna Maharasi Murugan [Syncfusion]
Replied On January 12, 2017 06:12 AM

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
Replied On January 12, 2017 06:52 AM

Excellent thank you! I will indeed try that.

Sheik Syed Abthaheer M [Syncfusion]
Replied On January 13, 2017 12:47 AM

Hi Paul,

Thanks for the update.

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

Regards,
M.Sheik 


Paul Smeulders
Replied On January 13, 2017 06:40 AM

Works great!
Many thanks for the correction and tips.


Preethi Nesakkan Gnanadurai [Syncfusion]
Replied On January 15, 2017 11:38 PM

Hi Paul,  
  
Most Welcome. 
  
Regards,  
Preethi 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;