telerik:RadChart how to do date on x axis?

Thread is closed for posting
5 posts, 0 answers
  1. Doug
    Doug avatar
    68 posts
    Member since:
    Aug 2014

    Posted 23 Dec 2014 Link to this post

    <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?
  2. Misho
    Admin
    Misho avatar
    129 posts

    Posted 26 Dec 2014 Link to this post

    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:

    <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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Doug
    Doug avatar
    68 posts
    Member since:
    Aug 2014

    Posted 12 Jan 2015 in reply to Misho Link to this post

    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.




  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 13 Jan 2015 Link to this post

    Hi Doug,

    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.

     
  6. Doug
    Doug avatar
    68 posts
    Member since:
    Aug 2014

    Posted 13 Jan 2015 in reply to Danail Vasilev Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017