Dynamic Series for RadHTMLChart

9 posts, 0 answers
  1. Michael
    Michael avatar
    11 posts
    Member since:
    Oct 2012

    Posted 18 Jul 2013 Link to this post

    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.


  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 19 Jul 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    11 posts
    Member since:
    Oct 2012

    Posted 19 Jul 2013 Link to this post

    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);
            }
  5. rithy
    rithy avatar
    3 posts
    Member since:
    Aug 2013

    Posted 25 Sep 2013 Link to this post

    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
  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 27 Sep 2013 Link to this post

    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.
  7. rithy
    rithy avatar
    3 posts
    Member since:
    Aug 2013

    Posted 28 Sep 2013 Link to this post

    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
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 28 Sep 2013 Link to this post

    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.
  9. rithy
    rithy avatar
    3 posts
    Member since:
    Aug 2013

    Posted 30 Sep 2013 Link to this post

    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
  10. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3596 posts

    Posted 02 Oct 2013 Link to this post

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