Skip to content

Instantly share code, notes, and snippets.

@htammen

htammen/index.html

Last active May 18, 2017 10:40
Show Gist options
  • Save htammen/dff4a49d37a41094ebb573a6bb29f6f9 to your computer and use it in GitHub Desktop.
Save htammen/dff4a49d37a41094ebb573a6bb29f6f9 to your computer and use it in GitHub Desktop.
Download ZIP
sap.viz.ui5 example
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="sapui5/xmlview" id="view1">
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:viz="sap.viz.ui5.controls" controllerName="view1">
<IconTabBar>
<items>
<IconTabFilter text="Overview">
<viz:VizFrame
id="idDonutChartPriority1"
height="500px"
width="100%"></viz:VizFrame>
</IconTabFilter>
</items>
</IconTabBar>
</mvc:View>
</script>
</head>
<body id="body">
<script id="jsbin-javascript">
sap.ui.core.mvc.Controller.extend("view1",{
onInit:function(){
var oModel = new sap.ui.model.json.JSONModel({
"milk": [{
"Store Name": "24-Seven",
"Revenue": 428214.13,
"Cost": 94383.52,
"Consumption": 76855.15368
},
{
"Store Name": "A&A",
"Revenue": 1722148.36,
"Cost": 274735.17,
"Consumption": 310292.22
},
{
"Store Name": "Alexei's Specialities",
"Revenue": 1331176.706884,
"Cost": 233160.58,
"Consumption": 143432.18
},
{
"Store Name": "BC Market",
"Revenue": 1878466.82,
"Cost": 235072.19,
"Consumption": 487910.26
},
{
"Store Name": "Choices Franchise 1",
"Revenue": 3326251.94,
"Cost": 582543.16,
"Consumption": 267185.27
},
{
"Store Name": "Choices Franchise 3",
"Revenue": 2090030.97,
"Cost": 397952.77,
"Consumption": 304964.8856125
},
{
"Store Name": "Choices Franchise 6",
"Revenue": 1932991.59,
"Cost": 343427.25,
"Consumption": 291191.83
},
{
"Store Name": "Dairy World",
"Revenue": 752565.16,
"Cost": 115844.26,
"Consumption": 98268.9597904
},
{
"Store Name": "Delikatessen",
"Revenue": 1394072.66,
"Cost": 263180.86,
"Consumption": 176502.5521223
},
{
"Store Name": "Donald's Market",
"Revenue": 3308333.872944,
"Cost": 611658.59,
"Consumption": 538515.47632832
}]
});
var oVizFrame1 = this.getView().byId("idDonutChartPriority1");
this.setupVizFrame(oVizFrame1, oModel);
},
setupVizFrame:function(oVizFrame, oModel){
oVizFrame.setVizType('donut');
oVizFrame.setUiConfig({
"applicationSet": "fiori"
});
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: "Store Name",
value: "{Store Name}"
}],
measures: [{
name: 'Revenue',
value: '{Revenue}'
}],
data: {
path: "/milk"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
var feedSize = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "size",
'type': "Measure",
'values': ["Revenue"]
}),
feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "color",
'type': "Dimension",
'values': ["Store Name"]
});
oVizFrame.addFeed(feedSize);
oVizFrame.addFeed(feedColor);
}
});
sap.ui.xmlview({viewContent:$("#view1").html()}).placeAt("body");
</script>
<script id="jsbin-source-javascript" type="text/javascript">sap.ui.core.mvc.Controller.extend("view1",{
onInit:function(){
var oModel = new sap.ui.model.json.JSONModel({
"milk": [{
"Store Name": "24-Seven",
"Revenue": 428214.13,
"Cost": 94383.52,
"Consumption": 76855.15368
},
{
"Store Name": "A&A",
"Revenue": 1722148.36,
"Cost": 274735.17,
"Consumption": 310292.22
},
{
"Store Name": "Alexei's Specialities",
"Revenue": 1331176.706884,
"Cost": 233160.58,
"Consumption": 143432.18
},
{
"Store Name": "BC Market",
"Revenue": 1878466.82,
"Cost": 235072.19,
"Consumption": 487910.26
},
{
"Store Name": "Choices Franchise 1",
"Revenue": 3326251.94,
"Cost": 582543.16,
"Consumption": 267185.27
},
{
"Store Name": "Choices Franchise 3",
"Revenue": 2090030.97,
"Cost": 397952.77,
"Consumption": 304964.8856125
},
{
"Store Name": "Choices Franchise 6",
"Revenue": 1932991.59,
"Cost": 343427.25,
"Consumption": 291191.83
},
{
"Store Name": "Dairy World",
"Revenue": 752565.16,
"Cost": 115844.26,
"Consumption": 98268.9597904
},
{
"Store Name": "Delikatessen",
"Revenue": 1394072.66,
"Cost": 263180.86,
"Consumption": 176502.5521223
},
{
"Store Name": "Donald's Market",
"Revenue": 3308333.872944,
"Cost": 611658.59,
"Consumption": 538515.47632832
}]
});
var oVizFrame1 = this.getView().byId("idDonutChartPriority1");
this.setupVizFrame(oVizFrame1, oModel);
},
setupVizFrame:function(oVizFrame, oModel){
oVizFrame.setVizType('donut');
oVizFrame.setUiConfig({
"applicationSet": "fiori"
});
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: "Store Name",
value: "{Store Name}"
}],
measures: [{
name: 'Revenue',
value: '{Revenue}'
}],
data: {
path: "/milk"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
var feedSize = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "size",
'type': "Measure",
'values': ["Revenue"]
}),
feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "color",
'type': "Dimension",
'values': ["Store Name"]
});
oVizFrame.addFeed(feedSize);
oVizFrame.addFeed(feedColor);
}
});
sap.ui.xmlview({viewContent:$("#view1").html()}).placeAt("body");</script></body>
</html>
Raw
jsbin.untitled.js
sap.ui.core.mvc.Controller.extend("view1",{
onInit:function(){
var oModel = new sap.ui.model.json.JSONModel({
"milk": [{
"Store Name": "24-Seven",
"Revenue": 428214.13,
"Cost": 94383.52,
"Consumption": 76855.15368
},
{
"Store Name": "A&A",
"Revenue": 1722148.36,
"Cost": 274735.17,
"Consumption": 310292.22
},
{
"Store Name": "Alexei's Specialities",
"Revenue": 1331176.706884,
"Cost": 233160.58,
"Consumption": 143432.18
},
{
"Store Name": "BC Market",
"Revenue": 1878466.82,
"Cost": 235072.19,
"Consumption": 487910.26
},
{
"Store Name": "Choices Franchise 1",
"Revenue": 3326251.94,
"Cost": 582543.16,
"Consumption": 267185.27
},
{
"Store Name": "Choices Franchise 3",
"Revenue": 2090030.97,
"Cost": 397952.77,
"Consumption": 304964.8856125
},
{
"Store Name": "Choices Franchise 6",
"Revenue": 1932991.59,
"Cost": 343427.25,
"Consumption": 291191.83
},
{
"Store Name": "Dairy World",
"Revenue": 752565.16,
"Cost": 115844.26,
"Consumption": 98268.9597904
},
{
"Store Name": "Delikatessen",
"Revenue": 1394072.66,
"Cost": 263180.86,
"Consumption": 176502.5521223
},
{
"Store Name": "Donald's Market",
"Revenue": 3308333.872944,
"Cost": 611658.59,
"Consumption": 538515.47632832
}]
});
var oVizFrame1 = this.getView().byId("idDonutChartPriority1");
this.setupVizFrame(oVizFrame1, oModel);
},
setupVizFrame:function(oVizFrame, oModel){
oVizFrame.setVizType('donut');
oVizFrame.setUiConfig({
"applicationSet": "fiori"
});
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: "Store Name",
value: "{Store Name}"
}],
measures: [{
name: 'Revenue',
value: '{Revenue}'
}],
data: {
path: "/milk"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
var feedSize = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "size",
'type': "Measure",
'values': ["Revenue"]
}),
feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "color",
'type': "Dimension",
'values': ["Store Name"]
});
oVizFrame.addFeed(feedSize);
oVizFrame.addFeed(feedColor);
}
});
sap.ui.xmlview({viewContent:$("#view1").html()}).placeAt("body");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment