Graph not loaded on navigating to another detail page

[Former Member]

Folder Structure :

webcontent

index.html

    view

      -lineDetails.controller.js

      -lineDetails.view.js

      -lineStatus.controller.js

      -lineStatus.view.js

      -MainApp.view.js

      -MainApp.controller.js

      -MasterPage.controller.js

      -MasterPage.view.js

I've a splitapp consisting of a masterpage - MasterPage and two detail page - lineStatus & lineDetails.

there is a table in lineStatus page and a line graph in lineDetails page,

when one clicks on show graph in table user is navigated to lineDetails page.

The problem is that graph in lineDetails page is not visible, though <div> for graph is created.

If I load lineDetails page first(where the graph is), then everything works fine and graph is visible.

Code :

Adding a column to table.

var oColumn4 = new sap.ui.table.Column({

         label: new sap.ui.commons.Label({text: ""}),

         template: new sap.ui.commons.Link({text:"show graph",press:function(){

          splitapp.toDetail("lineDetails");

         }}),

         width: "25%"

  });

Adding a graph to the page and returning it.

createContent : function(oController) {

  oModelLineDetail = new sap.ui.model.json.JSONModel({

  businessData1 : [

  {Time :"1:00",Level:10},

  {Time :"2:00",Level:10.5},

  {Time :"3:00",Level:9.5},

  {Time :"4:00",Level:4},

  {Time :"5:00",Level:9.6},

  {Time :"6:00",Level:10.1}

  ]

  });

  oDatasetLine = new sap.viz.ui5.data.FlattenedDataset({

    // a Bar Chart requires exactly one dimension (x-axis)

    dimensions : [

    {

    axis : 1, // must be one for the x-axis, 2 for y-axis

    name : 'Time',

    value : "{Time}"

    }

    ],

    // it can show multiple measures, each results in a new set of bars in a new color

    measures : [

       // measure 1

    {

    name : 'Oil level', // 'name' is used as label in the Legend

    value : '{Level}' // 'value' defines the binding for the displayed value 

    }

    ],

    // 'data' is used to bind the whole data collection that is to be displayed in the chart

    data : {

    path : "/businessData1"

    },

    });

  oLineChart = new sap.viz.ui5.Line({

    width : "80%",

    height : "300px",

    plotArea : {

    'colorPalette' : d3.scale.category20().range()

    },

    xAxis : {

                isIndependentMode : false,

                title : new sap.viz.ui5.types.Axis_title({text: 'Time', visible: true})

    },

    yAxis : {

                isIndependentMode : false,

                title : new sap.viz.ui5.types.Axis_title({visible: true})

    }

    });

  oTextView = new sap.ui.commons.TextView({

  text: "Line Speed",

  tooltip:"Line Speed",

  //width: "100%",

  design: sap.ui.commons.TextViewDesign.H1

  }).addStyleClass("lineDetHeader");

  oLineChart.setModel(oModelLineDetail);

  oLineChart.setDataset(oDatasetLine);

  var btn = new sap.ui.commons.Button({text:"button",press:function(){location.reload();}});

  lineDetPage = new sap.m.Page({

  title: "Line varaible details",

  showNavButton:true,

  navButtonPress : function(){splitapp.toDetail("lineStatus");},

  content: [oTextView,oLineChart,btn]

  });

  return lineDetPage;

  }

});

[former_member293565]

Hi, Siddharth.

Doubt, whether the problem is same, but when i APP.TO("Page2"), my chart is not showing.

So in Controller i added implementation for onAfterRendering event and it worked out.

onAfterRendering: function(){

  sap.ui.getCore().byId('oChart1').getGeneral();

}