This is a migrated thread and some comments may be shown as answers.

[Solved] Show datetime on xAxis in HH format

1 Answer 81 Views

Chart (Obsolete)

This is a migrated thread and some comments may be shown as answers.

EanX asked on 21 Jun 2013, 07:21 AM

ChartImage.png

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.

[Solved] Show datetime on xAxis in HH format

1 Answer, 1 is accepted