Chart Binding-item Source removing for a specified value

2 posts, 0 answers
  1. Umapathi
    Umapathi avatar
    8 posts
    Member since:
    Oct 2011

    Posted 21 Oct 2011 Link to this post

    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

  2. Nikolay
    Admin
    Nikolay avatar
    395 posts

    Posted 26 Oct 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top