Hiding a line series

[Angshuman]

I am trying to show/hide series in a line chart. I am trying to use the Visibility property of the class LineSeriesDefinition . However it is not working and the concerned series remains visible. Please help.

The code is as follows:

 

SeriesMapping Mapping = new SeriesMapping();

 

Mapping .CollectionIndex = 0;

 

 

 

 

LineSeriesDefinition lineDefinition = new LineSeriesDefinition();

 

lineDefinition.Visibility =

 

SeriesVisibility.Collapsed; // I tried with 'Hidden' as well

 

lineDefinition.ShowItemLabels =

 

false;

 

lineDefinition.ShowPointMarks =

 

false;

 

lineDefinition.Appearance.Stroke =

 

Brushes.LightSalmon;

 

lineDefinition.Appearance.StrokeThickness = 1.0;

Mapping .SeriesDefinition = lineDefinition;

Mapping .ItemMappings.Add(

 

new ItemMapping("X Label", DataPointMember.XValue));

 

 

 

ItemMapping yItemMapping = new ItemMapping("Y Label", DataPointMember.YValue);

 

yItemMapping.SamplingFunction =

 

ChartSamplingFunction.Average;

 

Mapping.ItemMappings.Add(yItemMapping);

 

LineChart.SeriesMappings.Add(Mapping );

[Yavor]

Hi Angshuman,

To see more information along the lines of the requested functionality, please refer to the following example:

http://demos.telerik.com/silverlight/#Chart/SimpleFiltering

I hope this gets you started properly.

Kind regards,
Yavor
the Telerik team

[Angshuman]

The link that you provided filters individual data-points within a particular series. I wish to toggle (show/hide) some specified series when there are multiple series ...

[Sia]

Hello Angshuman,

Actually in the provided example when you check / uncheck a check box, you change the visibility of a data series (line series), not a data point (every point mark in a line series). Here is the specific part of the code you need:

if ((bool)checkbox.IsChecked)
   RadChart1.DefaultView.ChartArea.DataSeries[seriesIndex].Definition.Visibility = SeriesVisibility.Visible;
else
   RadChart1.DefaultView.ChartArea.DataSeries[seriesIndex].Definition.Visibility = SeriesVisibility.Hidden;

 
Please review the attached project and let us know if you need additional help in achieving what you need.

Kind regards,
Sia
the Telerik team

[Angshuman]

Hi,

I could  not use the sample as it doesn't open with VS 2008. Anyhow I tried the code in my workspace and I see that it works for the first time, but if the data to which the ItemsSource is bound changes, the hidden series becomes visible again! Please look into it.

My xaml is as follows:

<Window x:Class="TelerikCharts.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" Loaded="Window_Loaded"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting">

    <Grid>
        <telerik:RadChart Margin="0,0,0,92" Name="radchart" />
        <Button Height="31" Margin="0,0,0,46" Name="Refresh" VerticalAlignment="Bottom" Click="Refresh_Click">Refresh</Button>
        <Button Height="26" Margin="0,0,-2,11" Name="HideSeries" VerticalAlignment="Bottom" Click="HideSeries_Click">Hide Series</Button>
    </Grid>
</Window>

And the c# is as below:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;


using Telerik.Windows.Data;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Charting;

