Graph not loaded on navigating to another detail page
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;
}
});