Skip to Content
author's profile photo Former Member
Former Member

viz pie chart issue( when load the pie chart failed)

when i use viz show pie chart encounter a issuse.

first time load this chart, can be ok. but when I jump to another page or others tab.

and then back to this page. the pie chart load failed.

show error:

Uncaught TypeError: Cannot call method 'removeChild' of null


  1. Setup.destroysap-viz.js:2
  2. U.extend.doDestroysap-viz.js:2
  3. Setup.O.extend.destroysap-viz.js:2
  4. Setup.C.define.destroysap-viz.js:2
  5. Setup.O.extend.destroysap-viz.js:2
  6. v.destroysap-viz.js:2
  7. sap.viz.ui5.core.BaseChart._renderChartBaseChart.js:11
  8. sap.viz.ui5.core.BaseChart.onAfterRenderingBaseChart.js:15
  9. sap.ui.core.Element._callEventHandlessap-ui-core.js:126
  10. sap.ui.core.Element._handleEventsap-ui-core.js:126
  11. fsap-ui-core.js:126
  12. sap.ui.core.RenderManager.flushsap-ui-core.js:126
  13. (anonymous function)sap-ui-core.js:126
  14. sap.ui.ux3.Shell._rerenderContentShell.js:90
  15. sap.ui.ux3.Shell.setContentShell.js:98
  16. selectWorkItemtrackIndex2.view.js:343
  17. sap.ui.base.EventProvider.fireEventsap-ui-core.js:126
  18. sap.ui.core.Element.fireEventsap-ui-core.js:126
  19. (anonymous function)sap-ui-core.js:126
  20. sap.ui.ux3.Shell._fireWorksetItemSelectedShell.js:29
  21. sap.ui.ux3.Shell._handleWorksetItemClickShell.js:28
  22. sap.ui.ux3.Shell._handleFacetBarSelectShell.js:27
  23. sap.ui.base.EventProvider.fireEventsap-ui-core.js:126
  24. sap.ui.core.Element.fireEventsap-ui-core.js:126
  25. (anonymous function)sap-ui-core.js:126
  26. sap.ui.ux3.NavigationBar._handleActivationNavigationBar.js:16
  27. sap.ui.ux3.NavigationBar.onclickNavigationBar.js:15
  28. sap.ui.core.Element._callEventHandlessap-ui-core.js:126
  29. sap.ui.core.Element._handleEventsap-ui-core.js:126
  30. sap.ui.core.UIArea._handleEventsap-ui-core.js:126
  31. Q.extend.proxy.f3sap-ui-core.js:18
  32. Q.event.dispatchsap-ui-core.js:18
  33. Q.event.add.i.handle.jsap-ui-core.js:18


my library is 1.16.6.

I create pie chart code:

var _skillCountModel = new sap.ui.model.json.JSONModel();

setTimeout(function() {

_skillCountModel.setData({

modelData : data

});

}, 4000);

var dataset = new sap.viz.ui5.data.FlattenedDataset({

dimensions : [ {

axis : 1,

name : 'TAGNAME',

value : "{TAGNAME}"

} ],

measures : [ {

name : 'COUNT',

value : {

path : 'TAGCOUNT',

formatter : function($) {

return $;

}

}

} ],

data : {

path : "/modelData",

factory : function() {

}

}

});

// "oPieChart",

var oPieChart;

// var oPieChartID = "oPieChart";

// if (sap.ui.getCore().byId(oPieChartID) === undefined)

// {

oPieChart = new sap.viz.ui5.Pie("oPieChart", {

width : "80%",

height : "600px",

plotArea : {

// 'colorPalette' :

// d3.scale.category20().range()

},

/*

* title : { visible : true, text : 'Revenue By

* Country' },

*/

dataset : dataset

});


oPieChart.setModel(_skillCountModel);

var AllTagPiePanel = new sap.ui.commons.Panel(

'AllTagPiePanel',

{

title : new sap.ui.commons.Title(

{

text : "Skill Distribution For All Tags"

})

});

sap.ui.getCore().byId('AllTagPiePanel').addContent(

oPieChart);

sap.ui.getCore().byId('LayoutEngagementR').createRow(

AllTagPiePanel);

Panelright.addContent(allLayout);

Untitled.png (208.0 kB)
Capture.PNG (61.2 kB)
Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

2 Answers

  • author's profile photo Former Member
    Former Member
    Posted on Jan 02, 2014 at 08:55 AM

    the oshell when second time load this page, will not generate new page, just load the old one, like this"oShell.setContent(getContent(key));" get the memory data, but just here load the page with pie chart throw exception"Uncaught TypeError: Cannot call method 'removeChild' of null" Seems viz core issue, how to fixed this problem in my code, this issue is very urgent, impact my project release. could you help me?

    Add a comment
    10|10000 characters needed characters exceeded

    • These are the libraries that I have used..

      <script src="resources/sap-ui-core.js" -- this path might change

      id="sap-ui-bootstrap"

      data-sap-ui-libs="sap.service.visualization,sap.ui.commons,sap.ui.core,sap.ui.table,sap.ui.ux3,sap.viz"

      data-sap-ui-theme="sap_goldreflection" >

      </script>

      <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

  • Posted on Jan 02, 2014 at 09:37 AM

    Hi Heath,

    I am really not an expert, but I can share what I have done during self learning.

    As I Understand, you are facing an issue when you comeback to the page where your pie-chart exists.

    I didn't came across this issue, for me the chart always loads fine whenever I navigate to that page.

    I may not point out the exact issue, but please check whether the below code might help you. This is the only code which i wrote to display my pie-chart.

    http://scn.sap.com/thread/3286039 - SAPUI 5 - Pie-Chart Issue -- I have pasted the code here which worked for me.

    This is the code on the Index.html

    oShell.addWorksetItem(new WI("wi_test",{key : "wi_test", text : "Test"}));

    oShell.attachWorksetItemSelected(selectWorkItem);

    oShell.setContent(getContent("wi_home_guest")); // this is my default page

    oShell.placeAt("shellArea");

    function selectWorkItem(oEvent) {

    var key = oEvent.getParameter("key");

    var oShell = oEvent.oSource;

    oShell.setContent(getContent(key));

    };

    function getContent(key) {

    if (aContent[key]) return aContent[key]; // if content is already created, return it directly

    I don't exactly remember but I guess the above code which i have used to load the content if it is already created

    if (key == "wi_home_cprofile") {

    sap.ui.localResources("projconnectui5");

    aContent[key] = sap.ui.view({id:"idNameConnectui51", viewName:"projconnectui5.NameConnectui5", type:sap.ui.core.mvc.ViewType.JS});

    } else if (key == "wi_home_guest") {

    var layout = new c.layout.MatrixLayout();

    //

    var cell = new c.layout.MatrixLayoutCell({colSpan:2});

    var p3 = new c.Panel().setText("Information");

    p3.addContent(new c.TextView({text:"No Information available."}));

    cell.addContent(p3);

    layout.createRow(cell);

    sap.ui.localResources("projconnectui5");

    aContent[key] = [ sap.ui.view({id:"idNameConnectui50", viewName:"projconnectui5.guest", type:sap.ui.core.mvc.ViewType.JS}),

    layout];

    }

    return this.aContent[key];

    }

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.