Changing the labels of x-axis in a scatter line chart

2 posts, 0 answers
  1. squaretec
    squaretec avatar
    1 posts
    Member since:
    Jul 2006

    Posted 12 Dec 2013 Link to this post

    Hi I have defined a programmatically chart as follows:

    ASPX Part:
    <telerik:RadHtmlChart ID="RadHtmlChartSerie" runat="server" Transitions="true" Skin="Office2007" >
                                                              <Appearance>
                                                                  <FillStyle BackgroundColor="White"></FillStyle>
                                                              </Appearance>
                                                              <ChartTitle>
                                                                  <Appearance Align="Center" BackgroundColor="White" Position="Top"></Appearance>
                                                              </ChartTitle>
                                                              <Legend>
                                                                  <Appearance BackgroundColor="White" Position="Bottom"></Appearance>
                                                              </Legend>
     
                                                              <PlotArea>
                                                                  <Appearance>
                                                                      <FillStyle BackgroundColor="White"></FillStyle>
                                                                  </Appearance>
                                                                  <XAxis DataLabelsField="Dia">
                                                                      <LabelsAppearance RotationAngle="90" />
                                                                      <TitleAppearance Text="Fecha" />
                                                                      <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                                                                      <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                                                                      <TitleAppearance Position="Center" RotationAngle="0" Text="Día"></TitleAppearance>
                                                                  </XAxis>
                                                                  <YAxis>
     
                                                                      <LabelsAppearance />
                                                                      <TitleAppearance Text="Valor" />
                                                                      <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                                                                      <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                                                                  </YAxis>
                                                              </PlotArea>
     
     
                                                              <ChartTitle Text="Serie Analizada">
                                                              </ChartTitle>
                                                          </telerik:RadHtmlChart>

    And on The server part,  add  Dynamically a scatter series to the Chart:

    CS:
    //Declare a ScatterSeries
           ScatterSeries pointMinimos = new ScatterSeries();
            pointMinimos.Name = "Mínimo";
            pointMinimos.Appearance.FillStyle.BackgroundColor = Color.Green;
            pointMinimos.LabelsAppearance.Visible = false;
            pointMinimos.TooltipsAppearance.DataFormatString = "{1}";
            pointMinimos.TooltipsAppearance.Color = Color.White;
     
    //Fills The ScatterSeries
            foreach (DataRow dr in dsMaxMin.Tables["dtMinimos"].Rows)
            {           
              
    ScatterSeriesItem itemCierre = new ScatterSeriesItem(Convert.ToDecimal(dr["X"].ToString()), Convert.ToDecimal(dr["Y"].ToString()));           
                 
                pointMinimos.SeriesItems.Add(itemCierre);
     
            }
    //Add The series to the Chart with XAxis numerical values
            RadHtmlChartSerie.PlotArea.Series.Add(pointMinimos);
     
    //Clear the XAxis Items
          RadHtmlChartSerie.PlotArea.XAxis.Items.Clear();  
     
    //Here the column "Dia" have a date string
    foreach (DataRow row in dsMaxMin.Tables["dtMinimos"].Rows)
                                {
     
                                    string formattedLabelText = string.Format("{0:MMMM}", row["Dia"].ToString());
                                    AxisItem newAxisItem = new AxisItem(formattedLabelText);
     
                                    RadHtmlChartSerie.PlotArea.XAxis.Items.Add(newAxisItem);
     
                                }

    But, the labels on the X Axis dosn't changes , and have the numerical label.
     
    I check the link  http://www.telerik.com/help/aspnet-ajax/htmlchart-date-axis.html but only works with databound RadHtmlChart which automatically detects the DateTime object data in the column/field and adjusts the distribution of the items on the XAxis.

    There is a way to change the labels once defined the series in the server code?
    Thanks A lot¡¡¡

    Regards
    Jorge RR
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 16 Dec 2013 Link to this post

    Hi Jorge,

    RadHtmlChart support two types of XAxis:
    • category axis, which uses discrete data (i.e.. categories), so that custom text can be set to the XAxis' categories/items.
    • numeric axis which uses continuous data, so that labels are rendered on equal intervals (i.e. steps) and displays the actual point from the axis. This type of axis doesn't let you use custom text. You can, however, specify  a particular format string for the labels through the DataFormatString property of the axis.

    If you are trying, however, to create and add DateTime scatter series items programmatically I can suggest that you initially convert the X value to its JavaScript DateTime representation and then use the desired DateTime format for the XAxis. Such an example is illustrated in this forum thread.


    Regards,
    Danail Vasilev
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top