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 = "Pie"> 
            </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 popoverProps = {};
        var chartPopover = new sap.viz.ui5.controls.Popover(popoverProps);

        var oVizFrame = new sap.viz.ui5.controls.VizFrame({
          'width': '100%',
          'height': '600px',
          'vizType' : 'pie',
          'vizProperties' : {
            plotArea: {dataLabel : {
            		visible: true,
                //renderer: function(pieDataLabel){pieDataLabel.text = pieDataLabel.ctx.Revenue;}
            }}
          }          
        });
        
        var oData = {
            data: [
                {'Country': "Canada", 'revenue': 410.87},
                {'Country': "China", 'revenue': 338.29},
                {'Country': "France", 'revenue': 487.66},
                {'Country': "Germany", 'revenue': 470.23},
                {'Country': "India", 'revenue': 170.93},
                {'Country': "United States", 'revenue': 905.08}
		        ]
        };

        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: 'Country', value: "{Country}"}
            ],
            measures: [
                {name: 'Revenue', value: '{revenue}'}
            ],
            data: {path: "/data"}
        });
        oVizFrame.setDataset(dataset);
        oVizFrame.setModel(oJsonModel);
        var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
        'uid' : "size",
        'type' : "Measure",
        'values' : ["Revenue"]
        }), feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem({
        'uid' : "color",
        'type' : "Dimension",
        'values' : ["Country"]
        });

        oVizFrame.addFeed(feedPrimaryValues);
       ...