This is a migrated thread and some comments may be shown as answers.

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

1 Answer 116 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Ram
Top achievements
Rank 1
Ram asked on 26 Sep 2011, 05:24 AM

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.



1 Answer, 1 is accepted

Sort by
0
Accepted
Missing User
answered on 28 Sep 2011, 02:54 PM
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
Tags
Chart (Obsolete)
Asked by
Ram
Top achievements
Rank 1
Answers by
Missing User
Share this question
or