cancel
Showing results for 
Search instead for 
Did you mean: 

【sapui5】Control.Vizframe replace data

1a1t1u2y
Explorer
0 Kudos

I'm facing a problem.

I want to display a bar chart on detail page when Pressing a master list.

However, the chart shown on detail page contains all data in Entityset.

How can I show only selected data?

please advise me.

regards,

<Data.view.xml>

<mvc:View xmlns:mvc="sap.ui.core.mvc" 
xmlns:core="sap.ui.core" 
xmlns="sap.m" 
xmlns:semantic="sap.m.semantic" 
xmlns:html="http://www.w3.org/1999/xhtml" 
xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" 
xmlns:action="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" 
xmlns:viz="sap.viz.ui5.controls" 
xmlns:layout="sap.ui.layout"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
xmlns:viz.data="sap.viz.ui5.data"
controllerName="test2.test2.controller.Data" afterInit="action" action:wiring="\{'afterInit':\{'navigation':\{'routeName':'List'\}\}\}">
	
		<semantic:DetailPage id="page" navButtonPress="onNavBack" showNavButton="{device>/system/phone}" title="{bukrs}" busy="{detailView>/busy}" busyIndicatorDelay="{detailView>/delay}">


		<semantic:content>
			<SearchField xmlns="sap.m" id="searchField" showRefreshButton="{= !${device>/support/touch} }" width="100%" search="onSearch">
			</SearchField>
			<IconTabBar id="iconTabBar" class="sapUiResponsiveContentPadding">
				<items>
					<IconTabFilter id="iconTabBarFilter1" icon="sap-icon://bar-chart" iconColor="Positive">
					<content>
					</content>
					</IconTabFilter>
					<IconTabFilter id="iconTabBarFilter2" icon="sap-icon://bar-chart" iconColor="Critical">
					</IconTabFilter>
					<IconTabFilter id="iconTabBarFilter3" icon="sap-icon://area-chart">
					</IconTabFilter>
				</items>
			</IconTabBar>
			
			<List id="list"  noDataText="{i18n>noDataText}">
				<items>
					<ObjectListItem title="{itm}">
					</ObjectListItem>


				</items>
			</List>
			
			<layout:FixFlex id='chartFixFlex' minFlexSize="250">


		        <layout:flexContent>
		            <viz:Popover id="idPopOver"></viz:Popover>
		            <viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
		                height='100%' width="100%" vizType='column'>
		                <viz:dataset >
		                    <viz.data:FlattenedDataset data="{/Meetups}" >
		                        <viz.data:dimensions>
		                            <viz.data:DimensionDefinition name="会社コード"
		                                value="{bukrs}" />
		                        </viz.data:dimensions>
		                        <viz.data:measures title="月ごと">
		                            <viz.data:MeasureDefinition name="1月"
		                                value="{jan}" />
		                            <viz.data:MeasureDefinition name="2月"
		                                value="{feb}" />
		                            <viz.data:MeasureDefinition name="3月"
		                                value="{mar}" />
		                            <viz.data:MeasureDefinition name="4月"
		                                value="{apr}" />
		                            <viz.data:MeasureDefinition name="5月"
		                                value="{may}" />
		                            <viz.data:MeasureDefinition name="6月"
		                                value="{jun}" />
		                            <viz.data:MeasureDefinition name="7月"
		                                value="{jul}" />
		                            <viz.data:MeasureDefinition name="8月"
		                                value="{aug}" />
		                            <viz.data:MeasureDefinition name="9月"
		                                value="{sep}" />
		                            <viz.data:MeasureDefinition name="10月"
		                                value="{oct}" />
		                            <viz.data:MeasureDefinition name="11月"
		                                value="{nov}" />
		                            <viz.data:MeasureDefinition name="12月"
		                                value="{dec}" />
		                        </viz.data:measures>
		                    </viz.data:FlattenedDataset>
		                </viz:dataset>
		
		                <viz:feeds>
		                    <viz.feeds:FeedItem id='valueAxisFeed1' uid="valueAxis" type="Measure"
		                        values="1月" />
		                    <viz.feeds:FeedItem id='valueAxisFeed2' uid="valueAxis" type="Measure"
		                        values="2月" />
		                    <viz.feeds:FeedItem id='valueAxisFeed3' uid="valueAxis" type="Measure"
		                        values="3月" />
		                    <viz.feeds:FeedItem id='valueAxisFeed4' uid="valueAxis" type="Measure"
		                        values="4月" />
		                    <viz.feeds:FeedItem id='valueAxisFeed5' uid="valueAxis" type="Measure"
		                        values="5月" />
		                    <viz.feeds:FeedItem id='valueAxisFeed6' uid="valueAxis" type="Measure"
		                        values="6月" />
		                    <viz.feeds:FeedItem id='valueAxisFeed7' uid="valueAxis" type="Measure"
		                        values="7月" />
		                    <viz.feeds:FeedItem id='valueAxisFeed8' uid="valueAxis" type="Measure"
		                        values="8月" />
		                    <viz.feeds:FeedItem id='valueAxisFeed9' uid="valueAxis" type="Measure"
		                        values="9月" />
		                    <viz.feeds:FeedItem id='valueAxisFeed10' uid="valueAxis" type="Measure"
		                        values="10月" />
		                    <viz.feeds:FeedItem id='valueAxisFeed11' uid="valueAxis" type="Measure"
		                        values="11月" />
		                    <viz.feeds:FeedItem id='valueAxisFeed12' uid="valueAxis" type="Measure"
		                        values="12月" />
		                    <viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension"
		                        values="会社コード" />
		                </viz:feeds>
		            </viz:VizFrame>
		        </layout:flexContent>
		    </layout:FixFlex>


		</semantic:content>


	</semantic:DetailPage>


