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

Dynamic Series for RadHTMLChart

8 Answers 518 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 18 Jul 2013, 01:24 PM
We are still in the Research phase of a project where we are trying to report total weekly sales (by number of items) for each Employee ID that is pulled from the database. Because the number of employees change regularly or we may want to filter results to employees from a particular store we have no idea at runtime how many lines we will need for our line chart. I was wondering if anyone has figured out how to dynamically bind this information.

What is expected on the chart:

  • Weeks are on the XAxis.
  • Total sales are on the Y Axis.
  • There is a separate line for every employee.

It is not known exactly how the columns that will feed the data to the database will be configured, the two most likely scenarios are shown in the pictures attached.


8 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 19 Jul 2013, 02:28 PM
Hello Michael,

In order to bind a datasource to the RadHtmlChart you must:
  • pass a datasource to the chart
  • reference each chart's Series to the respective field/column of the datasource(e.g. through the DataFieldY, DataFieldX, ColorField and other properties specific for each series type).
Therefore the structure of the datasource from "Weeks-in-column.png" picture will be relevant for the databinding. For example:
ASPX:
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
</telerik:RadHtmlChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
    int numSeries = GetData().Columns.Count - 2;
    for (int i = 0; i < numSeries; i++)
    {
        LineSeries currLineSeries = new LineSeries();
        currLineSeries.DataFieldY = GetData().Columns[2 + i].Caption;
        RadHtmlChart1.PlotArea.Series.Add(currLineSeries);
    }
 
    RadHtmlChart1.PlotArea.XAxis.DataLabelsField = "Weeks";
 
    RadHtmlChart1.DataSource = GetData();
    RadHtmlChart1.DataBind();
}
 
protected DataTable GetData()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("ID");
    dt.Columns.Add("Weeks");
    dt.Columns.Add("a111");
    dt.Columns.Add("a112");
    dt.Columns.Add("a119");
 
    dt.Rows.Add(1, "1/3/2011" , 4, 46, 117);
    dt.Rows.Add(2, "1/10/2011", 12, 62, 112);
    dt.Rows.Add(3, "1/17/2011", 6, 79, 132);
 
    return dt;
}

The above examples illustrates how to dynamically add LineSeries depending on the numSeries variable - number of the columns in the datasource that contains series data.

Note also that you can change the datasource of the HtmlChart on the client for already declared series (series cannot be declared on the client-side). HtmlChart - Client-side Binding demo and Client-side API help article shed more light on the matter.

You can also find useful HtmlChart - Date Axis demo, Date Axis help article as well all the examples related to DataBinding.


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
Michael
Top achievements
Rank 1
answered on 19 Jul 2013, 06:21 PM
This helped alot, though I did have to make some changes in order to make it work.

The select statement does not return an "ID" column so all 2s were changed to 1s.
Because the Column captions were numbers I needed to supply currLineSeries.DataFieldY a value like "[NUM]".

Final version of code:

DataTable d = GetData(TestDatabaseDataSource);

        int numSeries = d.Columns.Count - 1;
        for (int i = 0; i < numSeries; i++)
        {
            LineSeries currLineSeries = new LineSeries();
            currLineSeries.DataFieldY =  "[" + d.Columns[1 + i].Caption + "]";
            RadHtmlChartTestDataBaseDynamicBinding.PlotArea.Series.Add(currLineSeries);
        }
0
rithy
Top achievements
Rank 1
answered on 25 Sep 2013, 09:17 AM
Hi From Rithy,

This solution is wonderful relate to my project as well. But, How many series that RadHtmlChart can support? I just find out that it can support only 15 series. Can it support more than that?

Regards,

Rithy
0
Danail Vasilev
Telerik team
answered on 27 Sep 2013, 03:12 PM
Hello Rithy,

I have tried to reproduce the mentioned issue but to no avail. Could you please have a look at the short video I have created and then tell me what I am missing? I have successfully added 30 and 100 LineSeries.

Could you confirm whether your version of RadControls is the latest official one and if not, does upgrading to it resolve the issue?

If the above step, however is not useful, I can suggest that you try to reproduce the issue with the attached VS example and then send it back to us, so we can proceed further with the investigation.

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
rithy
Top achievements
Rank 1
answered on 28 Sep 2013, 07:03 AM
Dear Danail,

Thank you so much for your support. After I read your attachment I debug my code again and find out that my column 16th has a space which HtmlChart can't recognize. That's why it show blank chart. 

Regads,

Rithy
0
Danail Vasilev
Telerik team
answered on 28 Sep 2013, 09:11 AM
Hello Rithy,

In order to escape the special symbols as well as spaces in the fields names you can use the bracket notation and after that escape the quotations with backslash symbols. For example:
<telerik:ColumnSeries DataFieldY="[\'@#$U,a a1\']">


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
rithy
Top achievements
Rank 1
answered on 30 Sep 2013, 05:31 AM
Hello Danail,

I've already tried your suggestion but still can't show. My code is:
strCol = string.Format("[\'{0}\']", ds.Tables[0].Columns[i + 1].Caption); //output "['BSC_ERB_01']"
cSeries.Name = strCol;
cSeries.DataFieldY = strCol;

Does my format is same as your suggestion?

Regards,

Rithy
0
Marin Bratanov
Telerik team
answered on 02 Oct 2013, 11:46 AM
Hi Rithy,

I would advise that you simply rename the column in the datatable. Even though the brackets may be used to escape column names with spaces this is still a hack and I would advise against it.
An alternative would be to loop through the values from that column and create seriesItems programmatically instead of databinding that particular series.


Regards,
Marin Bratanov
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.
Tags
Chart (HTML5)
Asked by
Michael
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Michael
Top achievements
Rank 1
rithy
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or