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

Pie Chart Errors, Does Not Display

21 Answers 126 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Kerry
Top achievements
Rank 1
Kerry asked on 07 Jun 2017, 02:49 PM

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

Sort by
0
Vessy
Telerik team
answered on 08 Jun 2017, 02:11 PM
Hi Kerry,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
René
Top achievements
Rank 2
answered on 28 Jul 2017, 02:02 PM

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.

0
René
Top achievements
Rank 2
answered on 01 Aug 2017, 10:48 AM

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?

0
René
Top achievements
Rank 2
answered on 01 Aug 2017, 12:57 PM

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"));

0
Vessy
Telerik team
answered on 02 Aug 2017, 12:12 PM
Hi Raptor,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
René
Top achievements
Rank 2
answered on 14 Aug 2017, 06:25 AM

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.

0
René
Top achievements
Rank 2
answered on 14 Aug 2017, 08:20 AM

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

0
René
Top achievements
Rank 2
answered on 14 Aug 2017, 09:56 AM

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.

0
Kerry
Top achievements
Rank 1
answered on 14 Aug 2017, 02:00 PM
Excellent find, Raptor! We are also using a custom skin for our Telerik controls, all contained within a DNN (CRM) site.
0
Vessy
Telerik team
answered on 16 Aug 2017, 02:02 PM
Hi guys,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
René
Top achievements
Rank 2
answered on 14 Sep 2017, 08:02 AM

Hi,

is this problem fixed in R3 2017?

0
Vessy
Telerik team
answered on 14 Sep 2017, 09:41 AM
Hello Kerry,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
René
Top achievements
Rank 2
answered on 06 Nov 2017, 12:31 PM

Hello,

when it will be fixed? It takes so long, customers are not happy.

0
Vessy
Telerik team
answered on 09 Nov 2017, 09:40 AM
Hi Raptor,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
René
Top achievements
Rank 2
answered on 19 Jan 2018, 02:05 PM

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

0
Kerry
Top achievements
Rank 1
answered on 19 Jan 2018, 02:37 PM
No need to be rude, Raptor.
0
René
Top achievements
Rank 2
answered on 19 Jan 2018, 07:33 PM

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.

0
Vessy
Telerik team
answered on 23 Jan 2018, 11:33 AM
Hi guys,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Vessy
Telerik team
answered on 02 Apr 2018, 11:27 AM
Hi guys,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
René
Top achievements
Rank 2
answered on 03 Apr 2018, 07:19 AM

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

0
Vessy
Telerik team
answered on 05 Apr 2018, 08:35 AM
Hi 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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Chart (HTML5)
Asked by
Kerry
Top achievements
Rank 1
Answers by
Vessy
Telerik team
René
Top achievements
Rank 2
Kerry
Top achievements
Rank 1
Share this question
or