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

Vertical line in the chart

5 Answers 182 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Saroop G
Top achievements
Rank 1
Saroop G asked on 06 Jun 2011, 05:03 PM
Hi 
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;
          chartSeries1.AddItem(Convert.ToDouble(Target));
          chartSeries1.AddItem(Convert.ToDouble(Target));
          chartSeries1.AddItem(Convert.ToDouble(Target));
          chartSeries1.AddItem(Convert.ToDouble(Target));
         
          rad.Series.Add(chartSeries1);
          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;
 
 
          rad.PlotArea.MarkedZones.Add(objZone);
         // 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;
              chartSeries.AddItem(pair.Value);
              rad.Series.Add(chartSeries);
              i++;
              
                  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);

5 Answers, 1 is accepted

Sort by
0
Gimmik
Top achievements
Rank 1
answered on 06 Jun 2011, 09:25 PM
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.

-Gimmik
0
Saroop G
Top achievements
Rank 1
answered on 07 Jun 2011, 07:54 AM
I have already used marked are in the chart.
But it is not appearing.
I dont know what is wrong with it
0
Gimmik
Top achievements
Rank 1
answered on 08 Jun 2011, 05:52 PM
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,
-Gimmik

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;
         
 
        chartSeries1.AddItem(1);
        chartSeries1.AddItem(2);
 
        //Create Series 2
        ChartSeries chartSeries2 = new ChartSeries();
        chartSeries2.Name = "Sales";
        chartSeries2.Type = ChartSeriesType.StackedBar;
 
 
        chartSeries2.AddItem(3);
        chartSeries2.AddItem(4);
 
        //Add Series 1 and 2 to the RadChart
        radChart.Series.Add(chartSeries1);
        radChart.Series.Add(chartSeries2);
 
        //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
        radChart.PlotArea.MarkedZones.Add(markedTest);
 
        //Add control to page
        this.Page.Controls.Add(radChart);
 
    }
}
0
Evgenia
Telerik team
answered on 09 Jun 2011, 09:36 AM
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,
Evgenia
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.

0
Mario
Top achievements
Rank 1
answered on 04 Sep 2011, 12:04 AM
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.  
myChart.PlotArea.MarkedZones.Add(mz);



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.
Tags
Chart (Obsolete)
Asked by
Saroop G
Top achievements
Rank 1
Answers by
Gimmik
Top achievements
Rank 1
Saroop G
Top achievements
Rank 1
Evgenia
Telerik team
Mario
Top achievements
Rank 1
Share this question
or