</mvc:View>

<Data.controller.js>

/*global location*/
sap.ui.define([
	"test2/test2/controller/BaseController",
	"sap/ui/model/json/JSONModel"
], function (BaseController, JSONModel) {
	"use strict";
	return BaseController.extend("test2.test2.controller.Data", {
		onInit: function () {
			this.getOwnerComponent().getRouter().getRoute("dataget").attachPatternMatched(this._onRouteMatched, this);
		},
		_onRouteMatched: function (oEvent) {
			this._bukrs = oEvent.getParameter("arguments").bukrs;


			var oModel = this.getModel();
			var sPath = oModel.createKey("Meetups", {
					bukrs : this._bukrs	} );
			
			this.getView().bindElement("/" + sPath);
			
			var oVizFrame = this.getView().byId("idVizFrame");


			//↓how to write this code??↓
                       oVizFrame.getDataset().setValue(this._bukrs);
            	
		}


	});
});

<Meetups.json>

[{
		"bukrs":"ZT01",
		"code":1,
		"cname":"Acom",
		"div":"1",
		"jan":11,
		"feb":12,
		"mar":13,
		"apr":14, 
		"may":15,
		"jun":16,
		"jul":17,
		"aug":18,
		"sep":19,
		"oct":20,
		"nov":21,
		"dec":22,
		"itm":5
	},
	{
		"bukrs": "ZT02",
		"code":2,
		"cname":"Bcom",
		"div":"2",
		"jan":23,
		"feb":24,
		"mar":25,
		"apr":26, 
		"may":27,
		"jun":28,
		"jul":29,
		"aug":30,
		"sep":31,
		"oct":32,
		"nov":33,
		"dec":34,
		"itm":10
	},
	{
		"bukrs": "ZT03",
		"code":3,
		"cname":"Ccom",
		"div":"1",
		"jan":35,
		"feb":36,
		"mar":37,
		"apr":38, 
		"may":39,
		"jun":40,
		"jul":41,
		"aug":42,
		"sep":43,
		"oct":44,
		"nov":45,
		"dec":46,
		"itm":15
	},
	{
		"bukrs": "ZT04",
		"code":4,
		"cname":"Dcom",
		"div":"2",
		"jan":47,
		"feb":48,
		"mar":49,
		"apr":50, 
		"may":51,
		"jun":52,
		"jul":53,
		"aug":54,
		"sep":55,
		"oct":56,
		"nov":57,
		"dec":58,
		"itm":20
	}
	]

Accepted Solutions (0)

Answers (1)

Answers (1)

former_member196805
Contributor
0 Kudos

Try the following:

1. pick up the vizframe instance and assign it to a variable like

var chart = sap.ui.getCore().byId("idVizFrame") 

2. pick up the dataset bounds to it and assign it to a variable by calling

var chartDataset = chart.getDataset() 

3. now do this

chartDataset.bindAggregation("data", {path: "/Meetups", filters: [new sap.ui.model.Filter("bukrs", sap.ui.model.FilterOperator.EQ, "ZT03")]}) 

you could update the ZT03 to the value at runtime.