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

AxisItem and Series Item

1 Answer 203 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
John asked on 24 Jul 2008, 02:44 PM

i want to know how i can attach a Axis Item to a series item. This is my sample code. If you execute this u'll see that ... the axis items get added up in the x-axis.. but the series item is not rendered according to the x-axis value.

I am creating the radchart dynamically

My Code:

 protected void Page_Load(object sender, EventArgs e)
                       IDictionary<DateTime, int> cmcValues = new Dictionary<DateTime, int>();
                cmcValues.Add(DateTime.Today.Date, 115);
                cmcValues.Add(DateTime.Today.AddDays(1).Date, 123);
                cmcValues.Add(DateTime.Today.AddDays(5).Date, 136);
                cmcValues.Add(DateTime.Today.AddDays(23).Date, 143);
                cmcValues.Add(DateTime.Today.AddDays(41).Date, 134);

                IDictionary<DateTime, int> newcmcValues = new Dictionary<DateTime, int>();
                newcmcValues.Add(DateTime.Today.Date, 75);
                newcmcValues.Add(DateTime.Today.AddYears(3).Date, 22);
                newcmcValues.Add(DateTime.Today.AddYears(5).Date, 26);
                newcmcValues.Add(DateTime.Today.AddYears(8).Date, 43);

                BuildChart(newcmcValues,cmcValues, "Survey1", "Line");

private void BuildChart(IDictionary<DateTime, int> CValues, IDictionary<DateTime, int> CVals, string chartName, string chartType)
            RadChart rChart = new RadChart();
            double stepDate = CValues.ElementAt(1).Key.ToOADate();
            rChart.ChartTitle.TextBlock.Text = "";

            ChartSeries cSeries = new ChartSeries();
            ChartSeries cSeries1 = new ChartSeries();
            cSeries.Name = chartName;
            cSeries1.Name = "Survey2";
            ChartSeriesType csType = new ChartSeriesType();

            foreach (string item in Enum.GetNames(csType.GetType()))
                if (item == chartType)
                    cSeries.Type = (ChartSeriesType) Enum.Parse(csType.GetType(), chartType);
                    cSeries1.Type = (ChartSeriesType)Enum.Parse(csType.GetType(), chartType);
            ChartSeriesItem csItem;
            ChartAxisItem cAxisItem;
            ChartSeriesItem csItem1;
            ChartAxisItem cAxisItem1;

            foreach (KeyValuePair<DateTime, int> kvp in CValues)
                csItem = new ChartSeriesItem();
                csItem.YValue = kvp.Value;
                cAxisItem = new ChartAxisItem();
                cAxisItem.TextBlock.Text = kvp.Key.ToShortDateString();


            foreach (KeyValuePair<DateTime, int> kvp in CVals)
                csItem1 = new ChartSeriesItem();
                csItem1.YValue = kvp.Value;

                cAxisItem1 = new ChartAxisItem();
                cAxisItem1.TextBlock.Text = kvp.Key.ToShortDateString();


            //double firstDate = CValues.First().Key.AddDays(-1).ToOADate();
            //double lastDate = CValues.Last().Key.AddDays(1).ToOADate();

            rChart.PlotArea.XAxis.Appearance.MajorGridLines.Visible = false;
            //rChart.PlotArea.Appearance.Dimensions.Margins = "18%, 24%, 22%, 10%";
            rChart.PlotArea.Appearance.Dimensions.Margins.Bottom.Value = 25;
            rChart.PlotArea.XAxis.AutoScale = false;
            rChart.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 45;
            rChart.PlotArea.XAxis.Appearance.LabelAppearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Top;
            rChart.PlotArea.XAxis.LayoutMode = Telerik.Charting.Styles.ChartAxisLayoutMode.Inside;

            rChart.PlotArea.Appearance.Corners.BottomLeft = Telerik.Charting.Styles.CornerType.Round;
            rChart.PlotArea.Appearance.Corners.BottomRight = Telerik.Charting.Styles.CornerType.Round;
            rChart.PlotArea.Appearance.Corners.TopLeft = Telerik.Charting.Styles.CornerType.Round;
            rChart.PlotArea.Appearance.Corners.TopRight = Telerik.Charting.Styles.CornerType.Round;




1 Answer, 1 is accepted

Sort by
Telerik team
answered on 25 Jul 2008, 03:00 PM
Hello John,

Indeed, the chart series items will not match the X axis items in this case. The reason is that there is a direct relation between the chart series items and the X axis items -- the first item in each series will appear at the first position i.e. it will correspond to the first X axis item, the next series item will appear at second position, corresponding to the second axis item etc...

So, you can use AddRange to add items to X axis and assign their Value property:

rChart.PlotArea.XAxis.AddRange(startDate, endDate, step); 
rChart.PlotArea.XAxis.Appearance.ValueFormat = ChartValueFormat.ShortDate; 

the second line is used to format the labels in short date string. You will also need to populate the XValue property for each ChartSeriesItem:

foreach (KeyValuePair<DateTime, int> kvp in CVals) 
            csItem1 = new ChartSeriesItem(); 
            csItem1.YValue = kvp.Value; 
            csItem1.XValue = kvp.Key.ToOADate(); 

Note, that you do not need to add items to X axis, as they are already added. I have attached a web page, based on your code, with these updates.

You will notice, that the second series' items appear stacked -- this is due to the relatively small difference between their XValue properties compared to the range of X axis. That is -- several days vs 8 years. Unfortunately, RadChart does not support non-linear X axis.

the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Chart (Obsolete)
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question