Hello,
we have a problem creating a chart(sap.viz.ui5.Line) on a second page(sap.m.Page) of an app(sap.m.App).
I'm using the same JS function to create the chart on both pages. On page 1 it is rendered correctly and on page 2 it is not displayed. The problem occurs on the demo content.
Please advise!
Code
Chart on page 1:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>SAPUI5 Mobile Sample</title>
<style type="text/css">
</style>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.viz"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-core="sap.ui.core">
</script>
<script>
function createChart(){
var chart = new sap.viz.ui5.Line({
id:"priceChart"
});
var atrasJSON = new sap.ui.model.json.JSONModel({
data:[
{Date:"20140101", Value:"120"},
{Date:"20140201", Value:"100"},
{Date:"20140301", Value:"110"},
{Date:"20140401", Value:"130"},
{Date:"20140501", Value:"140"}
]
});
var atrasDataSet = new sap.viz.ui5.data.FlattenedDataset({
dimensions:[
{axis: 1, name:'Date', value:"{Date}"}
],
measures:[
{name:"Price",value:"{Value}"}
],
data:{path:"/data"}
});
atrasDataSet.setModel(atrasJSON);
chart.setDataset(atrasDataSet);
return chart;
}
</script>
<script>
var oApp = new sap.m.App("myApp", {initialPage:"page1"}),
// page
oPage1 = new sap.m.Page({
id: "page1",
title: "Chart",
enableScrolling: false
});
var but = new sap.m.Button({id: "but", text: "topage2" });
but.attachPress( function(){oApp.to("page2") } );
oPage1.addContent(but).addContent( createChart());
oPage2 = new sap.m.Page({
id: "page2",
title: "Chart",
enableScrolling: false
});
oApp.addPage(oPage1).addPage(oPage2);
oApp.placeAt("body");
</script>
</head>
<body id="body" class="sapUiBody"></body>
</html>
Chart on page 2:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>SAPUI5 Mobile Sample</title>
<style type="text/css">
</style>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.viz"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-core="sap.ui.core">
</script>
<script>
function createChart(){
var chart = new sap.viz.ui5.Line({
id:"priceChart"
});
var atrasJSON = new sap.ui.model.json.JSONModel({
data:[
{Date:"20140101", Value:"120"},
{Date:"20140201", Value:"100"},
{Date:"20140301", Value:"110"},
{Date:"20140401", Value:"130"},
{Date:"20140501", Value:"140"}
]
});
var atrasDataSet = new sap.viz.ui5.data.FlattenedDataset({
dimensions:[
{axis: 1, name:'Date', value:"{Date}"}
],
measures:[
{name:"Price",value:"{Value}"}
],
data:{path:"/data"}
});
atrasDataSet.setModel(atrasJSON);
chart.setDataset(atrasDataSet);
return chart;
}
</script>
<script>
var oApp = new sap.m.App("myApp", {initialPage:"page1"}),
oPage1 = new sap.m.Page({
id: "page1",
title: "",
enableScrolling: false
});
var but = new sap.m.Button({id: "but", text: "topage2" });
but.attachPress( function(){oApp.to("page2") } );
oPage1.addContent(but);
oPage2 = new sap.m.Page({
id: "page2",
title: "",
enableScrolling: false
});
oPage2.addContent(createChart());
oApp.addPage(oPage1).addPage(oPage2);
oApp.placeAt("body");
</script>
</head>
<body id="body" class="sapUiBody"></body>
</html>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.