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

Dynamically adding ColumnSeries, Unhandled Exception thrown in all browsers

4 Answers 400 Views

Chart (HTML5)

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

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

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.

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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>