Chart Binding-item Source removing for a specified value

[Umapathi]

Hi Everybody.,
 I m facing a Issue.with data binding in telerik rad chart.,
 Here  is my Issue..
   i want to remove the selected data.from my item source which i binded to chart..Actually i have 4 lines in chart area(i.e Maxvalue=4) .if i get a value 0 to any one of of line,i should remove that line with hiding the value.. at the same time.the position of the lines shouldnot change.,here is the Xaml& code,,Can Any one find the solution for this..Any help Would be Appreciated.:-)

<UserControl x:Class="Splendid.Koc.StatusMap.Views.GL.GLBarChartView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:Splendid_Common_Behaviors="clr-namespace:Splendid.Common.Behaviors;assembly=Splendid.Common"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        mc:Ignorable="d"
        DataContext="{Binding GLBarChartViewModel, Source={StaticResource ServiceLocator}}">

    <UserControl.Resources>

        <Style x:Key="GradientStyle" TargetType="telerik:HorizontalBar">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:HorizontalBar">

                        <Rectangle x:Name="PART_DefiningGeometry"
                                Height="{TemplateBinding ItemActualHeight}"
                                Width="{TemplateBinding ItemActualWidth}"
                                Style="{TemplateBinding ItemStyle}">
                        </Rectangle>

                    </ControlTemplate>


                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ChartAxisLineStyle" TargetType="Line">
            <Setter Property="Stroke" Value="Gray" />
        </Style>

        <Style x:Key="MajorTickLineStyle" TargetType="Line">
            <Setter Property="Stroke" Value="Gray" />
        </Style>

        <Style x:Key="MinorTickLineStyle" TargetType="Line">
            <Setter Property="Stroke" Value="Gray" />
        </Style>

        <Style x:Key="CustomLabelStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="Gray" />
        </Style>

        <Style x:Key="ChartAxisGridLineStyle" TargetType="Line">
            <Setter Property="Stroke" Value="Gray" />
        </Style>

        <Style x:Key="ChartCustomLegendItem"
                TargetType="telerik:ChartLegendItem">
            <Setter Property="Padding" Value="5,0,5,0" />
            <Setter Property="Margin" Value="0,3,0,2" />

            <Setter Property="VerticalAlignment" Value="Bottom" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:ChartLegendItem">
                        <Grid x:Name="PART_MainContainer"
                                Background="{TemplateBinding Background}"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Top">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Path x:Name="PART_LegendItemMarker" Width="16"
                                    Height="16"
                                    Margin="{TemplateBinding Margin}"
                                    StrokeThickness="{TemplateBinding MarkerStrokeThickness}"
                                    Style="{TemplateBinding ItemStyle}"
                                    Stretch="Fill">
                                <Path.Data>
                                    <PathGeometry
                                            x:Name="PART_ItemMarkerGeometry" />
                                </Path.Data>
                            </Path>

                            <TextBlock x:Name="PART_TextBlock" Grid.Column="1"
                                    FontSize="20" FontFamily="Calibri"
                                    TextWrapping="Wrap"
                                    Padding="{TemplateBinding Padding}"
                                    Margin="{TemplateBinding Margin}"
                                    Foreground="{TemplateBinding Foreground}"
                                    Text="{TemplateBinding Label}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SeriesItemLabelStyle" TargetType="telerik:SeriesItemLabel">

            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="IsHitTestVisible" Value="False" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Stroke" Value="#FF535353" />
            <Setter Property="FontSize" Value="20" />
            <Setter Property="Background" Value="White" />
            <Setter Property="Fill" Value="Transparent" />

        </Style>

        <Style x:Key="MyBarStyleBars" TargetType="telerik:HorizontalBar">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:HorizontalBar">
                        <Rectangle x:Name="PART_DefiningGeometry"
                                Height="{TemplateBinding ItemActualHeight}"
                                Opacity="100"
                                Width="{TemplateBinding ItemActualWidth}"
                                Style="{TemplateBinding ItemStyle}">
                        </Rectangle>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>


    <Viewbox>
        <Grid x:Name="LayoutRoot" Background="#FF1E212A" Width="500"
                Height="280">


            <Grid.RowDefinitions>
                <RowDefinition Height="30" />
                <RowDefinition Height="*" />

            </Grid.RowDefinitions>


            <TextBlock Style="{StaticResource ChartHeader}" Name="tbTotalWells"
                    TextAlignment="Center" Grid.Row="0" Grid.ColumnSpan="2"
                    HorizontalAlignment="Center" Text="{Binding TotalWells}"
                    FontWeight="Normal" Foreground="#FF989899" FontSize="24"></TextBlock>

            <Grid x:Name="gdChart" Background="#FF1E212A" Grid.Row="1">
                <telerik:RadChart x:Name="radChart" Width="500"
                        BorderBrush="Transparent" BorderThickness="0"
                        Background="#FF1E212A" FlowDirection="LeftToRight"
                        ItemsSource="{Binding Data}" VerticalAlignment="Stretch"
                        HorizontalAlignment="Stretch">
                    <telerik:RadChart.PaletteBrushes>

                        <SolidColorBrush Color="#FFbf2e29" />
                        <!--Red-->

                        <SolidColorBrush Color="#FFc2ae30" />
                        <!--Yellow-->
                        <SolidColorBrush Color="#FF619d3a" />
                        <!--Green-->
                        <SolidColorBrush Color="#FF01a0db" />
                        <!--Blue-->
                    </telerik:RadChart.PaletteBrushes>

                    <telerik:RadChart.SeriesMappings>
                        <telerik:SeriesMapping>
                            <telerik:SeriesMapping.SeriesDefinition>
                                <telerik:HorizontalBarSeriesDefinition
                                        SeriesItemLabelStyle="{StaticResource SeriesItemLabelStyle}"
                                        ItemStyle="{StaticResource GradientStyle}"
                                        LegendDisplayMode="DataPointLabel"
                                        ShowItemLabels="True">

                                </telerik:HorizontalBarSeriesDefinition>
                            </telerik:SeriesMapping.SeriesDefinition>
                            <telerik:ItemMapping DataPointMember="YValue"
                                    FieldName="Value" />

                        </telerik:SeriesMapping>
                    </telerik:RadChart.SeriesMappings>
                    <telerik:RadChart.DefaultView>
                        <telerik:ChartDefaultView ChartLegendPosition="Left">
                            <telerik:ChartDefaultView.ChartTitle>
                                <telerik:ChartTitle Visibility="Collapsed" />
                            </telerik:ChartDefaultView.ChartTitle>
                            <!--custom Legends-->
                            <telerik:ChartDefaultView.ChartLegend>
                                <telerik:ChartLegend x:Name="chartLegend"
                                        Header="" UseAutoGeneratedItems="False"
                                        Background="#FF1E212A" Width="200"
                                        BorderBrush="Transparent">



                                    <telerik:ChartLegend.Items>



                                        <telerik:ChartLegendItem
                                                MarkerFill="#FF01a0db"
                                                Foreground="#FF00A8E6"
                                                FontSize="24"
                                                FontFamily="Calibri"
                                                Style="{StaticResource ChartCustomLegendItem}"
                                                Label="With Opportunity">



                                        </telerik:ChartLegendItem>

                                        <telerik:ChartLegendItem
                                                MarkerFill=" #FF619d3a"
                                                Foreground="#FF619d3a"
                                                FontSize="24"
                                                FontFamily="Calibri"
                                             
                                                Style="{StaticResource ChartCustomLegendItem}"

                                                Label="Running / Optimized" />





                                        <telerik:ChartLegendItem
                                                MarkerFill="#FFc2ae30"
                                                Foreground="#FFCCB730"
                                                Label="Alaram Or Performance Issue"
                                                FontSize="24"
                                                FontFamily="Calibri"
                                                Style="{StaticResource ChartCustomLegendItem}" />




                                        <telerik:ChartLegendItem x:Name="Inactive"
                                                MarkerFill="#FFbf2e29"
                                                Foreground="#FFBE2E29"
                                                Label="In Active" FontSize="24"
                                                FontFamily="Calibri"
                                                Style="{StaticResource ChartCustomLegendItem}"/>
                                    </telerik:ChartLegend.Items>
                                </telerik:ChartLegend>
                            </telerik:ChartDefaultView.ChartLegend>
                            <!--custom Legends-->
                            <telerik:ChartDefaultView.ChartArea>
                                <telerik:ChartArea EnableAnimations="True"
                                        NoDataString="Loading..."
                                        EnableStripLinesAnimation="True"
                                        Foreground="White">
                                    <telerik:ChartArea.AxisX>
                                        <telerik:AxisX AutoRange="False"
                                                MinValue="0"
                                                Visibility="Collapsed"
                                                MaxValue="4" Step="0" IsZeroBased="True" StepLabelLevelCount="4"
                                                LayoutMode="Auto"  
                                                MajorGridLinesVisibility="Collapsed">

                                        </telerik:AxisX>
                                    </telerik:ChartArea.AxisX>
                                    <telerik:ChartArea.AxisY>
                                        <telerik:AxisY AutoRange="True"
                                                Visibility="Collapsed"
                                                MajorGridLinesVisibility="Collapsed"
                                                StripLinesVisibility="Collapsed">

                                            <telerik:AxisY.AxisStyles>
                                                <telerik:AxisStyles
                                                        GridLineStyle="{StaticResource ChartAxisGridLineStyle}"
                                                        AxisLineStyle="{StaticResource ChartAxisLineStyle}"
                                                        TickLineStyle="{StaticResource MajorTickLineStyle}"
                                                        MinorTickLineStyle="{StaticResource MinorTickLineStyle}"
                                                        ItemLabelStyle="{StaticResource CustomLabelStyle}" />
                                            </telerik:AxisY.AxisStyles>
                                        </telerik:AxisY>
                                    </telerik:ChartArea.AxisY>

                                </telerik:ChartArea>
                            </telerik:ChartDefaultView.ChartArea>
                        </telerik:ChartDefaultView>
                    </telerik:RadChart.DefaultView>

                </telerik:RadChart>
            </Grid>

        </Grid>
    </Viewbox>
