VIEW.JS
sap.ui.jsview("chart5.chart5", {
getControllerName : function() {
return "chart5.chart5";
},
createContent : function(oController) {
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}
]
});
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"
}
});
var oBarChart = new sap.viz.ui5.Bar({
/*width : "50%",
height : "400px",*/
plotArea : {
},
title : {
visible : true,
text : 'Profit and Revenue By Country'
},
dataset : oDataset
});
oBarChart.setModel(oModel);
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}
]
});
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{
axis : 1,
name : 'Country',
value : "{Country}"
}
],
measures : [
{
name : 'Profit',
value : '{profit}'
}
],
data : {
path : "/businessData"
}
});
var oBarChart1 = new sap.viz.ui5.Bar({
/*width : "50%",
height : "400px",*/
plotArea : {
},
title : {
visible : true,
text : 'Profit and Revenue By Country'
},
dataset : oDataset
});
oBarChart1.setModel(oModel);
/*var HBox1 = new sap.m.HBox("Vbox2", {
items:[
oBarChart,oBarChart1
]
});*/
var oLayout = new sap.ui.commons.layout.MatrixLayout({
id : "matrix1",
layoutFixed : false,
columns : 2,
width : "100%",
widths : [ "50%", "50%"]
});
oLayout.createRow(oBarChart, oBarChart1);
var Vbox = new sap.m.VBox({
id:"vbox11",
items:[
new sap.m.Label({
id:"lb10",
text:" 1999 profit 117"
}),
new sap.m.Label({
id:"lb11",
text:" 1996 revenue profit "
}),
]
});
var oModel = new sap.ui.model.json.JSONModel({
businessData : [
{Year :"1995",revenue:410.87,profit:-141.25, population:34789000},
{Year :"1996",revenue:338.29,profit:133.82, population:1339724852},
{Year :"1997",revenue:487.66,profit:348.76, population:65350000},
{Year :"1998",revenue:470.23,profit:217.29, population:81799600},
{Year :"1999",revenue:170.93,profit:117.00, population:1210193422},
{Year :"2000",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({
// a Bar Chart requires exactly one dimension (x-axis)
dimensions : [
{
axis : 1, // must be one for the x-axis, 2 for y-axis
name : 'Year',
value : "{Year}"
}
],
// it can show multiple measures, each results in a new set of bars in a new color
measures : [
// measure 1
{
name : 'Profit', // 'name' is used as label in the Legend
value : '{profit}' // 'value' defines the binding for the displayed value
},
{
name : 'Revenue',
value : '{revenue}'
}
],
// 'data' is used to bind the whole data collection that is to be displayed in the chart
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 oChart = new sap.viz.ui5.Line({
width : "80%",
height : "400px",
plotArea : {
//'colorPalette' : d3.scale.category20().range()
},
title : {
visible : true,
text : 'Profit and Revenue By Country'
},
dataset : oDataset
});
// attach the model to the chart and display it
oChart.setModel(oModel);
var Vbox1a = new sap.m.VBox({
id:"vbox12",
items:[
Vbox,oChart
]
});
var Vbox = new sap.m.VBox({
id:"vbox1",
items:[
new sap.m.Label({
id:"lb0",
text:" 1995 no profit"
}),
new sap.m.Label({
id:"lb1",
text:" 1996 is profit "
}),
]
});
var oModel = new sap.ui.model.json.JSONModel({
businessData : [
{Year :"1995",revenue:410.87,profit:-141.25, population:34789000},
{Year :"1996",revenue:338.29,profit:133.82, population:1339724852},
{Year :"1997",revenue:487.66,profit:348.76, population:65350000},
{Year :"1998",revenue:470.23,profit:217.29, population:81799600},
{Year :"1999",revenue:170.93,profit:117.00, population:1210193422},
{Year :"2000",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({
// a Bar Chart requires exactly one dimension (x-axis)
dimensions : [
{
axis : 1, // must be one for the x-axis, 2 for y-axis
name : 'Year',
value : "{Year}"
}
],
// it can show multiple measures, each results in a new set of bars in a new color
measures : [
// measure 1
{
name : 'Profit', // 'name' is used as label in the Legend
value : '{profit}' // '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 : "/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 oChart = new sap.viz.ui5.Line({
width : "80%",
height : "400px",
plotArea : {
//'colorPalette' : d3.scale.category20().range()
},
title : {
visible : true,
text : 'Profit and Revenue By Country'
},
dataset : oDataset
});
// attach the model to the chart and display it
oChart.setModel(oModel);
var Vboxa = new sap.m.VBox({
id:"vbox2",
items:[
Vbox,oChart
]
});
var oLayout1 = new sap.ui.commons.layout.MatrixLayout({
id : "matrix12",
layoutFixed : false,
columns : 2,
width : "100%",
widths : [ "50%", "50%"]
});
oLayout.createRow(Vbox1a, Vboxa);
return new sap.m.Page({
title: "Title",
content: [
oLayout,oLayout1
]
});
}
});
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("chart5");
var app = new sap.m.App({initialPage:"idchart51"});
var page = sap.ui.view({id:"idchart51", viewName:"chart5.chart5", 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>
OUTPUT
