how to generate series at runtime

[Hiren]

i want to generate series [Xaxis and YAxis] at runtime.
want to replace default XAxis label with date string.

and want to change the line color

[Tsvetie]

Hi Giri,
You can find detailed information on creating a chart control programmatically in our online documentation. Please refer to the following links:

• http://www.telerik.com/help/aspnet-ajax/radchart-building-programmatic-create.html
• http://www.telerik.com/help/aspnet-ajax/radchart-building-programmatic-create-complex.html

The code samples in the second link demonstrate how to set the color of the line series as well:

chartSeries.Appearance.LineSeriesAppearance.Color = System.Drawing.Color.BlueViolet;

Regarding the DateTime values that you want to display on the x-axis:

• To add dates to an axis or chart item, values must be converted to OleAutomation types. Use the DateTime.ToOADate() function for this purpose.
• When setting a range for an axis that involves dates, set the axis IsZeroBased property to zero. This avoids having the range calculated from the minimum date value forward, instead of a range you define.
• Use the ValueFormat property to display values as dates. For example:

  RadChart1.PlotArea.YAxis.Appearance.ValueFormat =Telerik.Charting.Styles.ChartValueFormat.ShortDate;

Here are a few online demos as well, that I believe will help you get started:

• http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandchart/gridandaggregatechart/defaultcs.aspx?product=chart
• http://demos.telerik.com/aspnet-ajax/chart/examples/functionality/numericalaxis/defaultcs.aspx
• http://demos.telerik.com/aspnet-ajax/chart/examples/databinding/database/defaultcs.aspx
• http://demos.telerik.com/aspnet-ajax/chart/examples/programming/addval/defaultcs.aspx

In case you need additional help with that, please open a formal support ticket and send me a simple running project, demonstrating your setup together with detailed information on the concrete problem that you have.

Best wishes,
Tsvetie
the Telerik team

[VIJAY]

i tried the example but not the appropriate date which is grid, i know that i need to set the datalable for xAxis but unable to bind that let me know the correct code.

private void GenerateChart(DataTable dtSource)
       {
           rcGeneric.Clear();
           rcGeneric.Chart.ChartTitle.Visible = false;

           rcGeneric.Clear();
           rcGeneric.Chart.ChartTitle.Visible = false;

           ChartSeries series = new ChartSeries();
           series.Type = ChartSeriesType.Line;
           series.Appearance.LineSeriesAppearance.Color = System.Drawing.Color.DarkSeaGreen;
           // visually enhance the datapoints
           series.Appearance.PointMark.Dimensions.AutoSize = false;
           series.Appearance.PointMark.Dimensions.Width = 5;
           series.Appearance.PointMark.Dimensions.Height = 5;
           series.Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
           series.Appearance.PointMark.Visible = true;

           if (dtSource.Columns[1].ColumnName.Equals("Height_Feet"))
           {
               series.Name = "Height in Inches";
               // add new items to the series, passing a value
               for (int i = 0; i < dtSource.Rows.Count; i++)
               {
                   series.AddItem(Convert.ToDouble(dtSource.Rows[i]["HeightInInches"]), Convert.ToString(dtSource.Rows[i]["HeightInInches"]));
               }
               rcGeneric.Series.Add(series);
               rcGeneric.PlotArea.XAxis.LayoutMode = Telerik.Charting.Styles.ChartAxisLayoutMode.Inside;
               rcGeneric.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortDate;
               rcGeneric.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 45;
               rcGeneric.PlotArea.XAxis.Appearance.LabelAppearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Top;
               rcGeneric.PlotArea.YAxis.IsZeroBased = false;
           }
           else
           {
               series.Name = dtSource.Columns[1].ColumnName;
               // add new items to the series, passing a value
               for (int k = 0; k < dtSource.Rows.Count; k++)
               {
                   if (!Convert.IsDBNull(dtSource.Rows[k][1])) { series.AddItem(Convert.ToDouble(dtSource.Rows[k][1])); }
                   else { series.AddItem(0.0); }
               }
               rcGeneric.Series.Add(series);

               if (dtSource.Columns.Count > 2)
               {
                   ChartSeries series2 = new ChartSeries();
                   series2.Name = dtSource.Columns[2].ColumnName;
                   series2.Type = ChartSeriesType.Line;
                   series2.Appearance.LineSeriesAppearance.Color = System.Drawing.Color.CornflowerBlue;

                   // visually enhance the datapoints
                   series2.Appearance.PointMark.Dimensions.AutoSize = false;
                   series2.Appearance.PointMark.Dimensions.Width = 5;
                   series2.Appearance.PointMark.Dimensions.Height = 5;
                   series2.Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
                   series2.Appearance.PointMark.Visible = true;
                   // add new items to the series, passing a value
                   for (int l = 0; l < dtSource.Rows.Count; l++)
                   {
                       if (!Convert.IsDBNull(dtSource.Rows[l][2])) { series2.AddItem(Convert.ToDouble(dtSource.Rows[l][2])); }
                       else { series2.AddItem(0.0); }
                   }
                   rcGeneric.Series.Add(series2);
               }
               //rcGeneric.PlotArea.XAxis.DataLabelsColumn = "VisitDate";
               rcGeneric.PlotArea.XAxis.LayoutMode = Telerik.Charting.Styles.ChartAxisLayoutMode.Inside;
               rcGeneric.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortDate;
               rcGeneric.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 45;
               rcGeneric.Chart.PlotArea.XAxis.DataLabelsColumn = "VisitDate";
               rcGeneric.PlotArea.XAxis.Appearance.LabelAppearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Top;
               rcGeneric.PlotArea.YAxis.IsZeroBased = false;
           }

           if (rcGeneric.PlotArea.XAxis.Items.Count > 1)
           {
               for (int cnt = 0; cnt < rcGeneric.PlotArea.XAxis.Items.Count; cnt++)
               {
                   rcGeneric.PlotArea.XAxis[cnt].TextBlock.Text = dtSource.Rows[cnt]["VisitDate"].ToString();
               }
           }
       }

<telerik:RadChart ID="rcGeneric" runat="Server" Skin="Mac" DefaultType="Line" AutoLayout="true"
                                Width="550px">
                                <Legend Visible="false"></Legend>
                            </telerik:RadChart>

And also if enable zoom <ClientSettings ScrollMode="Both" />
the chart is rendering like the second image check ZOOM ERR.jpg

further i want the data point to be showed on mouse over

[Tsvetie]

Hi Vijay,
Here is what you need to do, in order to correctly configure the x-axis to show a specific datetime range:

var startDate = new DateTime(2011, 1, 1);
RadChart1.PlotArea.XAxis.AutoScale = false;
RadChart1.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortDate;
RadChart1.PlotArea.XAxis.AddRange(startDate.ToOADate(), startDate.AddMonths(1).ToOADate(), 1);
RadChart1.PlotArea.XAxis.LabelStep = 5;

In case the code does not help you, please send me a running test project that demonstrates your setup and detailed information on the expected result.

Regarding the zoom problem - it seems like a CSS problem, but I cannot be sure what is causing it, until I am able to reproduce it locally. That is why, please open a formal support ticket and send me a test project that I can use to find the cause for the problem you report.

Kind regards,
Tsvetie
the Telerik team