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 he is navigated to lineDetails page.
The problem is that graph 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;
}
});