sap-viz.js DEMO

sap-viz.js DEMO render duplicated data rows

by Gabriel de Souza

HTML

<script id='sap-ui-bootstrap' type='text/javascript' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs="sap.m, sap.viz" data-sap-ui-theme="sap_bluecrystal">
    
</script>
<script id="myXml" type="text/xmldata">
    <mvc:View xmlns:core = "sap.ui.core"
    xmlns:mvc = "sap.ui.core.mvc"
    xmlns = "sap.m"
    controllerName = "myController"
    displayBlock = "true" > <App> <Page id = "p"
    title = "Sales and Revenue By Region"> </Page>
	  </App> </mvc:View>
</script>
<body class='sapUiBody'>
    <div id='content'></div>
</body>

JavaScript

sap.ui.controller("myController", {
    onInit: function () {

        this.oPage = this.byId("p");
        var oData = {        
            data: [{
                Region: "North",
                ProductID: "00112",
                Revenue: 400,
                Sales: 33                
            }, {
                Region: "North",
                ProductID: "00223",
                Revenue: 300,
                Sales: 35                
            }, {
                Region: "North",
                ProductID: "00124",
                Revenue: 213,
                Sales: 23                
            }, {
                Region: "North",
                ProductID: "00225",
                Revenue: 500,
                Sales: 33                
            }, {
                Region: "East",
                ProductID: "00113",
                Revenue: 600,
                Sales: 67                
            }, {
                Region: "East",
                ProductID: "00452",
                Revenue: 700,
                Sales: 90                
            }]
        };

        var oJsonModel = new sap.ui.model.json.JSONModel(oData);
        // set complete model 
        this.oPage.setModel(oJsonModel);

        // now make dual chart on /data for Sales and Revenue:
        var dataset = new sap.viz.ui5.data.FlattenedDataset({
            dimensions: [{
                axis: 1,
                name: 'Region',
                value: "{Region}"
            },{
                axis: 1,
                name: 'ProductID',
                value: "{ProductID}"
            }],
            measures: [{
                group: 1,
                name: 'Sales',
                value: '{Sales}'
            }, {
                group: 1,
                name: 'Revenue',
                value: '{Revenue}'
            }],
            data: {
                path: "/data"
            }
        });
        var combination = new sap.viz.ui5.Column({
           ...