</UserControl>


Here is my View model.cs code
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.Generic;
using Splendid.Koc.StatusMap.Model;
using Splendid.Common;
using Splendid.Koc.StatusMap.MapItems;
using Splendid.Koc.Model;
using Wintellect.Threading.AsyncProgModel;
using Splendid.Koc.AOServices;
using System.Collections.ObjectModel;
using Splendid.Koc.AOServices.VqtService;
using System.Linq;
using Splendid.Koc.StatusMap.Views.GL;
using System.Windows.Data;
using Telerik.Windows.Controls;

namespace Splendid.Koc.StatusMap.ViewModels.GL
{
    public class GLBarChartViewModel : ViewModelCore
    {
        #region Variables
        string statusTagName = "MyEnterprise.KOC.North Kuwait.Assets.Sabriyah.Equipment.Production Wells.{0}.Misc Parameters.Zenith Status";
        ObservableCollection<string> _fqnList = new ObservableCollection<string>();
        public ObservableViewModelCollection<MapItem, Well> Wells { get; set; }
        private string totalWells;
        private List<BarChartData> data = null;
        private bool _isLoading = true;
        #endregion

        #region Properties
        public string TotalWells
        {
            get { return totalWells; }
            set
            {
                SetPropertyValue(() => TotalWells, value, val => totalWells = val);
            }
        }

