Recently, our pie chart has stopped displaying. The JS console says:
Uncaught TypeError: Cannot read property 'labels' of undefined
and on MouseOut
Uncaught TypeError: Cannot read property 'hideCrosshairs' of undefined
The HtmlChart object is defined on the aspx side and populated from the vb side.
However, even when taking the example directly from http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/chart-types/pie-chart, the example does not display, and the console gives me the same error messages.
We are using version 2017.1.228.45.
(Full JS error messages at the end.)
aspx:
<
telerik:RadHtmlChart
runat
=
"server"
ID
=
"RadHtmlChart1"
OnClientSeriesClicked
=
"OnClientSeriesClicked"
Height
=
"300px"
Transitions
=
"false"
/>
vb:
RadHtmlChart1.Visible =
True
Dim
chartData
As
New
PieSeries
chartData.StartAngle =
"90"
chartData.LabelsAppearance.Position = HtmlChart.PieAndDonutLabelsPosition.OutsideEnd
chartData.LabelsAppearance.DataFormatString =
"{0} %"
chartData.TooltipsAppearance.DataFormatString =
"{0} %"
Dim
chartItem1
As
New
PieSeriesItem
chartItem1.Name =
"Closed"
&
" ("
& yvalues(0) &
")"
chartItem1.Y = yvalues(0)
'Round(yvalues(0) / total * 100, 2)
chartItem1.BackgroundColor = Color.Green
chartItem1.Exploded =
False
chartData.SeriesItems.Add(chartItem1)
Dim
chartItem2
As
New
PieSeriesItem
chartItem2.Name =
"Unclosed"
&
" ("
& yvalues(1) &
")"
chartItem2.Y = yvalues(1)
'Round(yvalues(1) / total * 100, 2)
chartItem2.BackgroundColor = Color.LightGreen
chartItem2.Exploded =
False
chartData.SeriesItems.Add(chartItem2)
Dim
chartItem3
As
New
PieSeriesItem
chartItem3.Name =
"Unfinished"
&
" ("
& yvalues(2) &
")"
chartItem3.Y = yvalues(2)
'Round(yvalues(2) / total * 100, 2)
chartItem3.BackgroundColor = Color.LightGray
chartItem3.Exploded =
False
chartData.SeriesItems.Add(chartItem3)
Dim
chartItem4
As
New
PieSeriesItem
chartItem4.Name =
"Overdue"
&
" ("
& yvalues(3) &
")"
chartItem4.Y = yvalues(3)
'Round(yvalues(3) / total * 100, 2)
chartItem4.BackgroundColor = Color.Firebrick
chartItem4.Exploded =
False
chartData.SeriesItems.Add(chartItem4)
RadHtmlChart1.PlotArea.Series.Clear()
RadHtmlChart1.PlotArea.Series.Add(chartData)
RadHtmlChart1.Legend.Appearance.Position = HtmlChart.ChartLegendPosition.Top
Full error messages (URLs redacted):
Telerik.Web.UI.WebResource.axd:23965 Uncaught TypeError: Cannot read property 'labels' of undefined
at init.render (https://x.com/Telerik.Web.UI.WebResource.axd?_TSM_Hidden…3a69667591%3a6b6b9ee5%3a595e7652%3a6d43f6d9%3a58366029%3ae4f8f289:23965:37)
at init.reflow (https://x.com/Telerik.Web.UI.WebResource.axd?_TSM_Hidden…3a69667591%3a6b6b9ee5%3a595e7652%3a6d43f6d9%3a58366029%3ae4f8f289:23970:28)
at init.reflow (https://x.com/Telerik.Web.UI.WebResource.axd?_TSM_Hidden…%3a69667591%3a6b6b9ee5%3a595e7652%3a6d43f6d9%3a58366029%3ae4f8f289:24162:5)
at aX.reflowCharts (https://x.com/Telerik.Web.UI.WebResource.axd?_TSM_Hidden…3a69667591%3a6b6b9ee5%3a595e7652%3a6d43f6d9%3a58366029%3ae4f8f289:22535:25)
at aX.reflow (https://x.com/Telerik.Web.UI.WebResource.axd?_TSM_Hidden…%3a69667591%3a6b6b9ee5%3a595e7652%3a6d43f6d9%3a58366029%3ae4f8f289:22378:6)
at init.reflow (https://x.com/Telerik.Web.UI.WebResource.axd?_TSM_Hidden…3a69667591%3a6b6b9ee5%3a595e7652%3a6d43f6d9%3a58366029%3ae4f8f289:17252:13)
at init._getModel (https://x.com/Telerik.Web.UI.WebResource.axd?_TSM_Hidden…%3a69667591%3a6b6b9ee5%3a595e7652%3a6d43f6d9%3a58366029%3ae4f8f289:24996:3)
at init._redraw (https://x.com/Telerik.Web.UI.WebResource.axd?_TSM_Hidden…3a69667591%3a6b6b9ee5%3a595e7652%3a6d43f6d9%3a58366029%3ae4f8f289:24931:33)
at init.d.fn.(anonymous function) [as _redraw] (https://x.com/Telerik.Web.UI.WebResource.axd?_TSM_Hidden…3a69667591%3a6b6b9ee5%3a595e7652%3a6d43f6d9%3a58366029%3ae4f8f289:25726:22)
at init.refresh (https://x.com/Telerik.Web.UI.WebResource.axd?_TSM_Hidden…%3a69667591%3a6b6b9ee5%3a595e7652%3a6d43f6d9%3a58366029%3ae4f8f289:25546:4)
Telerik.Web.UI.WebResource.axd:23965 Uncaught (in promise) TypeError: Cannot read property 'labels' of undefined
at init.render (Telerik.Web.UI.WebResource.axd:23965)
at init.reflow (Telerik.Web.UI.WebResource.axd:23970)
at init.reflow (Telerik.Web.UI.WebResource.axd:24162)
at aX.reflowCharts (Telerik.Web.UI.WebResource.axd:22535)
at aX.reflow (Telerik.Web.UI.WebResource.axd:22378)
at init.reflow (Telerik.Web.UI.WebResource.axd:17252)
at init._getModel (Telerik.Web.UI.WebResource.axd:24996)
at init._redraw (Telerik.Web.UI.WebResource.axd:24931)
at Telerik.Web.UI.WebResource.axd:24855
at <
anonymous
>
Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ScriptManager_TSM&compress=1&_TSM_CombinedScripts_…:25258 Uncaught TypeError: Cannot read property 'hideCrosshairs' of undefined
at init.hideElements (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ScriptManager_TSM&compress=1&_TSM_CombinedScripts_…:25258)
at init._mouseleave (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ScriptManager_TSM&compress=1&_TSM_CombinedScripts_…:25606)
at HTMLDivElement.e (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ScriptManager_TSM&compress=1&_TSM_CombinedScripts_…:1577)
at HTMLDivElement.handle (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ScriptManager_TSM&compress=1&_TSM_CombinedScripts_…:1578)
at HTMLDivElement.dispatch (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ScriptManager_TSM&compress=1&_TSM_CombinedScripts_…:1578)
at HTMLDivElement.r.handle (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ScriptManager_TSM&compress=1&_TSM_CombinedScripts_…:1578)
21 Answers, 1 is accepted
I tested both the provided code and the sample from the linked article and the charts are displayed successfully at my end. Can you, please, share some more details on the exact environment in which the issue occurs? Does it happen in all browsers or only in a specific one? If it is IE, can you check whether it is not running in Compatibility mode?
It will be really helpful if you send us a runnable sample (including the usd web.config configurations) so we can replicate and examine the cause for the problem further.
Regards,
Vessy
Progress Telerik

Have the same problem.
It was working in 2016_3_1027 and is broken in 2017_1_228. Version 2017_1_118 is not tested.
All I know it has something to do with LabelsAppearance on PieSeries. Can't isolate the problem, but seems that it is not related to data.
Setting LabelsAppearance.Visible = false fixes problem, but labels are hidden, so it is just temporary workaround to keep chart running.

Just FYI
2017_1_118 - Works fine
2017_1_228 - Is broken
I found that version 228 contains a new version of Kendo components (html5.dataviz.chart etc.), so maybe you changed something inside?

And last thing, calling this code from Immediate Window in my page (just init part from rendered page) throws "Unable to get property 'labels' of undefined or null reference"
Not the best runnable sample, but that's all I can get. You can test it on your own, just change client id of control to any existing.
$create(Telerik.Web.UI.RadHtmlChart,
{
"_chartArea": "{background: 'transparent'}",
"_chartTitle": "{visible: true,font: 'bold 16px Arial,Helvetica,sans-serif',margin:20}",
"_clientEvents":
{
},
"_dataSource": "[{\"Name\":\"Pro zobrazení grafu musí být vybrán jeden hodnotící parametr !\",\"Value\":1,\"DefaultColor\":\"#4F81BD\",\"_Percentage\":100,\"_Value\":\"1\"}]",
"_layout": "default",
"_legend": "{visible: false,labels: {font: '12px Arial,Helvetica,sans-serif'}}",
"_pannable": false,
"_plotArea": "{appearance: {background:'transparent'},tooltip: {visible: true}}",
"_series": "[{type:'pie',field: 'Value',name: 'Název',tooltip: {visible: true, template: '<div style=\"text-align: right\"><strong>#=dataItem.Name#</strong><br/>#=dataItem._Value#<br/><em>#=dataItem._Percentage#%</em></div>'},colorField: 'DefaultColor',type: 'pie', startAngle: 0,colorField: 'DefaultColor',categoryField: 'Name',labels: {visible: true,font: '12px Arial,Helvetica,sans-serif',template: '#=dataItem.Name#: #=dataItem._Value# (#=dataItem._Percentage#%)'}}]",
"_uniqueId": "ctl00$Telo$Dock_1353$C$ctl00$bc",
"_zoomable": false,
"clientStateFieldID": "ctl00_MainContent_RadHtmlChart1_ClientState",
"skin": "CMS_Black"
}, null, null, $get("ctl00_MainContent_RadHtmlChart1"));
I tested the Pie chart with the mentioned versions (as well as with the latest 2017 Q2 SP2 release) but still no errors are thrown on my end. I am attaching my test page to this reply - are you able to reproduce the issue with it? If no, can you try to modify it up to a point where the issue occurs and send it back for a further investigation?
Thank you in advance for your cooperation.
Regards,
Vessy
Progress Telerik

Hello,
simple Pie chart in page works fine. Must be related to Ajax panels or something else. It is hard for me to create sample, it crashes in out CMS and it is no easy to separate result.
R.

Well, last attempt form me. Tracked down this and it throws exception in html5.dataviz.chart.js on code
"var themeLabels = chartService.theme.seriesDefaults.labels;"
in PieSegment.render() function.
There is no "theme", so seriesDefaults and labels ale undefined.
Maybe it can help you to track changes in dataviz what exactly causes this error. I think I can't do more :-(

Ok, got it :-)
Problem is only when you are using custom skins. We have our own skin for Telerik Asp controls. When creating Kendo widget in PieChart, there is function:
_getThemeOptions: function (userOptions) {
var themeName = (userOptions || {}).theme;
if (defined(themeName)) {
var themes = dataviz.ui.themes || {};
var theme = themes[themeName] || themes[themeName.toLowerCase()] || {};
return theme.chart || {};
}
}
But there is no custom skin included in themes, so it returns {} as theme. And then it crashes as I wrote in previous post.
You can simply test it including any custom skin in project and changing global settings in web.config.
<add key="Telerik.Skin" value="CMS_Black"/>
It results to error.
Please test it on your side and let me know . Thnx.

Thanks, Raptor, for sharing your findings with us. I have logged the reported regression bug and we will do our best to have it fixed as soon as possible. You can track its progress here:
https://feedback.telerik.com/Project/108/Feedback/Details/226354
I have also increased your Telerik points a bit as a small token of gratitude for your report.
Regards,
Vessy
Progress Telerik

Hi,
is this problem fixed in R3 2017?
I am afraid that the linked bug is not fixed for our 2017 R3 release. The status of the item will be updated immediately when the issue is resolved, so you an subscribed to get updates for it.
Regards,
Vessy
Progress Telerik

Hello,
when it will be fixed? It takes so long, customers are not happy.
The bug is planned for fixing for our next Service pack and if everything goes well with the backlog (no critical issues with higher priority appear) the fix will be included in our next release. The status of its feedback item will be updated immediately when the bug is handled:
https://feedback.telerik.com/Project/108/Feedback/Details/226354
Please, accept our apologies for any inconveniences this is causing to your work.
Regards,
Vessy
Progress Telerik

Hi,
a new major version is out and bug feedback item is still untouched. Where is the problem? You doesn't care about reported bugs anymore?
Raptor


Yes, you are right, sorry.
I just don't understand how can this take so long to fix. In service pack, not fixed. In next major release, not fixed.
I'm just disappointed, that's all.
The main focus in our latest releases was applying of some important security improvements, thus many of the logged bug fixes were postponed in favour of these security changes. We do work on fixing and improving the controls and do our best to resolve as much issues as possible, looking at them on priority base. I have increased the priority of this item to the highest level, so it will appear on the top of our backlog now.
Please, accept our appologies for the caused inconvenienses, we will try to fix this as soon as possible.
Regards,
Vessy
Progress Telerik
We are currently working on the bug discussed in this thread and it seems to be not reproducible with the latest release. I am attaching my test project to this reply - can you, please, confirm that the chart is running without any on your side as well?
Please, make sure as well that all settings required for the chart new skin creation described in the following article are applied on your side:
https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/appearance-and-styling/create-custom-skin
Regards,
Vessy
Progress Telerik

Hello,
may I ask you in what version it should be fixed? 2018_1_117?
Well, problem is, that HtmlChart is Kendo control inside ASP.Net pack. Theme in this case is not "theme", it is just JSON definition. It should be style, to be the right theme. But ok, I understand it. It is JavaScript control, so ok.
But there is other problem. We don't want to create JSON definition of skin. BTW we are leaving custom skins because of hard maintenance in new versions. But there should be internal mechanism that checks if custom skin name definition exists or not. Then it should do fallback to default skin. It is JavaScript, so it is easy to test. There is no need to define another Theme. Exists? Use it. Undefined? Use default.
Regards
Raptor
Thanks a lot for the shared feedback. I have passed your suggestion to our Product Manager and he aggeed to implement Default-skin fallback of the control whenever the set custom skin is undefined. This change is applied and is set for testing now - if all other functionality of the control is working smoothly with this change it will be included in our next release.
In addition, I have updated your Telerik points as a small token of grattitude for your feedbck.
Regards,
Vessy
Progress Telerik