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

Dynamically adding ColumnSeries, Unhandled Exception thrown in all browsers

4 Answers 352 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 22 Apr 2016, 06:43 AM
I am binding a DataTable dynamically in code behind to a RadHtmlChart and adding ColumnSeries Objects to the PlotArea.  The code I'm executing looks like this:

SqlDataAdapter da = new SqlDataAdapter(sqlCommand);
                    da.Fill(pivotTable);

                    for (int i = 2; i < pivotTable.Columns.Count; i++ )
                    {
                        ColumnSeries cs = new ColumnSeries();
                        cs.DataFieldY = pivotTable.Columns[i].ColumnName;
                        cs.Name = pivotTable.Columns[i].ColumnName;
                        cs.Gap = 1.5;
                        cs.Spacing = 0.4;
                        cs.Stacked = true;
                        cs.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.BarColumnLabelsPosition.Center;
                        cs.TooltipsAppearance.Color = System.Drawing.Color.White;

                        GraphAvgWT.PlotArea.Series.Add(cs);
                    }

                    GraphAvgWT.DataSource = pivotTable;
                    GraphAvgWT.DataBind();

When I run this in any browser there is an exception thrown that looks like this:

Unhandled exception at line 869, column 1 in http://localhost:49573/ScriptResource.axd?d=WLmYcdOKb_LAUnVSHQHR_hSJ5_ioMpFtRv-OH10MfF6U9fb1aA_Wxx1ydL_Dzi9j6TRzmqrWagcWnKdo5Eq1K82yemCb8VeXhI_pB8YUERcZ9lmHzOgkSZqZJb4-cBN_QxRKGZb-mZqVdCLfssHYSg2&t=5ebf97e0

0x800a03ee - JavaScript runtime error: Expected ')'

As a result the chart does not contain any data, but the Legend shows all of the columns/series that I added.  I've also compared this code to the GroupDataSource example (http://www.telerik.com/support/code-library/group-radhtmlchart-data-source) and I'm adding the series by a similar manner and setting the same properties on the ColumnSeries Object.   

If I comment-out the line that reads "GraphAvgWT.PlotArea.Series.Add(cs);" the error goes away, but of course, there is no data in the chart.

Can you please help me resolve this issue?  Thanks.

4 Answers, 1 is accepted

Sort by
0
Scott
Top achievements
Rank 1
answered on 26 Apr 2016, 06:32 PM
I was able to resolve this by removing all spaces from the "pivotTable.Columns[i].ColumnName" values.  Apparently the ColumnSeries.DataFieldY property cannot accept any values containing spaces or any special characters.
0
Stamo Gochev
Telerik team
answered on 27 Apr 2016, 05:03 AM
Hi Scott,

I have already answered the other support ticket regarding the same problem, so I am sending my answer here as well.

It would be very helpful if we can continue the conversation in one of the threads only as this will allow our support team to handle the problems more efficiently.

The original answer looks like this:

"I am glad to hear that you have managed to cope with the problem.

In addition, you can have a look at the following help article that describes a workaround for using special characters in the data field names:"


http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/troubleshooting/common-issues#radhtmlchart-cannot-be-bound-to-a-data-source-that-has-special-characters-in-its-field-names


Regards,
Stamo Gochev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Scott
Top achievements
Rank 1
answered on 27 Apr 2016, 12:52 PM

I modified the files which you sent to me and added the formatting instructions which you provided above to handle special characters.  It does not seem to work because any of the "DataFieldY" values that point to a db column name containing parenthesis characters are still failing.  Please see the source code below which experience the problem.  If you can help me simplify the way that I have hacked-around the problem using a recommended solution for special characters would be greatly appreciated.

--------------- Add-series.aspx.cs -------------------

using System;
using System.Data;
using System.Linq;
using Telerik.Web.UI;
 
public partial class TICKETS_HtmlChart_2016_Q2_Add_Series_Add_Series : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var dataTable = GetData();
 
        for (int i = 1; i < dataTable.Columns.Count; i++)
        {
            ColumnSeries columnSeries = new ColumnSeries();
            columnSeries.DataFieldY = "[\\'" + dataTable.Columns[i].ColumnName + "\\']";
            columnSeries.Name = dataTable.Columns[i].ColumnName;
            columnSeries.Gap = 1.5;
            columnSeries.Spacing = 0.4;
            columnSeries.Stacked = true;
            columnSeries.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.BarColumnLabelsPosition.Center;
            columnSeries.TooltipsAppearance.Color = System.Drawing.Color.White;
 
            Chart.PlotArea.Series.Add(columnSeries);
        }
 
        Chart.PlotArea.XAxis.DataLabelsField = "xLevel";
 
        Chart.DataSource = dataTable;
        Chart.DataBind();
 
    }
 
    protected DataTable GetData()
    {
        DataTable table = new DataTable();
        table.Columns.Add(new DataColumn("xLevel"));
        table.Columns.Add(new DataColumn("Document In Review"));
        table.Columns.Add(new DataColumn("Escalated to Vodafone (In Review)"));
        table.Columns.Add(new DataColumn("Review Awaiting Allocation"));
        table.Rows.Add(new object[] { "Mickey Mouse", 4, 6, 8 });
        table.Rows.Add(new object[] { "Scott Leclerc", 1, 5, 17 });
        table.Rows.Add(new object[] { "Michael Jordan", 11, 31, 5 });
        table.Rows.Add(new object[] { "Babe Ruth", 2, 6, 10 });
        return table;
    }
}

--------------- Add-series.aspx -------------------

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Add-Series.aspx.cs" Inherits="TICKETS_HtmlChart_2016_Q2_Add_Series_Add_Series" %>
 
<!DOCTYPE html>
 
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server"></asp:ScriptManager>
 
 
        <telerik:radhtmlchart id="Chart" runat="server" Skin="Silk">
        </telerik:radhtmlchart>
 
    </form>
</body>
</html>

0
Stamo Gochev
Telerik team
answered on 28 Apr 2016, 04:40 AM
Hi Scott,

Unfortunately, some special characters cannot be handled and the help article's suggestion is exactly a workaround for certain situations.

What I can recommend is to either rename the table or create the series items programmatically.

Regards,
Stamo Gochev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Chart (HTML5)
Asked by
Scott
Top achievements
Rank 1
Answers by
Scott
Top achievements
Rank 1
Stamo Gochev
Telerik team
Share this question
or