Pie Chart Errors, Does Not Display

15 posts, 0 answers
  1. Kerry
    Kerry avatar
    27 posts
    Member since:
    Jun 2013

    Posted 07 Jun Link to this post

    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)
    

     

  2. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 08 Jun Link to this post

    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.
  3. Raptor
    Raptor avatar
    32 posts
    Member since:
    Aug 2011

    Posted 28 Jul Link to this post

    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.

  4. Raptor
    Raptor avatar
    32 posts
    Member since:
    Aug 2011

    Posted 01 Aug Link to this post

    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?

  5. Raptor
    Raptor avatar
    32 posts
    Member since:
    Aug 2011

    Posted 01 Aug Link to this post

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

  6. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 02 Aug Link to this post

    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.
  7. Raptor
    Raptor avatar
    32 posts
    Member since:
    Aug 2011

    Posted 14 Aug in reply to Vessy Link to this post

    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.

  8. Raptor
    Raptor avatar
    32 posts
    Member since:
    Aug 2011

    Posted 14 Aug Link to this post

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

  9. Raptor
    Raptor avatar
    32 posts
    Member since:
    Aug 2011

    Posted 14 Aug Link to this post

    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.

  10. Kerry
    Kerry avatar
    27 posts
    Member since:
    Jun 2013

    Posted 14 Aug in reply to Raptor Link to this post

    Excellent find, Raptor! We are also using a custom skin for our Telerik controls, all contained within a DNN (CRM) site.
  11. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 16 Aug Link to this post

    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.
  12. Raptor
    Raptor avatar
    32 posts
    Member since:
    Aug 2011

    Posted 14 Sep Link to this post

    Hi,

    is this problem fixed in R3 2017?

  13. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 14 Sep Link to this post

    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.
  14. Raptor
    Raptor avatar
    32 posts
    Member since:
    Aug 2011

    Posted 06 Nov Link to this post

    Hello,

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

  15. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 09 Nov Link to this post

    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.
Back to Top