vizFrame Demo

Demo render duplicated dataset on vizFrame

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 = "Dual Axis"> </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 oVizFrame = new sap.viz.ui5.controls.VizFrame({
          'width': '100%',
          'height': '600px',
          'vizType' : 'column'
        });
        
        var oData = {
            data: [{
                Region: "North",
                ProductID: "00112",
                Revenue: 400,
                Sales: 33                
            }, {
                Region: "Wes",
                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);
        // some dummy data:
 
        // set complete model 
				
        // now make dual chart on /data for Sales and Revenue:
        var dataset = new sap.viz.ui5.data.FlattenedDataset({
            dimensions: [
                {name: 'Region', value: "{ProductID}", displayValue: "{Region}"}
            ],
            measures: [
                {name: 'Sales', value: '{Sales}'},
                {name: 'Revenue', value: '{Revenue}'}
            ],
            data: {path: "/data"}
        });
        oVizFrame.setDataset(dataset);
        oVizFrame.setModel(oJsonModel);
        var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
    ...