Use date as x-axis on line chart

[Antony]

I want to set a date as the x-axis, either declaratively or programmatically.

For example: I have a datatable with two colums:

Column 1 - ID="ScoreDate" DataType="DateTime"
Column 2 - ID="Score" DataType="int"

The data in ScoreDate is not incremental, eg, the dates can be 12/08/2010, 15/08/2010, 22/08/2010.

I want to set the x-axis values to be the dates but i am having all sorts of trouble.

Any help would be appreciated.

[Tony Ser]

I had to do something like this:
_RadChart.DefaultView.ChartArea.AxisX.IsDateTime = true; // Dates must be converted with DateTime.ToOADate.

Hope this helps

[Velin]

Hello AnTony,

Please, find attached a small example that should help to properly set up the RadChart control for this scenario.

Best wishes,
Ryan
the Telerik team

[Antony]

Many thanks for your code.

string scoreQuery = "SELECT [ScoreDate], [ScoreValue] FROM [Scores] WHERE ([PlayerCode] = @PlayerCode) AND ([ScoreValue] > 0) ORDER BY [ScoreDate] ASC";
Connections scCon = new Connections(scoreQuery);
scCon.AddParam("PlayerCode", gridItem);
DataTable resTable = new DataTable();
resTable = scCon.ReturnTable();
ChartSeries chSeries = new ChartSeries();
chSeries.Type = ChartSeriesType.Line;
ChartAxisItem xAxis = new ChartAxisItem();
RadChart1.PlotArea.XAxis.IsZeroBased = false;
RadChart1.PlotArea.XAxis.AutoScale = false;
RadChart1.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortDate;

foreach (DataRow dr in resTable.Rows)
{
    chSeries.AddItem(Convert.ToDouble(dr["ScoreValue"]));
    DateTime scDate = new DateTime();
    scDate = Convert.ToDateTime(dr["ScoreDate"]);
    ChartAxisItem item = new ChartAxisItem();
    item.Value = (decimal)scDate.ToOADate();
    RadChart1.PlotArea.XAxis.AddItem(item);
}
RadChart1.PlotArea.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Gradient;
RadChart1.PlotArea.Appearance.FillStyle.MainColor = Color.FromArgb(78, 198, 19);
RadChart1.PlotArea.Appearance.FillStyle.SecondColor = Color.FromArgb(123, 230, 108);
RadChart1.Series.Add(chSeries);

I have managed to get it working. Here is the code i have used.