Show datetime on xAxis in HH format

[EanX]

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.

[Rosko]

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