Skip to Content
0

VizFrame Chart Bound to OData

Nov 23, 2017 at 11:16 PM

87

avatar image

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)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
Ian McCallum
Nov 26, 2017 at 05:41 PM
0

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>
Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member
Dec 27, 2017 at 04:01 AM
1

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.

Share
10 |10000 characters needed characters left characters exceeded