Skip to Content

VizFrame Chart Bound to OData

Hello:

I have created a simple chart (using the tutorial at thislink).

onInit: function() {
	var oVizFrame = this.getView().byId("chart");
	var oModel = new sap.ui.model.json.JSONModel();
			
	var data = {
		'Data': [{
			"Team": "Team A",
			"Proactive": "758620", 
			"Reactive": "4123500}, 
                }, {
			"Team": "Team B",
			"Proactive": "431160",
			"Reactive": "412350"
		}, {
			"Team": "Team C",
			"Proactive": 515100",
			"Reactive": "412350"
		}]
	};
	oModel.setData(data);
	var oDataset = new sap.viz.ui5.data.FlattenedDataset({
		dimensions: [{
			name: 'Team',
			value: "{Team}"
		}],
		measures: [{
			name: 'Proactive',
			value: '{Proactive}'
		}, {
			name: 'Reactive',
			value: '{Reactive}'
		}],
		data: {
			path: "/Data"
		}
	});
	oVizFrame.setDataset(oDataset);
	oVizFrame.setModel(oModel);
	oVizFrame.setVizType('stacked_bar');

	oVizFrame.setVizProperties({
		plotArea: {
			colorPalette: d3.scale.category20().range()
		}
	});


	var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
		'uid': "valueAxis",
		'type': "Measure",
		'values': ["Proactive", "Reactive"]
	}),
	feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
		'uid': "categoryAxis",
		'type': "Dimension",
		'values': ["Team"]
	});
	oVizFrame.addFeed(feedValueAxis);
	oVizFrame.addFeed(feedCategoryAxis);
}

The chart renders correctly, so the next step is to connect an OData service to the Vizframe.

I added the OData service to the application (using New > OData Service), and can see the service in the manifest.json. I've made the parameters of the hard-coded data the same as what is returned from the OData service call.

"sap.app": {
	"id": "com.sap.nacco.columnccocolumnchart",
	"type": "application",
	"i18n": "i18n/i18n.properties",
	"applicationVersion": {
		"version": "1.0.0"
	},
	"title": "{{appTitle}}",	
	"description": "{{appDescription}}",
	"sourceTemplate": {
		"id": "servicecatalog.connectivityComponent",
		"version": "0.0.0"
	},
	"dataSources": {
		"CCO_SERVICES_ALL": {
			"uri": "/CCO/com/sap/nacco/services/cco_services.xsodata/",
			"type": "OData",
			"settings": {
				"odataVersion": "2.0",
				"localUri": "localService/metadata.xml"
			}
		}
	}
},

The OData service (which is invoked at '/ProactiveByTeamSet') returns:

I think it is a matter of changing the oVizFrame.setModel call to the OData model. The question is, how do I get the OData model that I've added to the application and is the the manifest.json at dataSources.CCO_SERVICES_ALL?

If it not painfully obvious, I'm new to SAP UI5.

Thanks!

odata-service.png (292.9 kB)
Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

2 Answers

  • Best Answer
    Posted on Nov 26, 2017 at 05:41 PM

    Discovered the XML to load the chart directly with the OData Service data:

    <viz:VizFrame visible="true" id="Chart-1" uiConfig="{applicationSet:'fiori'}"
        height="75%" width="100%" vizType="stacked_column"
        vizProperties="{ title: {text : 'Proactive vs. Reactive', visible : true}}">
        <viz:dataset>
          <viz.data:FlattenedDataset data="{path:'/ProactiveByTeamSet'}">
            <viz.data:dimensions>
              <viz.data:DimensionDefinition name="Team" value="{path: 'Team'}" />
            </viz.data:dimensions>
            <viz.data:measures>
              <viz.data:MeasureDefinition name="Proactive" value="{path: 'Proactive'}" />
              <viz.data:MeasureDefinition name="Reactive" value="{path: 'Reactive'}" />
            </viz.data:measures>
          </viz.data:FlattenedDataset>
        </viz:dataset>
        <viz:feeds>
          <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Proactive" />
          <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Reactive" />
          <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Team" />
        </viz:feeds>
    </viz:VizFrame>
    
    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Dec 27, 2017 at 04:01 AM

    Let's say you have defined the oData URI and oDataModel like below:

    var sServiceURI = ".../abc.xsodata";
    
    var oDataModel = new sap.ui.vode.odata.v2.ODataModel(sServiceURI, "username", "password");

    you could set the model directly to vizFrame like

    VizFrame.setModel(oDataModel);

    Of course, you have to ensure the patch of data defined in FlattenedDataset (it's /ProactiveByTeamSet in your case) is valid.

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.