Disable/make transparent the color of Line in chart for zero values.

Thread is closed for posting
2 posts, 1 answers
  1. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 26 Sep 2011 Link to this post

    Hi greetings,
    I'm using radcontrols in my application and they are well.
    Currently I'm facing one difficulty with radchart.

    Issue::
    I'm binding the different  list<int> for the serieses.
    If my list contains the zero value there I want to show the line color transparently.
    Here is my code.

    <telerik:RadChart ID="trndChrt" runat="server"  SeriesOrientation="Vertical" ChartTitle-Visible="false"
                       SkinsOverrideStyles="true" CreateImageMap="false" width="770px" Height="278px">
               <Series>
               <telerik:ChartSeries Type="Line" Name="PTT">
                   <Appearance BarWidthPercent="90" LabelAppearance-Visible="false">
                       <FillStyle FillType="Solid" MainColor="#000099">
                       </FillStyle>
                        <PointMark Visible="True" Border-Width="1" Border-Color="Red" Dimensions-AutoSize="false"
                               Dimensions-Height="3px" Dimensions-Width="4px">
                               <FillStyle MainColor="Yellow" FillType="solid">
                               </FillStyle>
                           </PointMark>
                           <EmptyValue Mode="Zero" Line-Color="Transparent">
                           </EmptyValue>
                   </Appearance>
               </telerik:ChartSeries>   
               <telerik:ChartSeries Type="Line" Name="VOX" Appearance-LegendDisplayMode="SeriesName">
                   <Appearance BarWidthPercent="90" LabelAppearance-Visible="false">
                       <FillStyle FillType="Solid" MainColor="Black">
                       </FillStyle>
                       <PointMark Visible="True" Border-Width="1" Border-Color="Red" Dimensions-AutoSize="false"
                               Dimensions-Height="3px" Dimensions-Width="4px">
                               <FillStyle MainColor="Yellow" FillType="solid">
                               </FillStyle>
                           </PointMark>
                   </Appearance>
               </telerik:ChartSeries>
               <telerik:ChartSeries Type="Line" Name="State Change">
                   <Appearance BarWidthPercent="90" LabelAppearance-Visible="false">
                       <FillStyle FillType="Solid" MainColor="#f85007">
                       </FillStyle>
                       <PointMark Visible="True" Border-Width="1" Border-Color="Red" Dimensions-AutoSize="false"
                               Dimensions-Height="3px" Dimensions-Width="4px">
                               <FillStyle MainColor="Yellow" FillType="solid">
                               </FillStyle>
                           </PointMark>
                   </Appearance>
               </telerik:ChartSeries>
               <telerik:ChartSeries Type="Line" Name="Active Dispatchers">
                   <Appearance BarWidthPercent="90" LabelAppearance-Visible="false">
                       <FillStyle FillType="Solid" MainColor="#cc00ff">
                       </FillStyle>
                       <PointMark Visible="True" Border-Width="1" Border-Color="Red" Dimensions-AutoSize="false"
                               Dimensions-Height="3px" Dimensions-Width="4px">
                               <FillStyle MainColor="Yellow" FillType="solid">
                               </FillStyle>
                           </PointMark>
                   </Appearance>
               </telerik:ChartSeries>
               <telerik:ChartSeries Type="Line" Name="Calls">
                   <Appearance BarWidthPercent="90" LabelAppearance-Visible="false">
                       <FillStyle FillType="Solid" MainColor="#339933">
                       </FillStyle>
                       <PointMark Visible="True" Border-Width="1" Border-Color="Red" Dimensions-AutoSize="false"
                               Dimensions-Height="3px" Dimensions-Width="4px">
                               <FillStyle MainColor="Yellow" FillType="solid">
                               </FillStyle>
                           </PointMark>
                   </Appearance>
               </telerik:ChartSeries>
           </Series>
           <PlotArea Appearance-FillStyle-MainColor="White" XAxis-LayoutMode="Normal" EmptySeriesMessage-Appearance-Visible="false" Appearance-Border-Color="Black"  Appearance-FillStyle-FillType="Solid" DataTable-Appearance-CellWidth="200" EmptySeriesMessage-Visible="false" XAxis-Appearance-MajorGridLines-Color="#d2d2d2" XAxis-Appearance-MajorGridLines-PenStyle="Solid" XAxis-Appearance-MajorGridLines-Width="1">
           </PlotArea>
           <Legend Visible="false">
           </Legend>       
          </telerik:RadChart>

    Code behind

    for ( int i = 0; i <= 15; i++)
                   {
                       lastDate = firstDate.AddHours(hours);
                       var pttCnt = (from records in dtTrend.AsEnumerable() where (records.Field<string>("ActivityType") == "PTT") && (records.Field<DateTime>("BeginTime") >= firstDate) && (records.Field<DateTime>("EndTime") <= lastDate) select records).Count();
                       var voxCnt = (from records in dtTrend.AsEnumerable() where (records.Field<string>("ActivityType") == "VOX") && (records.Field<DateTime>("BeginTime") >= firstDate) && (records.Field<DateTime>("EndTime") <= lastDate) select records).Count();
                       var statChngCnt = (from records in dtTrend.AsEnumerable() where (records.Field<string>("ActivityType") == "State Change") && (records.Field<DateTime>("BeginTime") >= firstDate) && (records.Field<DateTime>("EndTime") <= lastDate) select records).Count();
                       var totalCalCnt = (from records in dtTrend.AsEnumerable() where (records.Field<DateTime>("BeginTime") >= firstDate) && (records.Field<DateTime>("EndTime") <= lastDate) select records).Count();
                       var activeDispatchrCnt = (from records in dtDispatchr.AsEnumerable() where (records.Field<DateTime>("LoginTime") >= firstDate) && (records.Field<DateTime>("LoginTime") <= lastDate) select records).Count();
                         
                       pttList.Add(pttCnt);
                       voxLIst.Add(voxCnt);
                       statChngList.Add(statChngCnt);
                       actDisptchrList.Add(activeDispatchrCnt);
                       totalCalList.Add(totalCalCnt);
                       xAxisDateList.Add(lastDate.Date.ToString("d"));
                       firstDate = lastDate;
                   }
                   for (int i = 0; i < pttList.Count; i++)
                   {
                      
                       trndChrt.Series[0].AddItem(Convert.ToDouble(pttList[i]));
                       trndChrt.Series[1].AddItem(Convert.ToDouble(voxLIst[i]));
                       trndChrt.Series[2].AddItem(Convert.ToDouble(statChngList[i]));
                       trndChrt.Series[3].AddItem(Convert.ToDouble(actDisptchrList[i]));
                       trndChrt.Series[4].AddItem(Convert.ToDouble(totalCalList[i]));
                   }

    Suppose my one of the list contains values like 1,5,4,5,5,0,4,5,,2,0,22,0
    Here for the value "0" I want to have the line in diffrent color or transparent.
    and i tried to disable the "empty series message also but i cloud not able.

    Please help me as soon as possible.



  2. Answer
    Missing user
    Missing user avatar

    Posted 28 Sep 2011 Link to this post

    Hello Ram,

    RadChart automatically approximates missing values between known data points, simply by setting the Empty property to True on any chart series item. Thus the empty items will be displayed by default as a dotted line. For example:
    protected void Page_Init(object sender, EventArgs e)
    {
        radChart.ItemDataBound += new EventHandler<Telerik.Charting.ChartItemDataBoundEventArgs>(radChart_ItemDataBound);
    }
     
    void radChart_ItemDataBound(object sender, Telerik.Charting.ChartItemDataBoundEventArgs e)
    {
        if (e.SeriesItem.YValue == 0)
            e.SeriesItem.Empty = true;
    }

    You can hide the EmptyValue.Line like that:
    radChart.Series[0].Appearance.EmptyValue.Line.Visible = false;

    For additional information on Empty Values, please refer to the following online resources:
    http://www.telerik.com/help/aspnet-ajax/radchart-empty-values.html
    http://demos.telerik.com/aspnet-ajax/chart/examples/newfeatures/emptyvalues/defaultcs.aspx
    http://www.telerik.com/help/aspnet-ajax/radchart-series-items.html

    I hope this helps.

    All the best,
    Polina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top