Skip to Content

VizFrame Chart Bound to OData


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"
	var oDataset = new{
		dimensions: [{
			name: 'Team',
			value: "{Team}"
		measures: [{
			name: 'Proactive',
			value: '{Proactive}'
		}, {
			name: 'Reactive',
			value: '{Reactive}'
		data: {
			path: "/Data"

		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"]

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.

"": {
	"id": "",
	"type": "application",
	"i18n": "i18n/",
	"applicationVersion": {
		"version": "1.0.0"
	"title": "{{appTitle}}",	
	"description": "{{appDescription}}",
	"sourceTemplate": {
		"id": "servicecatalog.connectivityComponent",
		"version": "0.0.0"
	"dataSources": {
			"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.


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

  • Get RSS Feed

2 Answers

  • Best Answer
    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}}">
          < data="{path:'/ProactiveByTeamSet'}">
              < name="Team" value="{path: 'Team'}" />
              < name="Proactive" value="{path: 'Proactive'}" />
              < name="Reactive" value="{path: 'Reactive'}" />
          <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" />
    Add comment
    10|10000 characters needed characters exceeded

  • 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


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

    Add comment
    10|10000 characters needed characters exceeded