how to bind datetime or string data to HtmlChart

3 posts, 0 answers
  1. Tony
    Tony avatar
    4 posts
    Member since:
    Jun 2013

    Posted 27 Jun 2013 Link to this post

    Dears,

    I am using HtmlChart and encounter some problems.
    (1).I try to create series from the data table by creating SeriesItem which needs X and Y values. I saw the item must be decimal but actually my data is X:datetime, and Y:Decimal type. How to create the X value by datetime or even the string value?

    ScatterLineSeries series1 = new ScatterLineSeries();
                    series1.Name = "date_time";
                    series1.LabelsAppearance.Visible = false;

    foreach (DataRow row in MyDataTable.Rows)
                    {
                        string xx = "traffic_erlang";
                        SeriesItem item1 = new SeriesItem( 100,(decimal)row[xx]); //I put the static value 100 as I don't know how to put the datetime/string
                       
                        series1.Items.Add(item1);

                  RadHtmlChart1.PlotArea.Series.Add(series1);
                        RadHtmlChart1.PlotArea.Series.Add(series2);
                        
                    }

    (2).Do we have any other ways to bind data from datatable by grouping the fields so the dynamic series will be created.
    example:
    --------------------------
    ID | Name | Value
    --------------------------
    1 | ABC | 200
    2 | GED | 340
    ...... which Name is the dynamic data
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 01 Jul 2013 Link to this post

    Hello Tony,

    Please find below my answers to your questions:
    • Add date series items - In the current version of RadControls it is not possible to create date-time items and add them to the chart. What you can do, however, is instead of creating and adding series items programmatically, create a datatable and pass it as datasource to the chart. For example:

    ASPX:

    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
    </telerik:RadHtmlChart>
    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
     
        DataTable dt = new DataTable();
        dt.Columns.Add("id");
        dt.Columns.Add("xValues");
        dt.Columns.Add("yValues");
        for (int i = 0; i < 5; i++)
        {
            dt.Rows.Add(i, (10 + i).ToString() + " Apr", 20 + i);
        }
     
        ScatterLineSeries sls1 = new ScatterLineSeries();
        sls1.LabelsAppearance.DataFormatString = "{0:d}";
        sls1.DataFieldX = "xValues";
        sls1.DataFieldY = "yValues";
     
        RadHtmlChart1.PlotArea.Series.Add(sls1);
        RadHtmlChart1.DataSource = dt;
        RadHtmlChart1.DataBind();
     
    }
    • Grouping functionality - I am sorry to say the RadHtmlChart, does not support grouping functionality. This, however, has already been logged as a PITS item here, so that you can monitor, comment and vote on it. For the time being you can make a custom implementation that groups the datasource prior to binding to the chart. You can find such a sample in the attached archive.


    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tony
    Tony avatar
    4 posts
    Member since:
    Jun 2013

    Posted 02 Jul 2013 Link to this post

    Dear,

    Your answer of (Add date series items ) is quite helpful, though I can't use date but string can be replaced the needs. Thanks.

    Regarding to the group function, if the next version could offer this it must be great for dynamic data binding but needs the Legends to be generated the dynamically as well.

    Thanks for those clarifications.
Back to Top