<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Flattened DataSet bound to OData Entity with aggregation</title>
<link rel="stylesheet" type="text/css" href="">
<meta name="description" content="Flattened DataSet bound to OData Entity with aggregation" />
<script id="sap-ui-bootstrap" src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.viz" data-sap-ui-theme="sap_goldreflection">
</script>
<script>
var sURI = 'http://services.odata.org/Northwind/Northwind.svc/';
var oDataModel = new sap.ui.model.odata.ODataModel(sURI, true);
oDataModel.setSizeLimit(10000);
var oJSONModel = new sap.ui.model.json.JSONModel({}, 'jmodel');
// handle list of contexts
var handler = function(oEvent) {
var mapCallback = function(oContext) {
var obj = {};
obj.ProductID = oContext.getObject().ProductID,
obj.Quantity = oContext.getObject().Quantity
return obj;
};
var reduceCallback = function(aPrev, oCurr) {
var aNext = aPrev;
var bFound = false;
aNext.forEach(function(item) {
if (item.ProductID === oCurr.ProductID) {
bFound = true;
item.Quantity += oCurr.Quantity;
}
})
if (bFound === false) {
aNext.push(oCurr);
}
return aNext;
};
//release handler
oBindings.detachChange(handler);
var aTotals = oEvent.oSource.getContexts().map(mapCallback).reduce(reduceCallback, []);
oJSONModel.setData({
'Order_Totals': aTotals
});
};
// Filter all orders by 3 products
var oFilter1 = new sap.ui.model.Filter("ProductID", sap.ui.model.FilterOperator.EQ, '1');
var oFilter2 = new sap.ui.model.Filter("ProductID", sap.ui.model.FilterOperator.EQ, '68');
var oFilter3 = new sap.ui.model.Filter("ProductID", sap.ui.model.FilterOperator.EQ, '11');
var aFilter = [oFilter1, oFilter2, oFilter3];
// Sort by ProductID
var oSorter = new sap.ui.model.Sorter("ProductID", false, true);
// Reduce the returned payload by nominating need fields
var oSelect = {
select: 'ProductID,Quantity'
}
var oBindings = oDataModel.bindList("/Order_Details", null, oSorter, aFilter, oSelect);
// call OData service and handle results
oBindings.attachChange(handler);
oBindings.getContexts();
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
axis: 1,
name: 'ProductID',
value: "{ProductID}"
}],
measures: [{
name: 'Quantity Sold',
value: '{Quantity}'
}],
data: {
path: "/Order_Totals"
}
});
var oColumnChart = new sap.viz.ui5.Column({
width: "80%",
height: "400px",
plotArea: {
'colorPalette': d3.scale.category20().range()
},
title: {
visible: true,
text: 'Qutantity Sold by Product'
},
dataset: oDataset
});
oColumnChart.setModel(oJSONModel);
oColumnChart.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |