Skip to content

Instantly share code, notes, and snippets.

@ikiw

ikiw/vizFramePie.js

Created July 17, 2015 13:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ikiw/5b2879f71b225c1a4945 to your computer and use it in GitHub Desktop.
Save ikiw/5b2879f71b225c1a4945 to your computer and use it in GitHub Desktop.
Download ZIP
viz frame pie chart xml view
Raw
vizFramePie.js
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>test</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='/sapui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-xx-bindingSyntax='complex'
data-sap-ui-libs='sap.ui.commons,sap.m,sap.viz'></script>
<!-- add 'sap.ui.table' and/or other libraries if required -->
<script id="myxml" type="text/xmldata">
<core:View xmlns:core="sap.ui.core" xmlns:viz="sap.viz.ui5.controls"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
xmlns:viz.data="sap.viz.ui5.data" xmlns="sap.m"
controllerName="my.own.controller" >
<App>
<Page title="SAPUI5 App">
<viz:VizFrame id="DueDateGridFrame" vizType="info/pie" uiConfig="{applicationSet:'fiori'}" vizProperties="{plotArea:{dataLabel:{visible: true}}}">
<viz:dataset>
<viz.data:FlattenedDataset data="{/businessData}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="GroupType" value="{GROUP_TYPE}" displayValue="{DISPLAY_NAME}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition value="{GROUP_VOLUME}" name="RECORDS" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="size" type="Measure" values="RECORDS" />
<viz.feeds:FeedItem uid="color" type="Dimension" values="GroupType" />
</viz:feeds>
</viz:VizFrame>
<viz:Popover id="vizPopover"></viz:Popover>
</Page>
</App>
</core:View>
</script>
<script>
sap.ui.controller("my.own.controller", {
onInit: function() {
var oData = {
"businessData":[
{"GROUP_TYPE": "PIECE_1", "GROUP_VOLUME": 1, "DISPLAY_NAME": "Pie Piece 1"},
{"GROUP_TYPE": "PIECE_2", "GROUP_VOLUME": 2, "DISPLAY_NAME": "Pie Piece 2"},
{"GROUP_TYPE": "PIECE_N", "GROUP_VOLUME": 10, "DISPLAY_NAME": "Pie Piece N"}
]
};
var oModel = new sap.ui.model.json.JSONModel(oData);
this.getView().setModel(oModel);
var oVizFrame = this.byId('DueDateGridFrame');
var oVizPopover = this.byId('vizPopover');
//console.log(oVizPopover)
oVizPopover.connect(oVizFrame.getVizUid());
}
});
sap.ui.view({ viewContent:document.scripts.myxml.innerText, type:sap.ui.core.mvc.ViewType.XML }).placeAt("content");
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment