vizFrame Bullet Chart Demo

Demo of vizFrame Bullet Chart

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 = "Bullet Chart Demo"> </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' : 'bullet'
        });
        
        var oData = {
            data: [
                {"Country": "China", "Profit": 100, "Committed": 10, "Target": 50},
                {"Country": "USA", "Profit": 30, "Committed": 5, "Target": 29},
                {"Country": "Canada", "Profit": 88, "Committed": 15, "Target": 60}
				]};

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

        oVizFrame.addFeed(feedPrimaryValues);
        oVizFrame.addFeed(feedAxisLabels);
        oVizFrame.addFeed(feedTargetValues);
    
       ...