This is a migrated thread and some comments may be shown as answers.

how to bind datetime or string data to HtmlChart

2 Answers 120 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Tony
Top achievements
Rank 1
Tony asked on 27 Jun 2013, 05:30 AM
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 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 01 Jul 2013, 03:33 PM
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.
0
Tony
Top achievements
Rank 1
answered on 02 Jul 2013, 04:06 PM
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.
Tags
Chart (HTML5)
Asked by
Tony
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Tony
Top achievements
Rank 1
Share this question
or