<telerik:ChartSeries DataXColumn="Date" DataYColumn="pct" Name="pct" Type="Line">
my data looks like
pct reportDate
54 2012-09-01 00:00:00.000
65 2012-10-01 00:00:00.000
57 2012-11-01 00:00:00.000
when I put DataXColumn="reportDate"
I get an error saying column is not in numeric
when I put "Date" it shows chart but has 1900 dates.
do I just need to have the reportDate formatted in a specific format for it to know to use them as type dates?
do I have to have code behind that sets the dates in the databind?
my data looks like
pct reportDate
54 2012-09-01 00:00:00.000
65 2012-10-01 00:00:00.000
57 2012-11-01 00:00:00.000
when I put DataXColumn="reportDate"
I get an error saying column is not in numeric
when I put "Date" it shows chart but has 1900 dates.
do I just need to have the reportDate formatted in a specific format for it to know to use them as type dates?
do I have to have code behind that sets the dates in the databind?
4 Answers, 1 is accepted
0
Hi,
You are getting this exception because the XValues should be numeric (int, long, double, ...). The ASP.NET RadChart can visualize DateTime information, but you have to first convert it to the OADate format.
This is shown in the following sample:
Here is a screenshot showing the result:
http://screencast.com/t/zWoPyDTicsH
In addition I suggest you upgrade to the latest version of Telerik.Web.UI and use the RadHtmlChart control. Review the following blog post for detailed comparison:
http://blogs.telerik.com/aspnet-ajax/posts/12-07-06/radhtmlchart-vs-radchart-which-asp-net-ajax-control-to-use-for-my-project.aspx
http://blogs.telerik.com/aspnet-ajax/posts/13-08-01/radhtmlchart-vs-radchart-round2-choose-asp-net-chart
You can see a relevant example showing RadHtmlChart and how you can data bind it to DateTime objects at the following help article and demo:
http://www.telerik.com/help/aspnet-ajax/htmlchart-date-axis.html
http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/dateaxis/defaultcs.aspx
I hope you will find this information helpful.
Best Regards,
Misho
Telerik
You are getting this exception because the XValues should be numeric (int, long, double, ...). The ASP.NET RadChart can visualize DateTime information, but you have to first convert it to the OADate format.
This is shown in the following sample:
<telerik:RadChart ID="RadChart1" runat="Server"> </telerik:RadChart> <asp:GridView runat="server" ID="GridView"></asp:GridView> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { RadChart1.AutoLayout = true; ChartSeries series = new ChartSeries(); series.Type = ChartSeriesType.Line; series.DataYColumn = "Value"; series.DataXColumn = "OADate"; RadChart1.Series.Add(series); RadChart1.PlotArea.XAxis.Appearance.ValueFormat = ChartValueFormat.ShortDate; RadChart1.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 320; RadChart1.PlotArea.XAxis.IsZeroBased = false; RadChart1.DataSource = GetData(); RadChart1.DataBind(); GridView.DataSource = GetData(); GridView.DataBind(); } protected DataTable GetData() { DataTable dt = new DataTable(); dt.Columns.Add("Value", typeof(int)); //dt.Columns.Add("Date", typeof(double)); dt.Columns.Add("DateTime", typeof(DateTime)); dt.Rows.Add(2, new DateTime(2011, 06, 12)); dt.Rows.Add(5, new DateTime(2011, 12, 12)); dt.Rows.Add(6, new DateTime(2012, 06, 17)); dt.Rows.Add(4, new DateTime(2012, 09, 18)); dt.Rows.Add(7, new DateTime(2013, 03, 18)); dt.Columns.Add("OADate", typeof(double)); foreach (DataRow dr in dt.Rows) { DateTime date = DateTime.Parse(dr["DateTime"].ToString()); double newData = date.ToOADate(); dr["OADate"] = newData; } return dt; } </script>Here is a screenshot showing the result:
http://screencast.com/t/zWoPyDTicsH
In addition I suggest you upgrade to the latest version of Telerik.Web.UI and use the RadHtmlChart control. Review the following blog post for detailed comparison:
http://blogs.telerik.com/aspnet-ajax/posts/12-07-06/radhtmlchart-vs-radchart-which-asp-net-ajax-control-to-use-for-my-project.aspx
http://blogs.telerik.com/aspnet-ajax/posts/13-08-01/radhtmlchart-vs-radchart-round2-choose-asp-net-chart
You can see a relevant example showing RadHtmlChart and how you can data bind it to DateTime objects at the following help article and demo:
http://www.telerik.com/help/aspnet-ajax/htmlchart-date-axis.html
http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/dateaxis/defaultcs.aspx
I hope you will find this information helpful.
Best Regards,
Misho
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Doug
Top achievements
Rank 1
Rank 1
answered on 12 Jan 2015, 06:17 PM
i am now using the RadHtmlChart
my data is actually the other way - the column names = dates
each row is a series (line) with the number being an integer (0-100 percent)
the image is just the datatable (dtRad) put into a gridview
Rad1.DataSource = dtRad
Rad1.DataBind()
Rad1.PlotArea.YAxis.MinValue = 0
Rad1.PlotArea.YAxis.MaxValue = 100
I get nothing in my chart - I want to tell it to use the columnNames as the Xaxis and the values of each row as a series line.
my data is actually the other way - the column names = dates
each row is a series (line) with the number being an integer (0-100 percent)
the image is just the datatable (dtRad) put into a gridview
Rad1.DataSource = dtRad
Rad1.DataBind()
Rad1.PlotArea.YAxis.MinValue = 0
Rad1.PlotArea.YAxis.MaxValue = 100
I get nothing in my chart - I want to tell it to use the columnNames as the Xaxis and the values of each row as a series line.
0
Hi ,
I have already replied to the support ticket that was opened by your, so I paste my answer below for the rest of the community:
Please find my comments and suggestions below:
- If you want to bind the chart, each series must refer to the corresponding data source field. This means that you must transpose the data source (i.e., the rows become columns). See an example of a data bound chart to a dataset here.
- Another approach for creating a chart out of the current data source structure is to iterate through the rows and columns and create the chart programmatically. See an example here.
- From the provided snap shot it seems that you want to use either a line series or scatterline series.
- You can see an example of a data bound line series with date axis here.
- Date axis in the RadHtmlChart doesn't require converting the DateTime column to ODate format, as it was with the obsolete RadChart.
- If you want, however, to create programmatically a scatterline series with DateTime you must convert the dates on the server to its JavaScript datetime equivalent. More details are available in the Programmatic Creation Of SeriesItems With DateTime help article.
Regards,
Danail Vasilev
Telerik
I have already replied to the support ticket that was opened by your, so I paste my answer below for the rest of the community:
Please find my comments and suggestions below:
- If you want to bind the chart, each series must refer to the corresponding data source field. This means that you must transpose the data source (i.e., the rows become columns). See an example of a data bound chart to a dataset here.
- Another approach for creating a chart out of the current data source structure is to iterate through the rows and columns and create the chart programmatically. See an example here.
- From the provided snap shot it seems that you want to use either a line series or scatterline series.
- You can see an example of a data bound line series with date axis here.
- Date axis in the RadHtmlChart doesn't require converting the DateTime column to ODate format, as it was with the obsolete RadChart.
- If you want, however, to create programmatically a scatterline series with DateTime you must convert the dates on the server to its JavaScript datetime equivalent. More details are available in the Programmatic Creation Of SeriesItems With DateTime help article.
Regards,
Danail Vasilev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Doug
Top achievements
Rank 1
Rank 1
answered on 13 Jan 2015, 02:15 PM
I have worked out how to do this now with your help. I choose the looping data and API creating each series with my current data.
some of my quick code is here (note: my data has the series name in the first column - not shown in my image)
------------------------------
For i As Integer = 0 To dt.Rows.Count - 1
Dim oSeries As Telerik.Web.UI.LineSeries = New Telerik.Web.UI.LineSeries
oSeries.Name = dt.Rows(i)(0)
oSeries.LabelsAppearance.Visible = False
'oSeries.TooltipsAppearance.DataFormatString = "{0} Volts, {1} mA"
'oSeries.TooltipsAppearance.Color = System.Drawing.Color.White
For j As Integer = 1 To dt.Columns.Count - 1
Dim oCategorySeriesItem As Telerik.Web.UI.CategorySeriesItem = New Telerik.Web.UI.CategorySeriesItem
If dt.Rows(i)(j) <> "" Then
oCategorySeriesItem.Y = CDec(dt.Rows(i)(j).replace("%", ""))
Else
oCategorySeriesItem.Y = 0
End If
oSeries.SeriesItems.Add(oCategorySeriesItem)
Next
Rad1.PlotArea.Series.Add(oSeries)
Next
For i As Integer = 1 To dt.Columns.Count - 1
Rad1.PlotArea.XAxis.Items.Add(dt.Columns(i).ColumnName)
Next
Rad1.PlotArea.YAxis.MinValue = 0
Rad1.PlotArea.YAxis.MaxValue = 100
---------------------------------------------
I see that i put the x-axis labels in a seperate loop
i have some work to do on appearance now but this is the major step i needed to get moving. the rest seems more straightforward.
thank you for your help
some of my quick code is here (note: my data has the series name in the first column - not shown in my image)
------------------------------
For i As Integer = 0 To dt.Rows.Count - 1
Dim oSeries As Telerik.Web.UI.LineSeries = New Telerik.Web.UI.LineSeries
oSeries.Name = dt.Rows(i)(0)
oSeries.LabelsAppearance.Visible = False
'oSeries.TooltipsAppearance.DataFormatString = "{0} Volts, {1} mA"
'oSeries.TooltipsAppearance.Color = System.Drawing.Color.White
For j As Integer = 1 To dt.Columns.Count - 1
Dim oCategorySeriesItem As Telerik.Web.UI.CategorySeriesItem = New Telerik.Web.UI.CategorySeriesItem
If dt.Rows(i)(j) <> "" Then
oCategorySeriesItem.Y = CDec(dt.Rows(i)(j).replace("%", ""))
Else
oCategorySeriesItem.Y = 0
End If
oSeries.SeriesItems.Add(oCategorySeriesItem)
Next
Rad1.PlotArea.Series.Add(oSeries)
Next
For i As Integer = 1 To dt.Columns.Count - 1
Rad1.PlotArea.XAxis.Items.Add(dt.Columns(i).ColumnName)
Next
Rad1.PlotArea.YAxis.MinValue = 0
Rad1.PlotArea.YAxis.MaxValue = 100
---------------------------------------------
I see that i put the x-axis labels in a seperate loop
i have some work to do on appearance now but this is the major step i needed to get moving. the rest seems more straightforward.
thank you for your help