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

First Chart - Nothing Showing Up

3 Answers 346 Views

Chart (HTML5)

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

Amanda asked on 04 Jan 2013, 05:08 PM

This is the first time we're using the RadHtmlChart control (in the past, we've used others successfully - like the RadCalendar - just fine). I can't get ANYTHING to show up. I'm using some of your sample code on a test page:

My test.aspx file:

<%@ Page Language="C#" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

<title>Test</title>

</head>

<body>

<form id="form1" runat="server">

<p>This is a test...</p>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true">

<PlotArea>

<Series>

<telerik:PieSeries StartAngle="90">

<LabelsAppearance Position="Circle" DataFormatString="{0} %" />

<TooltipsAppearance DataFormatString="{0} %" />

<Items>

<telerik:SeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" YValue="18.3" />

<telerik:SeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" YValue="35.8" />

<telerik:SeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" YValue="38.3" />

<telerik:SeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" YValue="4.5" />

<telerik:SeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" YValue="2.3" />

</Items>

</telerik:PieSeries>

</Series>

</PlotArea>

<ChartTitle Text="Browser Usage for April 2012">

</ChartTitle>

</telerik:RadHtmlChart>

</form>

</body>

</html>

But when I look at it in my browser window, I just see "This is a test..." and then blank.

I'm sure I'm missing something obvious ... what do I need to add/change to get the chart to show?

3 Answers, 1 is accepted

answered on 09 Jan 2013, 09:45 AM

RadHtmlChart-test.zip

my-create.zip

Hi Amanda,

Your page is working properly on my side. I have also tested it under different browsers - IE9, FireFox, Chrome. You can have a look at the short video I have created here. In order to troubleshoot this issue I suggest the following:

Could you check what is happening in the code behind of your page? It is possible that:

Your chart is databound to an empty/invalid datasource.
OR maybe you are applying some CSS that is locating your chart out of the visible screen.
OR maybe you are creating programmatically an empty chart with the same ID as the one from the codebehind, so it is replacing it.
Could you test the VS test page I have included in the "RadHtmlChart_test.zip" archive? It is the same page you have sent but with empty codebehind. Does comparing it with your actual case help find the issue's origin?

Do you have any issues with other controls from the suite or it is just the RadHtmlChart? Could you test other controls (e.g. RadButton, RadGauge, etc.)? Could you confirm the RadControls' version you are using, too? If it is an older version you can try upgrading to the latest one to see if this helps?
Could you confirm the browser and its version, under which you are having this behaviour? Could you also test this scenario under the major browsers (e.g. IE9, FireFox, Chrome, Opera, etc.)? If you are having this issue under particular browser you can try clearing its cache, disabling some of its plug-ins that could be breaking the chart rendering for some reason, or simply try reinstalling the browser itself?
Could you also check whether you are having some JavaScript errors on your real project? Such errors are breaking the functionality of the script controls, so they should be fixed. Could you also confirm your $create() statement is serialized properly (e.g. data property is populated with data)? You can check that by viewing the source code of the page - $create() is located at the and of the page. You can follow the approach from this short video. Could you also compare it with the one my page generates and see if there are any major differences? I am attaching mine in a simple text file.

Kind regards,
Danail Vasilev
the Telerik team

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 their blog feed now.

answered on 20 Mar 2013, 07:06 PM

Hi,

I am having the same issue. RadHTMLChart control works ok with static series.

But if i have to add series element programmatically, it shows nothing.

1) I verified sql query is returning results.
2) The data returned is all non-null
3) I debugged and saw the data is getting added to LineSeries

Below is the code

My sql query is providing result as;

hourminute field1 field2, etc.

DataView dv = (DataView)CSR_DataSource.Select(DataSourceSelectArguments.Empty);
DataTable dt = dv.ToTable();
RadChart1.DataSource = dt;
RadChart1.PlotArea.XAxis.DataLabelsField = "HourMinute";


for (int i = 0; i < columns.Count; i++)
{
LineSeries L1 = new LineSeries();
L1.Name = columns[i];
L1.TooltipsAppearance.BackgroundColor = System.Drawing.Color.Black;
L1.TooltipsAppearance.DataFormatString = "{0}%";
L1.DataFieldY = columns[i];
L1.TooltipsAppearance.Visible = true;
RadChart1.PlotArea.Series.Add(L1);
}

RadChart1.Legend.Appearance.Position = Telerik.Web.UI.HtmlChart.ChartLegendPosition.Bottom;
RadChart1.Legend.Appearance.Visible = true;
RadChart1.PreRender += RadChart_CSRetainibility_PreRender;

// bind to the datasource
RadChart1.DataBind();

answered on 25 Mar 2013, 11:59 AM

Hello Vrushali,

From the provided code snippet I can suggest you to:

Exclude the PreRender event handler from the RadHtmlChart. Note that RadHtmlChart renders entirely on the client-side and therefore it does not support any server-side events. The reason for the PreRender event to figure out in the intellisense of the control is because this event is inherited from the .NET Framework.
Verify that the DataTable variable called dt, after the conversion from the DataView format, has the proper structure and is in the right format. For example this datatable variable should consists of columns with names similar to the ones in the columns[] array, in order the fields references for the Series to be valid.

I have amended your example, in order to make it runnable:
ASPX:

<telerik:RadHtmlChart ID="RadChart1" runat="server">

</telerik:RadHtmlChart>

C#:

protected void Page_Load(object sender, EventArgs e)

{

DataSet dt = GetData();

RadChart1.DataSource = dt;

RadChart1.PlotArea.XAxis.DataLabelsField = "HourMinute";

string[] columns = { "Column1", "Column2" };

for (int i = 0; i < columns.Length; i++)

{

LineSeries L1 = new LineSeries();

L1.Name = columns[i];

L1.TooltipsAppearance.BackgroundColor = System.Drawing.Color.Black;

L1.TooltipsAppearance.DataFormatString = "{0}%";

L1.DataFieldY = columns[i];

L1.TooltipsAppearance.Visible = true;

RadChart1.PlotArea.Series.Add(L1);

}

RadChart1.Legend.Appearance.Position = Telerik.Web.UI.HtmlChart.ChartLegendPosition.Bottom;

RadChart1.Legend.Appearance.Visible = true;

// bind to the datasource

RadChart1.DataBind();

}

protected DataSet GetData()

{

DataSet DS = new DataSet();

DataTable tbl = new DataTable();

tbl.Columns.Add(new DataColumn("Column1"));

tbl.Columns.Add(new DataColumn("Column2"));

tbl.Rows.Add(new object[] { 18, 35 });

tbl.Rows.Add(new object[] { 12, 28 });

DS.Tables.Add(tbl);

return DS;

}

You can compare my example with the one you have provided and look for any differences that might affect the proper rendering of the RadHtmlChart.

If, however, the above steps does not help you can refer to the suggestions in my previous post that may help.

All the best,
Danail Vasilev
the Telerik team