<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.viz"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"sap.ui.demo.chart": "./"
}'>
</script>
<script>
new sap.m.Shell("ShellId",{title: "Model Demo",
showLogout: false,
app: new sap.ui.core.ComponentContainer({
name: "sap.ui.demo.chart"
})
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
// Code goes here
/* Styles go here */
jQuery.sap.declare("sap.ui.demo.chart.Component");
sap.ui.core.UIComponent.extend("sap.ui.demo.chart.Component", {
createContent : function () {
// create root view
var oView = sap.ui.view({
id : "app",
viewName : "sap.ui.demo.chart.ChartHome",
type : "JS",
});
var aData = [
{country : 'China', product : 'Car', profit : 32},
{country : 'France', product : 'Car', profit : 43},
{country : 'Germany', product : 'Car', profit : 34},
{country : 'USA', product : 'Car', profit : 25},
{country : 'China', product : 'Truck', profit : 78},
{country : 'France', product : 'Truck', profit : 86},
{country : 'Germany', product : 'Truck', profit : 56},
{country : 'USA', product : 'Truck', profit : 76},
{country : 'China', product : 'Motorcycle', profit : 78},
{country : 'France', product : 'Motorcycle', profit : 86},
{country : 'Germany', product : 'Motorcycle', profit : 56},
{country : 'USA', product : 'Motorcycle', profit : 76},
{country : 'China', product : 'Bicycle', profit : 78},
{country : 'France', product : 'Bicycle', profit : 86},
{country : 'Germany', product : 'Bicycle', profit : 56},
{country : 'USA', product : 'Bicycle', profit : 76}
];
var model = new sap.ui.model.json.JSONModel();
model.setData({
modelData: {
profitData : []
}
});
oView.setModel(model);
oView.getModel().setProperty("/modelData/profitData", aData);
return oView;
}
});
sap.ui.jsview("sap.ui.demo.chart.ChartHome", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf routingdemo.App
*/
getControllerName : function() {
return "sap.ui.demo.chart.ChartHome";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf routingdemo.App
*/
createContent : function(oController) {
this.setDisplayBlock(true);
this.app = new sap.m.App("mainApp",{initialPage:"FirstChartPage"});
var page = sap.ui.xmlview("FirstChartPage", "sap.ui.demo.chart.FirstChartPage");
this.app.addPage(page);
return this.app;
}
});
sap.ui.controller("sap.ui.demo.chart.ChartHome", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zui5_sample.Home
*/
// onInit: function() {
//
// },
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf zui5_sample.Home
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf zui5_sample.Home
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf zui5_sample.Home
*/
// onExit: function() {
//
// }
});
<mvc:View
controllerName="sap.ui.demo.chart.FirstChartPage"
xmlns:viz="sap.viz.ui5"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page
title="Stacked Column Chart"
class="marginBoxContent" >
<content>
<viz:StackedColumn id = "oStack" width="100%" height="500px" selectData="onSelect"/>
</content>
</Page>
</mvc:View>
sap.ui.controller("sap.ui.demo.chart.FirstChartPage", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zui5_sample.Home
*/
onInit: function() {
},
onBeforeRendering:function(){
},
onAfterRendering: function(){
var oStackedChart = this.getView().byId("oStack");
var dataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{ axis : 1, name : 'Product', value : "{product}" },
{ axis : 2, name : 'Country', value : "{country}" }
],
measures : [
{ name : 'Profit', value : '{profit}' }
]
}).bindData("/modelData/profitData", null, null, []);
oStackedChart.setDataset(dataset);
},
onSelect: function(oEvent){
var dataPointIndex = oEvent.getParameter("data")[0].data[0].ctx.path.dii_a1;
var stackIndex = oEvent.getParameter("data")[0].data[0].ctx.path.dii_a2;
var dataIndex = (2*dataPointIndex+stackIndex)+2*dataPointIndex;
var oSelectData = this.getView().getModel().getProperty("/modelData/profitData/"+dataIndex);
var oModel = this.getView().getModel().getProperty("/modelData/selectedData");
if(!oModel){
var oModel = [];
oModel.push(oSelectData);
}
else{
oModel.push(oSelectData);
}
this.getView().getModel().setProperty("/modelData/selectedData", oModel);
var app = sap.ui.getCore().byId("mainApp");
var page = app.getPage("SecondChartPage");
if(page === null )
{
var page = new sap.ui.xmlview("SecondChartPage", "sap.ui.demo.chart.SecondChartPage");
app.addPage(page);
}
app.to(page,"slide",{});
}
});
<mvc:View
controllerName="sap.ui.demo.chart.SecondChartPage"
xmlns:viz="sap.viz.ui5"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page
title="Column Chart with SelectedValues"
showNavButton="true"
navButtonPress="onPress"
class="marginBoxContent" >
<content>
<viz:Column id = "oColumn" width="100%" height="500px" />
</content>
</Page>
</mvc:View>
sap.ui.controller("sap.ui.demo.chart.SecondChartPage", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zui5_sample.Home
*/
onInit: function() {
},
onAfterRendering: function(){
var oColumnChart = this.getView().byId("oColumn");
var dataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{ axis : 1, name : 'Product', value : "{product}" },
{ axis : 2, name : 'Country', value : "{country}" }
],
measures : [
{ name : 'Profit', value : '{profit}' }
]
}).bindData("/modelData/selectedData", null, null, []);
oColumnChart.setDataset(dataset);
},
onPress: function(){
var app = sap.ui.getCore().byId("mainApp");
app.back();
var oStack = sap.ui.getCore().byId("FirstChartPage--oStack");
oStack.rerender();
}
});