how to generate series at runtime

Thread is closed for posting
4 posts, 0 answers
  1. Hiren
    Hiren avatar
    62 posts
    Member since:
    Dec 2010

    Posted 22 Sep 2011 Link to this post

    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
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 27 Sep 2011 Link to this post

    Hi Giri,
    You can find detailed information on creating a chart control programmatically in our online documentation. Please refer to the following links:
    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:

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. VIJAY
    VIJAY avatar
    31 posts
    Member since:
    May 2011

    Posted 28 Sep 2011 Link to this post

    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
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 03 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top