Dynamic Series for RadHTMLChart

[Michael]

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.

[Danail Vasilev]

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

[Michael]

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);
        }

[rithy]

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

[Danail Vasilev]

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

[rithy]

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

[Danail Vasilev]

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

[rithy]

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

[Marin Bratanov]

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