AxisItem and Series Item

[John]

Hi,

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);
                    break;
                }
            }                       
                       
            ChartSeriesItem csItem;
            ChartAxisItem cAxisItem;
            rChart.PlotArea.XAxis.Clear();
            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();
                rChart.PlotArea.XAxis.Items.Add(cAxisItem);

                cSeries.AddItem(csItem);               
            }

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

                cAxisItem1 = new ChartAxisItem();
                cAxisItem1.TextBlock.Text = kvp.Key.ToShortDateString();
                rChart.PlotArea.XAxis.Items.Add(cAxisItem1);

                cSeries1.AddItem(csItem1);
            }
           

            //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;
           
            rChart.AddChartSeries(cSeries);
            rChart.AddChartSeries(cSeries1);

           

            divRadCharts.Controls.Add(rChart);

        }

[Ves]

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();

            cSeries1.AddItem(csItem1);
        }

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.

Regards,
Ves
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.