Vertical line in the chart

Thread is closed for posting
6 posts, 0 answers
  1. Saroop G
    Saroop G avatar
    3 posts
    Member since:
    May 2010

    Posted 06 Jun 2011 Link to this post

    I require a graph as shown in the attached file.
    For the graph i have used stacked bar chart with orientation set to "horizontal"
    Can any one please help me set the "target line " in the graph.
    It looks marked zone and line chart requires at least two points to display it.
    Pls help
    my current code is attached
    ChartSeries chartSeries1 = new ChartSeries();
              chartSeries1.Type = ChartSeriesType.Line;
              chartSeries1.Name = "TARGET";
              //chartSeries1.DefaultLabelValue = "TARGET";
              chartSeries1.Appearance.ShowLabels = false;
              //chartSeries1.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.Nothing;
              chartSeries1.Appearance.LabelAppearance.FillStyle.MainColor = Color.Red;
              chartSeries1.Appearance.LabelAppearance.FillStyle.SecondColor = Color.Red;
              chartSeries1.ActiveRegionToolTip = "Target";//+ objArea.type.ToString();
              chartSeries1.Appearance.LineSeriesAppearance.Color = Color.Red;
              chartSeries1.Appearance.LineSeriesAppearance.Width = 1;
              chartSeries1.Appearance.FillStyle.SecondColor = Color.Red;
              chartSeries1.Appearance.FillStyle.MainColor = Color.Red;
              chartSeries1.Appearance.Border.Visible = false;
              ChartMarkedZone objZone = new ChartMarkedZone();
              objZone.Label.TextBlock.Text = "Target";
              objZone.Label.Appearance.Position.AlignedPosition = AlignedPositions.Right;
              objZone.ValueStartX = -5;
              objZone.ValueEndX = 10;
              objZone.ValueStartY = 0;
              objZone.ValueEndY = 2200;
                  objZone.Appearance.FillStyle.MainColor = Color.Red;
              objZone.Label.Appearance.Visible = true;
              objZone.Label.TextBlock.Visible = true;
             // chartSeries1.PlotArea.MarkedZones.Add(objZone);
              int i = 0;
              double max = 0;
              foreach (KeyValuePair<int, double> pair in output.PensionAmount)
                  ChartSeries chartSeries = new ChartSeries();
                  chartSeries.Type = ChartSeriesType.StackedBar;
                  chartSeries.Appearance.LabelAppearance.Visible = false;
                  chartSeries.Appearance.LineSeriesAppearance.Color = barColors[i];
                  chartSeries.Appearance.FillStyle.SecondColor = barColors[i];
                  chartSeries.Appearance.FillStyle.MainColor = barColors[i];
                  chartSeries.Appearance.Border.Width = 0;
                  chartSeries.Appearance.BarWidthPercent = 40;
                      max =max+ pair.Value;
              rad.SeriesOrientation = ChartSeriesOrientation.Horizontal;
              rad.PlotArea.YAxis.Appearance.MinorGridLines.Visible = false;
              rad.PlotArea.YAxis.Appearance.MajorGridLines.Color = Color.White;
              rad.PlotArea.YAxis.Appearance.MajorGridLines.PenStyle = DashStyle.Solid;
              rad.PlotArea.YAxis.Appearance.MajorGridLines.EndCap = LineCap.NoAnchor;
              rad.PlotArea.YAxis.Appearance.MajorGridLines.Visible = true;
              rad.PlotArea.YAxis.Appearance.Color = Color.Transparent;
              rad.PlotArea.XAxis.Appearance.Color = Color.Transparent;
              rad.Height = 180;
              rad.Width = 480;
              rad.PlotArea.Appearance.Dimensions.Margins.Bottom = new Telerik.Charting.Styles.Unit(70, Telerik.Charting.Styles.UnitType.Pixel);
              rad.PlotArea.Appearance.Dimensions.Margins.Right = new Telerik.Charting.Styles.Unit(40, Telerik.Charting.Styles.UnitType.Pixel);
              rad.PlotArea.YAxis.AutoScale = false;
              rad.PlotArea.YAxis.AddRange(0, max, 2000);
  2. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 06 Jun 2011 Link to this post

    Hi Saroop,

    I'm afraid I don't understand why you can't use a Marked Zone to make your target area. From your attached picture, you target area has easily defined StartX, EndX, StartY, and EndY points. This is exactly what Marked Zone requires.

  3. Saroop G
    Saroop G avatar
    3 posts
    Member since:
    May 2010

    Posted 07 Jun 2011 Link to this post

    I have already used marked are in the chart.
    But it is not appearing.
    I dont know what is wrong with it
  4. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 08 Jun 2011 Link to this post

    Hi Saroop,

    I'm not sure why your program isn't working since the code looks good to me. I wasn't able to get it to run due to not having a complete solution with all associated resources. At this point there are two things I can recommend. You could sent your whole solution to Telerik support in a ZIP and they'll be able to tell you why it's not working quickly.

    Otherwise, I worked up a very simple example of a StackedBar chart with Marked Zone where the whole chart is built programmatically in the code-behind file. You could use this as a base for your project and expand it as needed.

    I hope this helps,

    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
    using Telerik.Charting;
    using System.Drawing;
    public partial class Default : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)
            //Create the RadChart
            RadChart radChart = new RadChart();
            radChart.ChartTitle.TextBlock.Text = "My Super Awesome RadChart";
            //Create Series 1
            ChartSeries chartSeries1 = new ChartSeries();
            chartSeries1.Name = "Sales";
            chartSeries1.Type = ChartSeriesType.StackedBar;
            //Create Series 2
            ChartSeries chartSeries2 = new ChartSeries();
            chartSeries2.Name = "Sales";
            chartSeries2.Type = ChartSeriesType.StackedBar;
            //Add Series 1 and 2 to the RadChart
            //Create Marked Zone
            ChartMarkedZone markedTest = new ChartMarkedZone("TargetZone");
            markedTest.ValueStartX = 1;
            markedTest.ValueEndX = 1.5;
            markedTest.ValueStartY = 4;
            markedTest.ValueEndY = 5;
            markedTest.Appearance.FillStyle.MainColor = Color.Red;
            markedTest.Label.TextBlock.Text = "Target Zone";
            //Add Marked Zone to RadChart
            //Add control to page
  5. Evgenia
    Evgenia avatar
    1437 posts

    Posted 09 Jun 2011 Link to this post

    Hello Saroop,

    Have you tried the Lord Gimmik's code snippet as it is a good guideline?
    You may also review our demo with source code that demonstrates how to add MarkedZone to your Chart.
    If you still have problem with this - please open a new formal Support thread and send us the sample stripped down project where you are trying to add your MarkedZone. This way we will be able to support you better.

    Best wishes,
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Mario
    Mario avatar
    2 posts
    Member since:
    Sep 2010

    Posted 03 Sep 2011 Link to this post

    I was able to add a vertical line in my chart by using the marked zone feature, setting the start and end x value to the same value, then adding a border using a dashed line pen style.  The following is an example of the code.  

    ChartMarkedZone mz = new ChartMarkedZone();       
    mz.Appearance.FillStyle.MainColor = System.Drawing.Color.Silver;
    mz.Appearance.Border.Width = 2f;
    mz.Appearance.Border.Color = System.Drawing.Color.Silver;
    mz.Appearance.Border.PenStyle = System.Drawing.Drawing2D.DashStyle.Dash;
    mz.ValueStartX = 7;  //This is an arbitrary value on my X-axis--set it to your own value.                                                             
    mz.ValueEndX = 7;    //Also arbitrary...BUT must be the same as the start value.  

    Hope this helps.  Maybe Telerik can include such a feature in the future--marked zones are pretty cool, but sometimes you just want a simple dashed line.
Back to Top