Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<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

Dismiss x
public
Bin info
jasper07pro
0viewers