Hello,
We are looking at a functionality where in users should be able to hide/un-hide a series from XamWebChart by clicking on the legend Items.
In LegenItem Click event, we are using the following code to make a series invisible on the chart.
LineChart.Series[i].Visibility = Visibility.Collapse.
The Visibility Property is changing but the Series still exists on the chart.
Please suggest. whats going wrong here.
What you are attempting doesn't work because the series is just a template, and doesn't represent the actual visual controls that get created to render the chart. So, at the moment, setting visibility to collapsed for a series object does not have the effect you are after. Would removing the series from the chart be an option? Or temporarily removing its data points? If you remove the series as the result of a click on the legend, you may need to manually set up the legend so that series' legend item isnt removed when it is clicked also.
If you would like more properties to be meaningfully propagated from the series template to the actual chart visuals that get created (like visibility), you can submit a feature request: http://devcenter.infragistics.com/protected/requestfeature.aspx
In the meantime we should be able to come up with something else that will work for you.
-Graham
Hi Graham,
This works great. Thanks
You could give something like this a try:
<StackPanel> <Button Content="Restore Legend" Click="Button_Click_1" HorizontalAlignment="Left"/> <igChart:XamWebChart x:Name="theChart"> <igChart:XamWebChart.Legend> <igChart:Legend Width="100"> <igChart:Legend.LegendItemStyle> <Style TargetType="igChart:LegendItem"> <Setter Property="Stroke" Value="#00FFFFFF"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igChart:LegendItem"> <Grid x:Name="RootElement"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button Grid.Column="0" Content="X" Click="Button_Click" /> <Rectangle RadiusX="3" RadiusY="3" x:Name="LegendItemIcon" Grid.Column="1" Width="13" Height="13" Fill="{TemplateBinding Fill}" Stroke="{TemplateBinding Stroke}" StrokeThickness="{TemplateBinding StrokeThickness}" /> <TextBlock x:Name="LegendItemText" Margin="5,0,0,0" Width="Auto" Height="Auto" Grid.Column="2" Text="{TemplateBinding Text}" Foreground="{TemplateBinding Foreground}" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </igChart:Legend.LegendItemStyle> </igChart:Legend> </igChart:XamWebChart.Legend> <igChart:XamWebChart.Series> <igChart:Series ChartType="Column" Label="Series 1"> <igChart:Series.DataPoints> <igChart:DataPoint Value="1" /> <igChart:DataPoint Value="2" /> <igChart:DataPoint Value="3" /> </igChart:Series.DataPoints> </igChart:Series> <igChart:Series ChartType="Column" Label="Series 2"> <igChart:Series.DataPoints> <igChart:DataPoint Value="3" /> <igChart:DataPoint Value="2" /> <igChart:DataPoint Value="1" /> </igChart:Series.DataPoints> </igChart:Series> <igChart:Series ChartType="Column" Label="Series 3"> <igChart:Series.DataPoints> <igChart:DataPoint Value="2" /> <igChart:DataPoint Value="2" /> <igChart:DataPoint Value="2" /> </igChart:Series.DataPoints> </igChart:Series> <igChart:Series ChartType="Column" Label="Series 4"> <igChart:Series.DataPoints> <igChart:DataPoint Value="1" /> <igChart:DataPoint Value="1" /> <igChart:DataPoint Value="2" /> </igChart:Series.DataPoints> </igChart:Series> </igChart:XamWebChart.Series> </igChart:XamWebChart> </StackPanel>
With code behind:
public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } private List<RemovedSeries> removed = new List<RemovedSeries>(); private void Button_Click(object sender, RoutedEventArgs e) { LegendItem item = VisualTreeHelper.GetParent( VisualTreeHelper.GetParent(sender as DependencyObject)) as LegendItem; List<UIElement> children = new List<UIElement>(); Canvas items = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(theChart.Legend, 0), 0) as Canvas; for (int i = 0; i < VisualTreeHelper.GetChildrenCount(items); i++) { children.Add(VisualTreeHelper.GetChild(items, i) as UIElement); } //sort the items in the legend so that we can property get the index. children.Sort((i1, i2) => Canvas.GetTop(i1).CompareTo(Canvas.GetTop(i2))); int seriesIndex = children.IndexOf(item); removed.Add( new RemovedSeries() { RemovedIndex = seriesIndex, Series = theChart.Series[seriesIndex] }); theChart.Series.RemoveAt(seriesIndex); } private void Button_Click_1(object sender, RoutedEventArgs e) { removed.Reverse(); foreach (RemovedSeries removedSeries in removed) { theChart.Series.Insert(removedSeries.RemovedIndex, removedSeries.Series); } removed.Clear(); } } public class RemovedSeries { public Series Series { get; set; } public int RemovedIndex { get; set; } }
There are also possibly cleaner options if you populate and maintain the legend items manually. Or alternatively, you can make your own legend control with these fading behaviors and just manipulatethe series in the chart as the items are clicked and restored.This help? Questions?-Graham
I too want to hide/unhide series on click of legend. On clicking the legend, the legend marker should fade and the corresponding series should disappear. On clicking the same legend again the series should appear and the normal legend look should be restored. How to achieve this functionality programatically?
Thanks