namespace TelerikCharts
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        private ObservableCollection<ObservableCollection<KeyValuePair<double, double>>> _datapoints;
        Random Rnd = new Random();

        public Window1()
        {
            InitializeComponent();
            _datapoints = new ObservableCollection<ObservableCollection<KeyValuePair<double, double>>>();
        }

        private void InitChart()
        {
            radchart.DefaultView.ChartLegend.Visibility = Visibility.Hidden;
            radchart.DefaultView.ChartArea.EnableAnimations = false;
            radchart.DefaultView.ChartArea.AxisX.AutoRange = false;
            radchart.DefaultView.ChartArea.AxisX.AddRange(-100, 100, 50);
            radchart.DefaultView.ChartArea.AxisX.MajorGridLinesVisibility = Visibility.Visible;
            radchart.DefaultView.ChartArea.AxisY.AutoRange = false;
            radchart.DefaultView.ChartArea.AxisY.AddRange(-100, 100, 50);
            radchart.DefaultView.ChartArea.AxisY.MajorGridLinesVisibility = Visibility.Visible;
            SeriesMapping sm = new SeriesMapping();
            sm.CollectionIndex = 0;
            sm.SeriesDefinition = new LineSeriesDefinition();
            sm.SeriesDefinition.ShowItemLabels = false;
            sm.ItemMappings.Add(new ItemMapping("Key", DataPointMember.XValue));
            sm.ItemMappings.Add(new ItemMapping("Value", DataPointMember.YValue));
            radchart.SeriesMappings.Add(sm);


            sm = new SeriesMapping();
            sm.CollectionIndex = 1;
            sm.SeriesDefinition = new LineSeriesDefinition();
            sm.SeriesDefinition.ShowItemLabels = false;
            sm.ItemMappings.Add(new ItemMapping("Key", DataPointMember.XValue));
            sm.ItemMappings.Add(new ItemMapping("Value", DataPointMember.YValue));
            radchart.SeriesMappings.Add(sm);

            sm = new SeriesMapping();
            sm.CollectionIndex = 2;
            sm.SeriesDefinition = new LineSeriesDefinition();
            sm.SeriesDefinition.ShowItemLabels = false;
            sm.ItemMappings.Add(new ItemMapping("Key", DataPointMember.XValue));
            sm.ItemMappings.Add(new ItemMapping("Value", DataPointMember.YValue));
            radchart.SeriesMappings.Add(sm);
            radchart.ItemsSource = _datapoints;


        }

        private void GenerateData()
        {
            ObservableCollection<KeyValuePair<double, double>> s1 = new ObservableCollection<KeyValuePair<double, double>>();
            ObservableCollection<KeyValuePair<double, double>> s2 = new ObservableCollection<KeyValuePair<double, double>>();
            ObservableCollection<KeyValuePair<double, double>> s3 = new ObservableCollection<KeyValuePair<double, double>>();

            s1.Add(new KeyValuePair<double, double>(1, 10.0));
            s1.Add(new KeyValuePair<double, double>(50, 20.9));
            s1.Add(new KeyValuePair<double, double>(80, 80.1));
            s1.Add(new KeyValuePair<double, double>(100, 34.8));

            s2.Add(new KeyValuePair<double, double>(1, 67.0));
            s2.Add(new KeyValuePair<double, double>(50, 2.9));
            s2.Add(new KeyValuePair<double, double>(80, 0.1));
            s2.Add(new KeyValuePair<double, double>(100, 3.8));

            s3.Add(new KeyValuePair<double, double>(1, 60));
            s3.Add(new KeyValuePair<double, double>(50, 2.9));
            s3.Add(new KeyValuePair<double, double>(80, 81));
            s3.Add(new KeyValuePair<double, double>(100, 8));

            _datapoints.Add(s1);
            _datapoints.Add(s2);
            _datapoints.Add(s3);




        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            InitChart();
            GenerateData();




        }

        private void Refresh_Click(object sender, RoutedEventArgs e)
        {
            ObservableCollection<KeyValuePair<double, double>> s1 = new ObservableCollection<KeyValuePair<double, double>>();
            ObservableCollection<KeyValuePair<double, double>> s2 = new ObservableCollection<KeyValuePair<double, double>>();
            ObservableCollection<KeyValuePair<double, double>> s3 = new ObservableCollection<KeyValuePair<double, double>>();

            s1.Add(new KeyValuePair<double, double>(1, Rnd.Next(-100,100)* Rnd.NextDouble()));
            s1.Add(new KeyValuePair<double, double>(50, Rnd.Next(-100, 100) * Rnd.NextDouble()));
            s1.Add(new KeyValuePair<double, double>(80, Rnd.Next(-100, 100) * Rnd.NextDouble()));
            s1.Add(new KeyValuePair<double, double>(100, Rnd.Next(-100, 100) * Rnd.NextDouble()));

            s2.Add(new KeyValuePair<double, double>(1, Rnd.Next(-100, 100) * Rnd.NextDouble()));
            s2.Add(new KeyValuePair<double, double>(50, Rnd.Next(-100, 100) * Rnd.NextDouble()));
            s2.Add(new KeyValuePair<double, double>(80, Rnd.Next(-100, 100) * Rnd.NextDouble()));
            s2.Add(new KeyValuePair<double, double>(100, Rnd.Next(-100, 100) * Rnd.NextDouble()));

            s3.Add(new KeyValuePair<double, double>(1, 60));
            s3.Add(new KeyValuePair<double, double>(50, Rnd.Next(-100, 100) * Rnd.NextDouble()));
            s3.Add(new KeyValuePair<double, double>(80, 81));
            s3.Add(new KeyValuePair<double, double>(100, Rnd.Next(-100, 100) * Rnd.NextDouble()));

            _datapoints[0] = (s1);
            _datapoints[1]=(s2);
            _datapoints[2]= (s3);

        }

        private void HideSeries_Click(object sender, RoutedEventArgs e)
        {
            radchart.DefaultView.ChartArea.DataSeries[2].Definition.Visibility = SeriesVisibility.Hidden;
        }
    }




}

If you run the code, you would see a line chart with three series. You can refresh the data by clicking the refresh button. Clicking the 'Hide Series' button hides a series, but clicking on 'Refresh' brings it back!

Regards,

Angshuman

[Yavor]

Hello Angshuman,

Indeed, the behavior which you mentioned is observed. The reason for this behavior is an enhancement in the binding mechanism of the chart. When the observable collection to which the control is bound is altered, the control is rebound. Due to this, the series toggle their visibility to the original state (visible).
This is an expected behavior. One possible option in this case would be to hide the series again, or come up with a mechanism to bind their visibility to a datafield.
I hope this information helps.

All the best,
Yavor
the Telerik team

[Angshuman]

Well, if you take a closer look at the code - I am NOT
a. Reassigning the collection bound to ItemsSource to something else
b. Resetting the ItemsSource to some different collection
Hence - I find it odd that the series is rebound, and find this behavior to be counter intuitive. I believe it shouldn't happen that way - the control should remember it when it is asked to hide a series once for all. Please give it a thought ...

[Yavor]

Hello Angshuman,

It is not necessary to explicitly to reset the itemssource or rebind the control explicitly to achieve the behavior which we discussed. The reason for it is that the chart control is rebound internally.
We will consider possible ways to alter this behavior, for one of the future versions.

Best wishes,
Yavor
the Telerik team