This is a migrated thread and some comments may be shown as answers.

[Solved] How to hide serie in stacked bar chart?

12 Answers 530 Views

Chart for XAML

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Andrea asked on 24 Nov 2012, 01:07 PM

Hi,

in my application I have a stacked bar chart with three series. I would like to show all series or one serie per time and in order to do this I added radio buttons that change the Visibility of each serie.

The problem is that when I set Visibility = Collapsed to one serie, the serie it's not visibile but it takes the amount of space as when it was visible; it seems trasparent and not collapsed and the problem is that each bar of the serie doesn't start from point 0 of axis Y.

The same problem is present when I hide a serie that has labels over each point: the serie is hidden but the labels are still visible.

Which is the best way to hide series in a chart?

I also noticed that entrance animation (from top to bottom) is not applied to point labels but only to series.
Is there also a way to apply an animation when chart is updated, not only when it's shown for the first time?

Thank you very much.

Best regards,
Andrea Domenichini

12 Answers, 1 is accepted

answered on 27 Nov 2012, 12:21 PM

Hello Andrea,

Onto your questions:

Indeed we must admit your observation about the stacked scenario is correct -- currently the automatic axis calculation does not take into account the Visibility of the chart series and consequently in a scenario with stacked bar series when you collapse the bottom series, the rest start "floating" in the plot area. We have logged this issue in our bugtracking system and will forward it to our developers for further review. As a workaround we would suggest you to remove the chart series from the RadCartesianChart.Series collection (instead of setting its Visibility property to Collapsed) when you need to hide a given series.
As for the labels visibility when series is collapsed -- our developers are already aware of this issue and the fix will be included in the official service pack release that is scheduled for next week.
As for the transition animation for series item labels -- currently we are not providing animation for them out-of-the-box but you can customize the control template of the RadCartesianChart and add the transition to the Canvas container that holds the series item labels like this:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

<Grid.Resources>

<Style TargetType="telerik:RadCartesianChart">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadCartesianChart">

<Border Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

x:Name="PART_LayoutRoot">

<Grid>

<Canvas x:Name="PART_RenderSurface" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

<Border x:Name="PART_PlotAreaDecoration" Style="{TemplateBinding PlotAreaStyle}"/>

</Canvas>

<Canvas x:Name="PART_LabelLayer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

<Canvas.Transitions>

<TransitionCollection>

<ContentThemeTransition HorizontalOffset="0" VerticalOffset="-100"/>

</TransitionCollection>

</Canvas.Transitions>

</Canvas>

<Canvas x:Name="PART_AdornerLayer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

<ContentPresenter x:Name="PART_EmptyContentPresenter"

IsHitTestVisible="False"

Content="{TemplateBinding EmptyContent}"

ContentTemplate="{TemplateBinding EmptyContentTemplate}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Visibility="Collapsed" />

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Grid.Resources>

<telerik:RadCartesianChart x:Name="RadChart1" PaletteName="DefaultDark">

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:CategoricalAxis />

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis />

</telerik:RadCartesianChart.VerticalAxis>

<telerik:BarSeries CombineMode="Stack" ShowLabels="True">

<telerik:BarSeries.DataPoints>

<charting:CategoricalDataPoint Category="A" Value="1" />

<charting:CategoricalDataPoint Category="B" Value="2" />

<charting:CategoricalDataPoint Category="C" Value="3" />

<charting:CategoricalDataPoint Category="D" Value="4" />

</telerik:BarSeries.DataPoints>

</telerik:BarSeries>

<telerik:BarSeries CombineMode="Stack" ShowLabels="True">

<telerik:BarSeries.DataPoints>

<charting:CategoricalDataPoint Category="A" Value="5" />

<charting:CategoricalDataPoint Category="B" Value="6" />

<charting:CategoricalDataPoint Category="C" Value="7" />

<charting:CategoricalDataPoint Category="D" Value="8" />

</telerik:BarSeries.DataPoints>

</telerik:BarSeries>

<telerik:BarSeries CombineMode="Stack" ShowLabels="True">

<telerik:BarSeries.DataPoints>

<charting:CategoricalDataPoint Category="A" Value="9" />

<charting:CategoricalDataPoint Category="B" Value="10" />

<charting:CategoricalDataPoint Category="C" Value="11" />

<charting:CategoricalDataPoint Category="D" Value="12" />

</telerik:BarSeries.DataPoints>

</telerik:BarSeries>

</telerik:RadCartesianChart>

</Grid>

As for running the transition when chart is updated and not only on initial load -- unfortunately currently that functionality is not supported but I will forward your inquiry to our devteam so they can have in mind when considering possible enhancements for future versions of the control.

Hope this helps. We have updated your Telerik points for the feedback.

Regards,
Giuseppe
the Telerik team

Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.

answered on 11 Dec 2012, 09:19 AM

App2.zip

Hello Andrea,

About the floating series -- indeed it would be more convenient if that behavior can be controlled via some kind of Visibility property but generally the solution here would not be a simple fix but it is more likely we will need to rework a bit the logic of the control and introduce notion for Hidden/Collapsed/Visible state (i.e. hidden series should be taken into account for axis range calculation, while collapsed series - should not be, etc). Currently we cannot commit a specific timeframe for the availability of this update but we will try to include it for one of the next official releases.

As for the axis labels visibility -- we are unable to reproduce the problem in our local tests. Please review the attached sample application that references the SDK from our latest service pack release and behaves as expected.

Hope this helps.

Regards,
Giuseppe
the Telerik team

Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.

answered on 24 Dec 2012, 03:26 PM

TestTelerikRadChart.zip

Hello Andrea,

Thank you for getting back to us.

In the provided example you are not changing the Visibility of the Axis but this of the Series. I have modified the example in order to fit the scenario. Please, find the attached file.
About the other issues - as Manol mentioned in the previous post we are aware of them but at this point we do not have a specific timeframe for the availability of this update.

I hope this helps. If you have any further questions do not hesitate to contact us again.

Regards,
Ivaylo Gergov
the Telerik team

Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.

answered on 18 Dec 2014, 11:47 AM

I have a same issue. I am showing 4 to 5 RadCartesianCharts on a xaml page. And i have checkbox on for the Legend. So when the checkbox is unchecked I hide the series for all the charts. but the size of the chart doesnt change. I need it to refresh.
As some values are too big and some values too small. So when i remove the checkbox for big value series, i want the chart to kind of refresh itself to show the small as in normal size. as the y axis is starting from 0 to 10,000. so if i remove the values above 100 then the chart should show the y axis from 0 to 100. I hope i am clear enough.

Please help

answered on 23 Dec 2014, 10:03 AM

Hello Abubaker,

Thank you for contacting us! We have track down regression in our latest version that result in the observed behavior. We are already working on fix that will be included in our next official release. Meanwhile, you can try version Q2 2014.2.617 (UI for Windows 8 Xaml).

Thank you for your feedback! As a token of graditute I have updated your telerik points.

Regards,
Tsvyatko
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.