Graph not loaded on navigating to another detail page

Question

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;

Answer 1

Hi,
Use the following code for navigation from one iview to another:
WDPortalNavigation.navigateAbsolute(
"ROLES:portal_content/com.cv.kaar.Test_Page2",
WDPortalNavigationMode.SHOW_INPLACE,
(String) null,
(String) null,
WDPortalNavigationHistoryMode.NO_DUPLICATIONS,
(String) null,
(String) null,
"Name=" + wdContext.currentContextElement().getName());
You have other options too like, External Window etc. other than the SHOW_INPLACE.
The last line of the above coding is used for passing parameter to another iView.
Give the right path of the iview PCD path, omitting pcd:
Hope this helps.
Regards,
Srinivasan T
<b>Helpful answers=>points</b>