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

[Former Member]

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

[shahid]

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];     

  }

[Former Member]

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?

[Former Member]

I change to another new solution to workaround, but still hava a new issuse. the solution is when I back to this page dont load old data, but create a new page to show this chart. and i also need to add below code and then can show " try { sap.ui.getCore().loadLibrary("sap.ui.commons"); } catch (e) { alert("This test page requires the library 'sap.ui.commons' which is not available."); throw (e); } try { sap.ui.getCore().loadLibrary("sap.ui.table"); } catch (e) { alert("This test page requires the library 'sap.ui.table' which is not available."); throw (e); } try { sap.ui.getCore().loadLibrary("sap.ui.ux3"); } catch (e) { alert("This test page requires the library 'sap.ui.ux3' which is not available."); throw (e); } try { sap.ui.getCore().loadLibrary("sap.viz"); } catch (e) { alert("This test page requires the library 'sap.ui.viz' which is not available."); throw (e); } " but the new issue is when i dispaly this chart againe the Legend can not displayed.

Legend  cannot displayed!!!!! ???????

[shahid]

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