Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
    <meta name="description" content="UI5 MVC example with JS view" />
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
​
    <title>MVC in 22 Seconds Example</title>
​
    <!-- Load UI5, select gold reflection theme and the "commons" control library -->
    <script id='sap-ui-bootstrap' type='text/javascript' 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'></script>
​
    <script>
        /*** DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES ***/
​
        // define a new (simple) Controller type
        sap.ui.controller("my.own.controller", {
​
            onInit: function() {
                var oModel = new sap.ui.model.json.JSONModel({
                    book: [{
                        "City": "New York ",
                        "Cost": 295584.81,
                        "Item Category": "Action Movies",
                        "Profit": 173793.31,
                        "Revenue": 469378.12,
                        "Unit Price": 1240.79,
                        "Units Available": 17336,
                        "Units Sold": 57571
                    }, {
                        "City": "New York ",
                        "Cost": 115132.04,
                        "Item Category": "Audio Equipment",
                        "Profit": 56994.34,
                        "Revenue": 172126.37,
                        "Unit Price": 763.21,
                        "Units Available": 11248,
                        "Units Sold": 37303
                    }, {
                        "City": "New York ",
                        "Cost": 171742.42,
                        "Item Category": "Cameras",
                        "Profit": 81093.4,
                        "Revenue": 252835.82,
                        "Unit Price": 1143.57,
                        "Units Available": 14917,
                        "Units Sold": 51664
                    }, {
                        "City": "New York ",
                        "Cost": 331033.94,
                        "Item Category": "Comedy Movies",
                        "Profit": 150465.23,
                        "Revenue": 481499.18,
                        "Unit Price": 2268.02,
                        "Units Available": 22449,
                        "Units Sold": 69005
                    }]
                });
                this.getView().setModel(oModel);
            }
        });
​
​
        // define a new (simple) View type
        // ...alternatively this can be done in an XML file without JavaScript!
        sap.ui.jsview("my.own.view", {
​
            // define the (default) controller type for this View
            getControllerName: function() {
                return "my.own.controller";
            },
​
            // defines the UI of this View
            createContent: function(oController) {
                // button text is bound to Model, "press" action is bound to Controller's event handler
                // create a VizFrame
                var oVizFrame = new sap.viz.ui5.controls.VizFrame({
                    'uiConfig': {
                        'applicationSet': 'fiori'
                    },
                    'vizType': 'dual_bar'
                });
​
​
​
                var oDataset = new sap.viz.ui5.data.FlattenedDataset({
                    dimensions: [{
                        name: 'Item Category',
                        value: "{Item Category}"
                    }],
                    measures: [{
                        name: 'Revenue',
                        value: '{Revenue}'
                    }, {
                        name: 'Units Available',
                        value: '{Units Available}'
                    }, ],
                    data: {
                        path: "/book"
                    }
                });
                oVizFrame.setVizProperties({
                    plotArea: {
                        dataLabel: {
                            visible: true
                        },
                        secondaryScale: {
                            fixedRange: true,
                            minValue: 0,
                            maxValue: 30000
                        }
                    }
                });
​
                oVizFrame.setDataset(oDataset);
                oVizFrame.setModel(this.getModel());
​
                var feedValuesAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
                    'uid': "valueAxis",
                    'type': "Measure",
                    'values': ["Revenue"]
                });
                var feedValuesAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
                    'uid': "valueAxis2",
                    'type': "Measure",
                    'values': ["Units Available"]
                });
​
                var feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem({
                    'uid': "categoryAxis",
                    'type': "Dimension",
                    'values': ["Item Category"]
                });
​
​
                oVizFrame.addFeed(feedValuesAxis1);
                oVizFrame.addFeed(feedValuesAxis2);
                oVizFrame.addFeed(feedAxisLabels);
                return oVizFrame;
            }
        });
​
​
        // instantiate the View
        var myView = sap.ui.view({
            type: sap.ui.core.mvc.ViewType.JS,
            viewName: "my.own.view"
        });
​
        // put the View onto the screen
        myView.placeAt('content');
    </script>
​
</head>
​
<body class='sapUiBody'>
    <div id='content'></div>
</body>
​
</html>
 
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers