Show datetime on xAxis in HH format

Thread is closed for posting
2 posts, 0 answers
  1. EanX
    EanX avatar
    4 posts
    Member since:
    May 2013

    Posted 21 Jun 2013 Link to this post

    I want to display a chart that binds to a sqldatasource.
    The select query of sqldatasource returns records where the first column is of type datetime (records of samples acquired every 5 minutes) and the remaning columns are of type  float (select query with a where clause that let me retrive data for a selected day).
    I want to show the records returned by sqldatasource in a chart of type spline with two y axis where on x axis I have datetime in a custom format  showing only hours for the day selected (majortick xaxis set every hour).
    Below is my code:

     
    <telerik:RadChart ID="RadChart2" runat="server" Width="970px" AutoLayout="True" Skin="Vista" Height="500px" DefaultType="Spline" DataSourceID="SqlDataSource1" OnDataBinding="RadChart2_DataBinding" OnDataBound="RadChart2_DataBound">
          <Appearance Corners="Round, Round, Round, Round, 7">
              <FillStyle FillType="ComplexGradient">
                  <FillSettings>
                      <ComplexGradient>
                          <telerik:GradientElement Color="243, 253, 255" />
                          <telerik:GradientElement Color="White" Position="0.5" />
                          <telerik:GradientElement Color="243, 253, 255" Position="1" />
                      </ComplexGradient>
                  </FillSettings>
              </FillStyle>
              <Border Color="212, 221, 222" />
          </Appearance>
          <Series>
              <telerik:ChartSeries Name="Pac"  DefaultLabelValue="#Y{F1}"  Type="Spline"  DataYColumn="PAC" Appearance-ShowLabels="false">
                  <Appearance>
                      <FillStyle MainColor="186, 207, 141" SecondColor="146, 176, 83">
                          <FillSettings GradientMode="Vertical">
                              <ComplexGradient>
                                  <telerik:GradientElement Color="213, 247, 255" />
                                  <telerik:GradientElement Color="193, 239, 252" Position="0.5" />
                                  <telerik:GradientElement Color="157, 217, 238" Position="1" />
                              </ComplexGradient>
                          </FillSettings>
                      </FillStyle>
                      <TextAppearance TextProperties-Color="89, 89, 89">
                      </TextAppearance>
                      <Border Color="" />
                  </Appearance>
              </telerik:ChartSeries>
              <telerik:ChartSeries Name="Pdc" Type="Spline"  DataYColumn="PDC" Appearance-ShowLabels="false">
                  <Appearance>
                      <FillStyle MainColor="235, 140, 104" SecondColor="214, 110, 90">
                          <FillSettings GradientMode="Vertical">
                              <ComplexGradient>
                                  <telerik:GradientElement Color="218, 254, 122" />
                                  <telerik:GradientElement Color="198, 244, 80" Position="0.5" />
                                  <telerik:GradientElement Color="153, 205, 46" Position="1" />
                              </ComplexGradient>
                          </FillSettings>
                      </FillStyle>
                      <TextAppearance TextProperties-Color="89, 89, 89">
                      </TextAppearance>
                      <Border Color="" />
                  </Appearance>
              </telerik:ChartSeries>
     
              <telerik:ChartSeries DataYColumn="D_Mtrk"   Name="D_Mtrk" Type="Spline" YAxisType="Secondary" Appearance-ShowLabels="false">
                  <Appearance>
                      <FillStyle MainColor="129, 192, 225" SecondColor="79, 129, 189">
                          <FillSettings GradientMode="Vertical">
                              <ComplexGradient>
                                  <telerik:GradientElement Color="136, 221, 246" />
                                  <telerik:GradientElement Color="97, 203, 234" Position="0.5" />
                                  <telerik:GradientElement Color="59, 161, 197" Position="1" />
                              </ComplexGradient>
                          </FillSettings>
                      </FillStyle>
                      <TextAppearance TextProperties-Color="89, 89, 89">
                      </TextAppearance>
                      <Border Color="" />
                  </Appearance>
              </telerik:ChartSeries>
     
          </Series>
          <Legend  Appearance-ItemAppearance-Position-AlignedPosition="BottomRight">
              <Appearance Dimensions-Margins="1px, 1%, 10%, 1px">
                   
                  <ItemTextAppearance TextProperties-Color="86, 88, 89">
                  </ItemTextAppearance>
                  <ItemMarkerAppearance Figure="Rectangle">
                  </ItemMarkerAppearance>
                  <FillStyle MainColor="">
                  </FillStyle>
                  <Border Color="" />
              </Appearance>
              <TextBlock>
                  <Appearance  TextProperties-Color="86, 88, 89">
                  </Appearance>
              </TextBlock>
          </Legend>
          <PlotArea>
                <DataTable Visible="true"  >
                     
                  <Appearance    Dimensions-AutoSize="true"  Position-AlignedPosition="BottomRight" RenderType="AutoSize" ></Appearance>
              </DataTable>
              <XAxis >
                  <Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134">
                      <MajorGridLines Color="196, 196, 196" Width="0" />
                      <TextAppearance TextProperties-Color="89, 89, 89">
                      </TextAppearance>
                  </Appearance>
                  <AxisLabel   Appearance-Visible="true">
                      <Appearance Visible="True" Dimensions-Paddings="1px, 1px, 10%, 1px"></Appearance>
     
                      <TextBlock Text="Time">
                          <Appearance TextProperties-Color="51, 51, 51">
                          </Appearance>
                      </TextBlock>
                  </AxisLabel>
              </XAxis>
              <YAxis IsZeroBased="false" >
                  <Appearance Color="134, 134, 134" MajorTick-Color="196, 196, 196" MinorTick-Color="196, 196, 196">
                      <MajorGridLines Color="196, 196, 196" />
                      <MinorGridLines Color="196, 196, 196" Width="0" />
                      <TextAppearance TextProperties-Color="89, 89, 89">
                      </TextAppearance>
                  </Appearance>
                  <AxisLabel Appearance-Visible="true" >
                      <Appearance Visible="True"></Appearance>
     
                      <TextBlock Text="Pac & Pdc [kW]"  >
                          <Appearance TextProperties-Color="220, 158, 119">
                          </Appearance>
                      </TextBlock>
                  </AxisLabel>
              </YAxis>
              <YAxis2>
                    <AxisLabel Appearance-Visible="true" >
                      <Appearance Visible="True"></Appearance>
     
                      <TextBlock Text="D_Mtrk [W/m^2]"  >
                          <Appearance TextProperties-Color="220, 158, 119">
                          </Appearance>
                      </TextBlock>
                  </AxisLabel>
              </YAxis2>
              <Appearance Dimensions-Margins="19%, 90px, 12%, 9%">
                  <FillStyle MainColor="Transparent" SecondColor="Transparent">
                  </FillStyle>
                  <Border Color="WhiteSmoke" />
              </Appearance>
          </PlotArea>
          <ChartTitle>
              <Appearance Dimensions-Margins="3%, 1px, 1px, 6%">
                  <FillStyle MainColor="">
                  </FillStyle>
              </Appearance>
              <TextBlock Text="">
                  <Appearance TextProperties-Color="86, 88, 89" TextProperties-Font="Verdana, 22px">
                  </Appearance>
              </TextBlock>
          </ChartTitle>
      </telerik:RadChart>
    With the code above I obtain a chart as in the attached file, it does not show hour on x axis.

    If I use DataXColumn="date_time" (first column of my sqldatasource query of type datetime) I obtain the following error:
    "The type of column with name  date_time is not numeric" I tried:
    if (!IsPostBack)
                {
     
                    // select a date for which I want to show data
                    DateTime ds = RadDatePickerStart.SelectedDate.Value;
                    
                    RadChart2.PlotArea.XAxis.AutoScale = false;
                    RadChart2.PlotArea.XAxis.IsZeroBased = false;
                    RadChart2.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortTime;
                    RadChart2.PlotArea.XAxis.Appearance.MinorTick.Visible = false;
                       
                    RadChart2.PlotArea.XAxis.Appearance.CustomFormat = "HH";
                    RadChart2.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = -90;
                    RadChart2.PlotArea.XAxis.AddRange(RadDatePickerStart.SelectedDate.Value.ToOADate(), RadDatePickerStart.SelectedDate.Value.AddHours(24).ToOADate(), 0.004);
    }
    but this does not still work. What's wrong? Best regards.
  2. Rosko
    Admin
    Rosko avatar
    137 posts

    Posted 25 Jun 2013 Link to this post

    Hi EanX,

    Your duplicate support ticket has been already answered.

    There is already another forum thread with the same problem described and solved, which can be checked for reference.

    Regards,
    Rosko
    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