        public List<BarChartData> Data
        {
            get { return data; }
            set
            {
                SetPropertyValue(() => Data, value, val => data = val);
            }
        }

        public bool IsLoading
        {
            get { return _isLoading; }
            set
            {
                SetPropertyValue(() => IsLoading, value, val => _isLoading = val);
            }
        }
        #endregion

        #region Constructor
        public GLBarChartViewModel()
        {
            ServiceLocator.Get<GLViewModel>().ChartEvent += new EventHandler(ChartViewModel_ChartEvent);
        }
        #endregion

        #region ChartViewModel_ChartEvent
        void ChartViewModel_ChartEvent(object sender, EventArgs e)
        {
            LoadGLChart();
        }
        #endregion

        #region LoadGLChart
        private void LoadGLChart()
        {
            Wells = ServiceLocator.Get<MainPageViewModel>().Wells;

            int opportunityCount = Wells.Where(item => item.Well.EspWellStatus.Equals(EspData.OpportunityStatus)).Count();
            int activeCount = Wells.Where(item => item.Well.EspWellStatus.Equals(EspData.ActiveStatus)).Count();
            int alarmCount = Wells.Where(item => item.Well.EspWellStatus.Equals(EspData.AlarmStatus)).Count() +
                Wells.Where(item => item.Well.EspWellStatus.Equals(EspData.IssueStatus)).Count() +
                Wells.Where(item => item.Well.EspWellStatus.Equals(EspData.PerformanceStatus)).Count();
            int inactiveCount = Wells.Where(item => item.Well.EspWellStatus.Equals(EspData.InActiveStatus)).Count();
              Data = new List<BarChartData>()
                {
                new BarChartData() {Value=inactiveCount , IsLabelVisible=(inactiveCount >0)},
                new BarChartData() {Value=alarmCount, IsLabelVisible=(alarmCount>0)},  
                new BarChartData() { Value=activeCount, IsLabelVisible=(activeCount>0)},
                new BarChartData() {Value=opportunityCount, IsLabelVisible=(opportunityCount>0)}  
                };    
         
            TotalWells = Convert.ToString(opportunityCount + activeCount + alarmCount + inactiveCount) + " GL Wells in Field";
            IsLoading = false;
            ServiceLocator.Get<GLViewModel>().IsLoading = false;
        }
        #endregion
    }

    #region BarChartData
    public class BarChartData
    {
        public double Value { get; set; }
        public bool IsLabelVisible { get; set; }
    }
    #endregion
}

Thanks
Umapathi.A

[Nikolay]

Hello Umapathi,

Please, refer to this demo example, which toggles on/off the visibility of the data series definition and displays a scenario similar to the one you are trying to achieve. You would simply need to alter the logic so that the visibility of each series is set to Collapsed when it gets a value of 0.

Another possibility would be using the EmptyValues feature, demonstrated in this example.

All the best,
Nikolay
the Telerik team