index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.viz,sap.ui.layout,sap.ui.table,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("vizframe");
var app = new sap.m.App({initialPage:"idvizframe1"});
var page = sap.ui.view({id:"idvizframe1", viewName:"vizframe.vizframe", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
vizframe.view.js:
sap.ui.jsview("vizframe.vizframe", {
getControllerName : function() {
return "vizframe.vizframe";
},
createContent : function(oController) {
// some business data
var oModel = new sap.ui.model.json.JSONModel({
businessData : [
{Country :"Canada",revenue:410.87,profit:-141.25, population:34789000},
{Country :"China",revenue:338.29,profit:133.82, population:1339724852},
{Country :"France",revenue:487.66,profit:348.76, population:65350000},
{Country :"Germany",revenue:470.23,profit:217.29, population:81799600},
{Country :"India",revenue:170.93,profit:117.00, population:1210193422},
{Country :"United States",revenue:905.08,profit:609.16, population:313490000}
]
});
// A Dataset defines how the model data is mapped to the chart
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [{axis : 1, name : 'Country', value : "{Country}"}],
measures : [
{name : 'Profit', value : '{profit}'},
{name : 'Revenue', value : '{revenue}'}
],
data : {path : "/businessData"}
});
// create a Bar chart
// you also might use Combination, Line, StackedColumn100, StackedColumn or Column
// for Donut and Pie please remove one of the two measures in the above Dataset.
var oVizFrame = new sap.viz.ui5.controls.VizFrame({
'width': '90%',
'height': '400px',
'vizType' : 'stacked_column',
dataset: oDataset
});
oVizFrame.setModel(oModel)
var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid' : "valueAxis",
'type' : "Measure",
'values' : ["Profit", "Revenue"]
}), feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid' : "categoryAxis",
'type' : "Dimension",
'values' : ["Country"]
});
oVizFrame.addFeed(feedPrimaryValues);
oVizFrame.addFeed(feedAxisLabels);
return new sap.m.Page({
title: "Title",
content: [
oVizFrame
]
});
}
});
output:
No comments:
Post a Comment