show date value on X axis

[ingsol12]

Hi

I want to display dates on x axis. I am using your http://demos.telerik.com/aspnet-ajax/Chart/Examples/Functionality/NumericalAxis/DefaultCS.aspx example to show it. But for some reason it is not working for me 

below is my code

Dim

sql = "select TotalScore,CreateDate from tblCandidates where FormID=" & SessionManager.FormId & " and UserID=" & SessionManager.UserId & " order by CreateDate desc"

 

 

Dim rdr As DataSet = SqlHelper.ExecuteDataset(ConfigurationSettings.AppSettings("SiteSqlServer"), CommandType.Text, sql)

 

RadChart1.DefaultType = Telerik.WebControls.ChartSeriesType.Bar

 

Dim series11 As Telerik.WebControls.ChartSeries = New Telerik.WebControls.ChartSeries()

 

series11.Type = Telerik.WebControls.ChartSeriesType.Line

 

If rdr.Tables(0).Rows.Count > 0 Then

 

 

 

While i < rdr.Tables(0).Rows.Count

 

 

series11.AddItem(i)

series11.Item(i).XValue =

CType(rdr.Tables(0).Rows(i).Item("CreateDate"), Date).ToOADate()

 

series11.Item(i).YValue = rdr.Tables(0).Rows(i).Item(

"TotalScore")

 

i = i + 1

 

End While

 

 

End If

 

y axis displays value but x axis is not working.
what am I doing wrong ?

Thanks 
Ingsol12



  

[Giuseppe]

Hello ingsol12,

Besides passing XValue to the series items, you need to manually set the XAxis range in order to display the series items correctly (note that in order to customize the axis range you need to set Axis.AutoScale property to false):

ASPX:

<telerik:RadChart ID="RadChart1" runat="server" Width="500" Height="300" AutoLayout="true">
    <Series>
        <telerik:ChartSeries Name="Index" Type="Line">
            <Appearance ShowLabels="False">
            </Appearance>
        </telerik:ChartSeries>
    </Series>
    <PlotArea>
        <YAxis IsZeroBased="false">
        </YAxis>
    </PlotArea>
</telerik:RadChart>

Code-behind:

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        const double dayStep = 1;
        const double hourStep = 1 / 24.0;
        const double minuteStep = hourStep / 60;
        const double fiveMinuteStep = minuteStep * 5;

        double startTime = new DateTime(2008, 1, 1, 8, 0, 0, 0).ToOADate();
        double endTime = new DateTime(2008, 1, 1, 17, 0, 0, 0).ToOADate();

        RadChart1.PlotArea.XAxis.AutoScale = false;
        RadChart1.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortDate;
        RadChart1.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 320;
        RadChart1.PlotArea.XAxis.AddRange(startTime, endTime, hourStep);

        Random r = new Random();
        ChartSeries s = RadChart1.Series[0];

        for (double currentTime = startTime; currentTime < endTime; currentTime += fiveMinuteStep)
        {
            ChartSeriesItem item = new ChartSeriesItem();
            item.XValue = currentTime + (r.NextDouble() - 0.5) * fiveMinuteStep;
            item.YValue = 7065 + (r.NextDouble() - 0.5) * 90;
            s.Items.Add(item);
        }
    }
}

Hope this helps.


Best wishes,
Manuel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.